BLOG

News and information related to Webtype, including new fonts, technology, and general observations on the state of online typography.

Tick and Tock from Font Bureau

Tick&Tock

New releases Tick (top, with interspersed unicase glyphs) and Tock (in the two bottom lines)

Tick and Tock are two new stencil display faces by Cyrus Highsmith — individual but related. They play on a similar theme but with different details and in a different tone. Tick was born on a casually lettered book cover design by Highsmith. One can sense the fun he has in coming up with nonchalant letterforms made up of just a few parts. Tock later grew out of lively Tick. It is more restrained and regular, recalling vernacular industrial stencils, but an equally cool choice for informal display text, splash pages and banners.

Both typefaces, but especially Tick, come with nifty OpenType features for even more feistiness. Several lowercase and uppercase letters in Tick are joined by unicase forms. Fractions, standard ligatures, tortoises, slashed zeros and alternate quotation marks for Tock round out the character set. (If you want to know more about using OpenType features on the web, check out this blog post.)

OT features

As with all fonts on Webtype, Tick and Tock can be tested free of charge for 30 days. For more details, see the Tick and Tock family page or check out this fun webfont specimen we designed using CSS masks and more to demonstrate some of Tick and Tock’s unique talents.

site1
site2


Brando from Bold Monday

brando

Brando by Mike Abbink is a new contemporary serif exploring the balance between mechanical and egyptian forms. It was originally inspired by a bank logotype proposal, then subsequently developed into the robust typeface it is today. The light styles of Brando assume the shape of a humanist slab-serif, while the heavier weights feature just the right amount of contrast to give it a harmonious texture in text. The Italics strike an interesting balance between true italics and oblique.

The family’s eight weights — Hairline to Black — make Brando fit for display settings as well as the demands of continuous text. As such, it is great for editorial and identity design work and complex tasks that need typographic distinction and flexibility. The fonts come with OpenType amenities such as small caps (smcp), an alternate g with less pronounced ear, alternative currency symbols (ss01), fractions and a variety of numeral styles: proportional lining numerals (pnum, standard), oldstyle numerals (onum), tabular numerals (tnum) and a “slashed” zero with dot (zero). Read all about how you can use these on the web in this blog post.
features
Brando is a good-natured design that combines well with many sans-serifs, for instance Alright SansAften Screen or Marat Sans. Like all fonts on Webtype, it can be tested free of charge for 30 days. For more details, see the Brando webfont page.


Webtype in use: MFA Design Program at the School of Visual Arts NYC

MFA-Design-Mission

When it comes to presenting themselves online, design schools often tend to push the usability envelope in an effort to show off the innovative spirit of the institution. Amid this flurry of websites that are dazzling but confounding, the home for the School of Visual Arts MFA Design Program, designed by The Original Champions of Design (OCD), is refreshingly straightforward. The pages are a reflection of the maturity of the SVA MFA program itself, which was launched “as an alternative to programs that emphasize form over content”.

The MFA Design homepage’s simple structure allows for practical adaptations at various viewport widths.

A simple site structure allows for practical adaptations at various viewport widths. Note how the navigation reformats and resizes to remain accessible.

The homepage is deceptively simple, with two main columns divided into four main topic rows, but each section contains a wealth of content once you start digging. Heads and text are all presented by one typeface, Titling Gothic FB. While there are an astounding 25 styles of the sans serif family on Webtype to choose from, OCD practiced restraint, limiting themselves to just a few weights of one width.

MFA-Design-Faculty

This “Normal” width of Titling Gothic is actually quite broad. Its stoutness echoes Joe Finocchiaro’s custom lettering for the MFA Design logotype and — compared to the relatively condensed fonts we’re accustomed to seeing online — gives the site a distinctive look without resorting to flashiness or pretension. When set in bold and all-caps, Titling Gothic builds assertive bricks of clear labeling and clickable navigation.

MFA-Design-Apply

