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

New in Font Bureau’s Reading Edge Series: Custer RE

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.

New from Font Bureau: Big Moore

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.

 


New from Font Bureau: Eagle

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.


Using OpenType Features on the Web

Serge with the swash feature turned on (left) and off (right).

 

Did you know that Webtype webfonts are chock full of typographic amenities and OpenType extras you know and love from desktop fonts? Modern browsers support these features — like alternate characters, ligatures or small caps — and they are easy to use in CSS. This post will help you implement them in your designs. (To date, Internet Explorer 10+, Firefox 4+, Chrome 15+ and Safari 6+ are all OpenType feature-savvy, but best check a site like caniuse.com for the latest information on all operating systems and thoroughly test your design across browser versions.)

We designed some specimen sites to illustrate the possibilities of OpenType features:

  • The Monokrom Catalog uses alternates, small caps, different numerals and fractions.
  • Le Jet for Serge shows swash characters in action.
  • The New Web Typography site we developed for Microsoft demonstrates a whole array of OpenType features and how to use them.

Font-Feature-Settings

The most common way to call OpenType features in CSS 3 is via the “font-feature-settings” property and the appropriate four-letter feature abbreviation for the given feature. For instance, to turn on standard ligatures, use the “liga” property:

font-feature-settings:"liga";

Since OpenType features are implemented differently in each browser, you’ll have to use the so-called “vendor prefix” in order to ensure cross-browser support. Firefox/Mozilla has changed syntax with version 14. Add the second variant for backwards compatibility. (We ommit the previously recommended “-o-font-feature-settings” line for Opera browsers since current versions of Opera are based on webkit technology and thus covered by the webkit prefix. Older versions of Opera did not support OpenType features.)

Below you will find a sample set of code for default-features that are supported in most browsers such as contextual alternates, standard ligatures, contextual ligatures, and kerning:

-moz-font-feature-settings:"calt=1, liga=1, clig=1, kern=1";
-moz-font-feature-settings:"calt", "liga", "clig", "kern";
-ms-font-feature-settings:"calt", "liga", "clig", "kern";
-webkit-font-feature-settings:"calt", "liga", "clig", "kern";
font-feature-settings:"calt", "liga", "clig", "kern";

 

All Webtype webfonts have kerning and standard ligatures like fi and fl. These can also be activated via the CSS property “text-rendering: optimizeLegibility” for webkit browsers, but this is not standard CSS and may cause problems. More sophisticated OpenType features like alternates are only supported in those modern browsers mentioned above. For example, to turn on the alternate characters in stylistic set 1, use the “ss01” property; for old style figures, use the “onum” property:

-moz-font-feature-settings:"ss01=1, onum=1";
-moz-font-feature-settings:"ss01", "onum";
-ms-font-feature-settings:"ss01", "onum";
-webkit-font-feature-settings:"ss01", "onum";
font-feature-settings:"ss01", "onum";

 

alternates

Shift’s stylistic sets: alternate numerals for extra charm in stylistic set 1 (ss01), letters with bottom serif in ss02, and simple “schoolbook” forms for a, g, and y in ss03.

 

The Most Common Features

The features below are the ones you’ll most frequently find in webfonts. For a more complete inventory, see the standard OpenType features, though technically a font manufacturer can make up their own four-letter tags.

  • salt: Stylistic Alternates. Enables alternate glyphs when only one set of alternates is included in the font.
  • ss01 to ss20: Stylistic Sets. Enables alternate characters according to the group specified by the typeface designer (1 to 20 are possible). Sometimes these sets include several stylisitically matching alternates, sometimes only one glyph. Please check the glyph overview for more information, or the type portrait on our blog. (See the three stylistic sets of Shift for instance)
  • calt: Contextual Alternates. Alternate shape for a character used in context of specific other characters nearby.
  • liga: Standard Ligatures. Typically fi and fl, often also ff, ffi, ffl. (See Trilby)
  • dlig: Discretionary Ligatures: Optional ligatures like st, et, Th. (See Big Moore)
  • clig: Contextual Ligatures. Ligatures used in context of specific other characters nearby, mostly in script fonts. (See Savanna)
  • onum: Oldstyle Numerals. Webtype offeres lining figures as the default numerals. Several typefaces include optional old style figures that fit more harmoniously into body copy. (See Planet)
  • tnum: Tabular Numerals. Numerals of uniform width, as opposed to proportional numerals, where the 1 for instance is more narrow. (See Helsinki)
  • smcp: Small Caps. Specifically designed small capital letters instead of lowercase. (See Farnham)
  • unic: Unicase. Lowercase forms enlarged to uppercase letter size. (See Hermes)
  • swsh: Swashes. Turn on to use a swash variant of a character (best used together with cswh).
  • cswh: Contextual Swashes. Swash letters used in context of specific other characters nearby.
  • zero: Slashed Zero. Useful where the 0 could be confused with an O. (See Helsinki)
  • sups: Superscript. Specifically drawn superscript numerals. (Not to be confused and not to be use together with the <sup> HTML superscript tag.)
  • subs: Subscript. Specifically drawn subscript numerals.