The designers even use Titling Gothic for text throughout the site, turning a blind eye to the assumption (found right in the typeface’s name) that it only be used for headlines. In many cases, this works just fine, especially with the font size is large.

MFA-Design-Events

For longer paragraphs of smaller type, however, one wonders if a stout, screen-optimized text face like Benton Sans RE or Giza RE might be a more prudent choice. But we’ll let you be the judge.

Text type quibbles aside, we salute the SVA team for this design. Rather than rely on visual gimmickry, they had confidence in their content. The result is understated but bold, and a fitting voice for the program.


Parkinson from Font Bureau

The Parkinson display family was designed in 1976 by Jim Parkinson for Rolling Stone magazine. Roger Black, back then its art director, was looking for an edgy, idiosyncratic style and found Parkinson to be the right lettering artist for this assignment (see this short video of Black on their collaboration). “It’s a crazy melding of the magazine’s original logo by San Francisco poster artist Rick Griffin and ATF Jenson,” says Parkinson, “I think of it as Nicholas Jenson on acid.” Following the rise of the magazine, more styles were added year after year up to the current 10 styles in four weights with italics and condensed.

Parkinson is a peculiar venetian oldstyle full of character. It is optimized for onscreen use down to 14 px, yet the sometimes wonky details best come into picture at display sizes. At Rolling Stone, the family has long been used to great effect alongside Titling Gothic — a contrasty and exciting combination. Or try Parkinson with Antenna or Scout, or our latest petite-sized serif family Custer RE.

RS montage

The different styles of Parkinson in use at Rolling Stone magazine

As with all fonts on Webtype, Parkinson can be tested free of charge for 30 days. For more details, see the Parkinson webfont page.


Custer RE from Font Bureau

Custer Specimen

The four styles of new Custer RE, designed especially for small body copy in sizes of 9 to 14px.

 

Custer RE is a new typeface by David Berlow in Font Bureau’s Reading Edge series of fonts especially designed for small sizes on screen.

In 2009, an architecture book from 1897 in the library of the University of Wisconsin caught David Berlow’s attention. It was set in a clear text face — a predecessor of Bookman — presumably cast by the Western Type Foundry who called it Custer. Upon noting how well the typeface worked in sizes of 6 and 7 point in print, Berlow saw potential in developing the design into a family geared to onscreen reading. Custer RE is a broad, approachable typeface drawn very large on the body and with a tall x-height to maximize its apparent size when set small. The minimal stroke contrast and the hefty serifs let it stay clear down to a font-size of 9px and contribute to a balanced tone for good readability in long paragraphs of text.

Custer Pairings

Custer RE with Shift for headlines

Like all members of the Reading Edge series, Custer RE is intended to work well with numerous different “normal-sized” type families as a small-sized companion. Shift and Bookman would be the closest matches in the medium size range, or combine it with sans-serifs as diverse as Bureau Grot or Marat Sans. You can try Custer RE and any other typeface on Webtype free of charge for 30 days. For more details, see the Custer RE webfont page.

 

The text of the main specimen is taken from “The House Beautiful” by William Channing Gannett in the 1897 edition designed by Frank Lloyd Wright, the architecture book Berlow based his design on.

Big Moore from Font Bureau

Big Moore
Big Moore is the refined and well-balanced transitional display face by Matthew Carter that brings back the proportions true to Baskerville’s times.

In 1766, Isaac Moore, manager of Joseph Fry’s type foundry in Bristol, England, issued a specimen under his own name. It showed several typefaces closely following the designs of John Baskerville, then at the height of fashion. When Stephenson Blake cut their 48-point Fry’s Baskerville in about 1910, they made it conform to the newly introduced standard alignment — at the price of short descenders and historically less appropriate lining figures. With Big Moore, Carter remedies the deficiencies brought about by former technological requirements. As in the types of Baskerville and Moore, more elegant full-length descenders, old-style figures and beautiful Italics have been made available again.

But the two styles of Big Moore come with even more OpenType features and amenities for fine typography: Standard (liga) and discretionary ligatures (dlig), swash capitals (swsh) for the Italic, alternate characters (ss01, ss03) and ampersands (ss02), fractions, as well as punctuation, currency and math symbols for both lining and old-style figures. You can use these via font-feature-settings in your CSS (more information on how exactly in this post).

Features01

The alternate Q’s and ampersands are accessible via stylistic sets 01 and 02. Below, the swash caps of the italic style, swash ligature for ‘Th’, an ‘f’ and ‘t’ with longer crossbar for adhoc-ligatures in the Roman (ss03), and Big Ben.

Features2

Standard and discretionary ligatures, as well as historically more appropriate old-styles numerals for both the roman and italic style.

Features03

Big Moore is made for exquisite display typography in heads, banners and on splash pages. Try Harriet Text or Poynter Serif RE as a companion for body copy, or a sans-serif like Scout RE or Aften Screen. As with all fonts on Webtype, Big Moore can be tested free of charge for 30 days. For more details, see the Big Moore webfont page.

 


Eagle from Font Bureau

Eagle specimen

The Eagle family is based on Eagle Bold, Morris Fuller Benton’s iconic all-caps display face, drawn in 1933 for the National Recovery Administration. David Berlow designed a matching lowercase, expanded the character set and added a weight slightly less bold more suitable for setting text. Jonathan Corum later drew the Light and Black to complement the family.

The four styles of Eagle are geared at strong display typography like headlines, banners or splash pages. The light weight is spaced tightly for extra impact in large sizes (we recommend 48px and larger). Eagle’s geometric letterforms lend themselves to all-caps settings, bringing out the distinct pointy apexes in characters like A, N, or G. Try combining Eagle with Apres RE for small body copy or any serif text face. The strong flavor of Eagle works well with almost all other fonts.

As with every typeface on Webtype, you can try Eagle free of charge for 30 days. For more details, see the Eagle webfont page.


Webtype in use: Más por Más

Above “the fold”, Más por Más boldly presents a forward-thinking news source, from its tight, all-lowercase logo to the image-based feature story teaser.

Above “the fold”, Más por Más boldly presents a forward-thinking news source, from its tight, all-lowercase logo to the main feature story introduced with an infographic style image.

At first glance it’s apparent that Más por Más is a news site tailored for the modern web, and there is real power and flexibility built under the surface that backs up that assumption. The publication was designed first in print by Gustavo Belmán with art direction by Eduardo Danilo of Danilo Design, and then on the web in collaboration with Santiago Orozco. The web edition was developed to give the content editors plenty of design freedom while staying true to the publication’s stylistic guidelines. Using a customizable “mosaic” homepage, editors can change the configuration every day, adjusting the headline font, type size, color, and line-height to their specific needs.

maspormas-bottom-mosaic

The framework behind the Más por Más front page is the “mosaic”, a flexible grid into which editors can arrange images and headlines to suit the content.

We asked Orozco about building a website from a flexible typographic perspective.

What was your role in the design process?
My role is to take care of the correct type usage, this is an iterative process that happens throughout all the development of any website we make.

Why did you choose these typefaces?
Since Más por Más is a publication that runs only in Mexico City, we wanted to project a mood that is “metropolitan”, “modern”, and different from any other publication. The contemporary typefaces reflect that: Gotham for the logo and section headlines, Salvo Sans and Serif for headlines, and Benton Sans and Sans RE for large and small text.

maspormas-article

A clear hierarchy is shaped on article pages. The section flag is set in a wide, sturdy Salvo Sans, while various weights of Benton Sans deliver the navigation, headline, deck, and byline.

What features were most important to you when choosing the type palette?
Mainly we focus on selecting type with the personality we think is appropriate for the voice of the publication. Aside from this we check the availability for web. After this initial consideration we choose the weights we need to create rhythm and hierarchy, and also good rendering performance on all platforms.