For feature-rich fonts, it may be advisable to strip unused features and/or limit the character set of a font to reduce the file size, for instance if loading time of a webfont is an issue (see the subsetting options in your project settings). Our support pages have more detailed information on how to implement webfonts on your site. If you have any additional questions, feel free to contact us.

 

Planet’s Light and Book weight with old style figures (onum) and the default lining figures.

 

unicase

Hermes’s unicase alternates for A, E, M, N and U are accessible via stylistic set 8 (ss08) or the “unic” property.

 

Helsinki use

Helsinki with and without alternate characters in stylistic set 1 (J with short terminal, potbelly-a, double-story g), tabular figures (the alternate 1 with bottom serif), and the slashed-zero compared.

 

Nitti Grotesk from Bold Monday

NittiGrotesk

Fresh from Bold Monday comes Nitti Grotesk, the proportional companion to the monospaced family Nitti and part of a larger collection of Grotesque-inspired typefaces by Pieter van Rosmalen. The series originates in his sans-serif Capone from 2003, which evolved into the display family Stanley and a monospaced version that became Nitti — named after Francesco Raffaele Nitto, one of Al Capone’s henchmen. In 2014 van Rosmalen added Nitti Grotesk.

Nitti Grotesk has its roots in the early English Grotesques, with their quirky and idiosyncratic shapes, which lend it humanity and warmth. At the same time van Rosmalen focussed on versatility and developed his model into a coordinated family of seven weights. The relatively short uppercase letters make Nitti Grotesk particularly suitable for applications with frequent use of caps, like title case and abbreviations. Alongside Nitti, the new sans became already widely known through its use in the Writer Pro application and on the accompanying website that launched in December 2013, underlining the clear, straightforward approach of Writer.

Nitti Grotesk as used on the Writer.Pro website.

Nitti Grotesk as used on the Writer Pro website.

Writer2

Nitti Grotesk is optimized for text sizes down to 14px, and comes with OpenType features, such as alternate characters for a and g and true fractions. It is easy to combine with just about all serif faces, for instance Turnip RE and Benton Modern RE for small text, or Belizio, Farnham Display, and Shift if you need a companion for larger sizes.

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


Introducing TypeManufactur, Georg Salden and his typeface Planet

We are very excited to welcome German type design veteran Georg Salden and his foundry TypeManufactur as a new partner on Webtype. Not only has Salden been creating typefaces for over 50 years now, but he was also one of the first designers to offer his fonts directly to customers, first under the GST (Georg Salden Type) label and, since 2003, as TypeManufactur. In 2009, he teamed up with type designer Ludwig Übele who helps with production and distribution. Please check out their first release on Webtype: Planet.

planet

Georg Salden has designed more than 40 type families, each with its own character. But he always put legibility first. Planet is no exception. It is an all-purpose sans-serif with a humanist touch, practical and without affectations. Round letters are circular with diagonal terminals opening up counters, while straight-sided characters are comparably narrow. This allows for a compact letterfit with good readability. The result is a restrained, coherent family in six weights with lively details such as snappy descenders that lend it a certain charm. The italics, available in four weights, are narrow and dynamic, creating an interesting contrast to the roman while staying readable enough to be used on their own.

The Light and Book weight with old style figures (accessible via the onum font-feature-setting) and the default lining figures. The flat top 3 and the 5 are very distinctive.

Planet is a great choice for body copy as well as labels and headings, rendering clear down to a font-size of 14px. Adaptive in design, it feels at home in corporate and editorial environments, as well as on retail sites. Try to combine it with humanist serif faces such as Poynter Serif RE, Proforma or Marat for a warm atmosphere, or a display face like Freight Display and Whitman Display for added classiness.

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

Make sure to also visit What a Character, spotlighting some of the beautiful glyphs Georg Salden has been creating.


Farnham Text and Display from Font Bureau

Farnham Display

Farnham Display in five weights, Light to Black, with italics and small caps.

 

Font Bureau’s Farnham is a lively transitional serif series that adds personality to editorial text and display applications. Christian Schwartz based his design on the work of German-born punchcutter Johann Fleischmann, a contemporary of Baskerville and Fournier. He was an expert in advanced tools and materials, and pushed beyond the frontiers of his time, cutting typefaces famous for their “sparkle”. For Farnham, Schwartz looked at Fleischmann’s exuberant angularity, carrying it to all weights of his series. Pronounced notches and sharp corners distinguish the design in large sizes and let small text stay clear.

Farnham Text

Farnham Text in three weights, Regular to Bold, with italics and small caps.

The Farnham Text styles feature lower stroke contrast than the Display and are optimized for sizes down to 12px, yet distinct details like ball terminals and the energetic mix of vertical and angled stress are present in both families and make Farnham flavorful and elegant. The British cloth­ing company S.E.H Kelly created a sophisticated and classy website with the minimalist set of just two styles: Farnham Text Regu­lar and Italic.

kelly

Farnham comes with an ample set of OpenType features — small caps, old style figures, ligatures and alternate characters — accessible via font-feature-settings. The series harmonizes with almost all sans-serif text faces, for instance Fort, Marat Sans, Aften Screen, or Schwartz’s Amplitude. Try any free of charge for 30 days. For more details, see the Farnham webfont pages.


Categories

Webtype on Twitter