Text is set in Benton Sans RE, designed specifically for readability at small sizes — even the relatively tiny stuff in the sidebar remains clear and legible. Salvo Serif’s numerals give life to the story’s related figures.

Text is set in Benton Sans RE, designed specifically for readability at small sizes — even the relatively tiny stuff in the sidebar remains clear and legible. Salvo Serif’s numerals give life to the story’s related figures.

How did you go about determining font-sizes, line-spacing and other typographic parameters?
We first start defining body copy size and measure, so we have the main baseline, and we take it from there to calculate the line height for headings, subheadings, kickers, bylines, pull quotes, etc. This is the base for all the templates in our websites.

How was your experience with licensing and implementing the fonts?
Oh, it’s very easy to implement. We just select the types we want from webtype.com, put the css link on our repository, and make the markup needed to make the site look great.


Miller Banner from Font Bureau

Miller Banner

Big, bigger, Miller Banner. Matthew Carter’s grandest member of the Miller series is meant for the largest display applications of ultimate grandeur, taking the Scotch Roman genre to new heights and beyond any examples among its historic antecedents. Hairlines have been sharpened and the contrast sweetened, lending grace and crisp elegance to banner headlines and titles. Richard Lipton added a seductive new Black weight — originally for Glamour magazine — that revives memories of the ultra bold Fat Faces of the 19th century.

Miller Banner complements our Miller Display and Miller Headline families. (The release of Miller Text is in preparation, contact us if you need it ex ante.) The variants differ in that Miller Display features less stroke contrast than Miller Banner; Miller Headline is of narrow proportions and more tightly spaced, intended for compact headlines in editorial environments. All Miller display styles behave harmoniously with rational text faces and Scotch Romans, such as Georgia Pro, Harriet Text, and Benton Modern RE. Or try to combine Miller with a reserved sans-serif like Heron Sans, Scout, or Titling Gothic.

lincoln1

Luxury car company Lincoln is using Miller Banner in their branding and on their website. Never have large numbers looked more attractive.

lincoln2lincoln3
As with all fonts on Webtype, try any member of the Miller series free of charge for 30 days. For more details, see the Miller Banner webfont page.

 


Heron Sans & Serif from Font Bureau

Heron Sans

The design of the Heron series started when Joe Heroun, Art Director of Men’s Health, commissioned a new headline face for the magazine. In response, Cyrus Highsmith drew a compact, straight-sided sans-serif with taut flattened curves inspired by industrial, machine-made letters.

Heron Serif

To expand the scope and versatility of the design, Highsmith added an equally steadfast slab-serif and developed the two families into a full-fledged series of 40 styles: five weights, two widths, plus italics. Heron Sans and Heron Serif are fit for strong headlines as well as space-saving body copy down to 14px in the lighter weights. With its idiosyncratic, industrial atmosphere the series is a great alternative to typefaces like DIN, or geometric square serifs. Scout RE or Ibis RE would make good partners for small sized text.

Like many typefaces on Webtype, the Heron series is rife with OpenType features such as alternate characters and various sets of numerals: proportional and tabular figures, superscripts, subscripts and numerals for fractions. Read more on how to use OpenType features on the web in this post.

Heron Sans is rife with OpenType features such as alternate characters (nine

The impression of Heron Sans is adaptable by the use of its alternate characters via stylistic sets or the general “salt” feature. Also present are the “liga”, “dnom”, “numr”, “tnum”, “zero”, “ornm”, “sups” and “subs” feature.

Features Serif 2

Heron Serif features less alternate characters — I and l have serifs by default — but also the “liga” feature, “dnom”, “numr”, “tnum”, “zero”, “ornm”, “sups” and “subs” numerals.

 

As with all fonts on Webtype, Heron Sans and Heron Serif can be tested free of charge for 30 days. For more details, see the respective webfont page.