Archive for October, 2013

by Johnathan Zsittnik

OpenType Kerning Features

Since the mass availability of Web fonts, the gap between the typographic possibilities within Web and print design has been steadily closing. Continuing the trend, today we unveil new kerning and letter spacing capabilities to our Web Fonts service that can help take your Web designs one step closer to pixel perfect.

While kerning can be incorporated through standards-based implementations, there are several limitations that Web designers currently face:

  • Kerning settings in the browser may be on or off by default
  • The amount of kerning applied is inconsistent between different browsers
  • Kerning cannot always be controlled via the low level font-feature-setting: “kern” syntax from the CSS3 spec or the high-level, font-kerning syntax from the CSS3 spec
  • Text-rendering-optimizeLegibility, from the SVG spec, has inconsistent effects on kerning across browsers.

A variety of JavaScript libraries exist to enable kerning and overcome the issues described above, however each force the Web designer to specify kerning levels rather than leveraging kerning information specified by the font designer.

I had a chance to chat with Sampo Kaasila, about the technology he helped build and its inspiration. In his words, “The realization that kerning support is inconsistent and sometimes wrong across different Web browsers provided the impetus to develop this technology. It provides Web designers with kerning that is settable, correct and consistent across browsers.”

The new capabilities within Web Fonts allow you to specify letter spacing in a variety of ways. You can use auto kerning to take advantage of kerning pairs designated by the font designer. Or, you can specify your own kerning value for letter pairs. A tracking control allows the adjustment of spacing between three or more consecutive characters.

Kerning can be applied globally to a CSS selector. For example, I can enable auto kerning for all of my subheads by turning the feature on for the selector (i.e. H2) designated for my subheads within my CSS. Alternatively, kerning and tracking can be applied to targeted blocks of texts.

The new letterspacing controls are an extension of our OpenType feature technology that enables OpenType features such as fractions and ligatures to be rendered in all modern browsers – including those without native OpenType feature support. We’ve also enhanced this technology to allow users to specify a preferred glyph when multiple options exist. In the example below, two options for stylistic alternates are presented for the lowercase k  in the Fairbank typeface. This enhancement lets you specify a choice instead of using the default glyph.

Custom Kerning

To give users a sense of what’s going on ‘under the hood,’ I had Sampo provide an overview of how the technology operates. “Our service works in conjunction with client side JavaScript code. Runtime adjustments are made to the inter-character spacing to ensure correct spacing, depending on if the style in the external CSS or inline style attributes has enabled or disabled the kerning. Additionally, a consistent default on or off setting will be applied if there is no style information regarding kerning. Our service reads all the kerning information within the font’s kern and GPOS tables. This is then compiled to JavaScript code in the cloud. At run time, before the page is drawn, a rule application engine applies the kerning by injecting style information, which then correctly positions the characters when the browsers draw the text.”

Here’s a quick how-to for using these new capabilities

  1. Login to your account. You’ll need a Web Fonts subscription, but even a free plan will work. Free plan subscribers have access to the technology and compatible fonts.
  2. Search for fonts containing kerning support. Use the kerning support filter like this to narrow your Web font search.
  3. Add the font to your project. Be sure to grab the variant with “OT features” in the name. To be certain you have this option, don’t add an entire family to your project. Adding one weight at a time will allow you to specify the version you want – in this case, the version with OpenType features.
  4. Visit the Manage Web Fonts page to work on your project.
  5. Open the Add & Edit Fonts control for your project.
  6. Select the OpenType Features tab (If you don’t see it, your project does not contain a font with OpenType features).
  7. Select the Basic panel to apply kerning and OpenType features globally to a CSS selector, or the Advanced panel to apply kerning, tracking or OpenType features to targeted text.

Applying kerning or OpenType features to a CSS selector

  1. From the basic panel of the OpenType Features control, enter the selector name you wish to style.
  2. Selecting the font you want to use for the CSS selector from the Choose a font menu.
  3. Click Add.
  4. Click the CSS selector you just added form the menu below.
  5. Check Apply Auto kerning box to enable kerning. Preview the impact in the preview pane at the bottom of the control.
  6. Click the icons of any OpenType features you wish to apply to your selector. Again, you can preview the impact in the preview pane at the bottom of the control.
  7. Make sure you are using the JavaScript publishing method. This will not work through the non-JavaScript (CSS linking) or self-hosting publish methods.

Auto kerning Web Fonts

Applying kerning, tracking and OpenType features to targeted text

  1. From the advanced panel of the OpenType Features control, enter the text you wish to stylize in the “test your own text here” pane.
  2. Make sure you’ve highlighted the text you wish to stylize.
  3. Use the Auto Kern check box to enable auto-kerning.
  4. Use the Kerning slider or menu to kern two consecutive characters.
  5. Use the tracking slider or menu to adjust the spacing of three or more consecutive characters.
  6. Click the icons of any OpenType features you wish to enable for your text.
  7. Click the Select HTML button to view and copy the HTML you’ll need to add to your site.
  8. Make sure you are using the JavaScript publishing method. This will not work through the non-JavaScript (CSS linking) or self-hosting publish methods.

Custom Kerning

We hope you enjoy using this new technology. You can provide any feedback or tell us how you’re using it in the comments section.

by Alyson Kuhn

Jim Wasco loves to talk about type, and when he does, he enthuses equally about highly specific details on the one hand, and the typographic big picture on the other. It’s not an either/or discussion – it’s a seamless interplay of influences and inspirations. With Wasco, you can indeed have it both ways. His newest typeface design, the Harmonia Sans family, is a perfect example.

Harmonia Sans

The name Harmonia Sans alludes to harmony in two realms, music and typography – and on two levels, the individual and the collective. Each musical note must be ‘right’ on its own, to ring true with the other notes in the phrase, and it must add to the composition as a whole. (Wasco, by the way, plays jazz piano every week as part of a sextet.) The letterforms of a typeface are even more inter-dependent, in that they must achieve visual harmony in almost infinite combinations. On the ‘collective continuum,’ Harmonia Sans also blends what Wasco describes as his “favorite aspects of the different sans – grotesque, humanist and geometric” in a new geometric design. He adds, “Harmonia Sans is geometric because the letters are based on a square, circle and triangle, just like architecture.”


The alignment comparison above illustrates Wasco’s decision to use calligraphic cap to x-height proportions for Harmonia Sans. The ITC Avant Garde Gothic design has a larger x-height, and relatively short ascenders and descenders, while the Futura family has a smaller x-height, with elongated ascenders and descenders. Wasco determined that the calligraphic proportions would serve to increase both legibility and typographic harmony.

Calligraphy instruction sheet from Paul Standard (circa 1950)

Calligraphy instruction sheet from Paul Standard (circa 1950)

Wasco neatly sums up his ‘calligraphic lineage’: “Dad went to The Cooper Union in the ‘50s. His calligraphy teacher was Paul Standard, who was a friend of Hermann Zapf’s. When I met Hermann, I mentioned Paul – and his face lit up. Many people credit Paul with popularizing calligraphy in America in the ‘50s.” Standard’s calligraphy instruction sheet above is based on a cap to x-height ratio of 7.5 to 5.

Calligraphy by Jim Wasco:  banner on a piano recital invitation (2007)

Calligraphy by Jim Wasco: banner on a piano recital invitation (2007)

Wasco has always favored a ratio of 7:5 for his own calligraphy, and the Harmonia Sans proportion is close to 7:5 as well. Click here to learn more about – and to license – the Harmonia Sans family.


Alyson Kuhn
Alyson Kuhn (a.k.a. Kuhncierge) writes frequently about paper and printing, including typography and postage stamps. On occasion, she teaches envelope-folding workshops. She lives in Carmel, California.


by Ryan Arruda

Here’s a listing of the top 100 most used fonts from the Web Fonts service for September 2013:

Trade Gothic
Neue Helvetica
Avenir Next
Gill Sans
Proxima Nova
Gill Sans Infant
Linotype Univers
Classical Garamond
DIN Next
Century Gothic
ITC Avant Garde Gothic
Courier PS
Museo Sans
VAG Rounded
ITC Franklin Gothic
Harmonia Sans
Univers Next
Neue Frutiger
ITC Legacy Serif
Museo Slab
Swiss 721
Eurostile LT
ITC Lubalin Graph
ITC Caslon No. 224
Motoya Birch
Neo Sans
Trade Gothic Next
Neue Helvetica eText
ITC Century
ITC Legacy Square Serif
Frutiger Next
ITC American Typewriter
Linotype Didot
ITC Conduit
Adobe Garamond
Helvetica World
ITC Officina Serif
Bodoni LT
Humanist 777
ITC Officina Sans
ITC Charter
PMN Caecilia
Droid Sans Mono
ITC Fenice
Soho Gothic
Neue Helvetica Arabic
Adobe Caslon
Bookman Old Style
Linotype Sketch
ITC American Typewriter Hellenic
Monotype News Gothic
Egyptienne F
Sackers Gothic
Linotype Feltpen
Baskerville Classico
ITC Stone Informal
Brandon Grotesque
Rotis Sans Serif
Twentieth Century
Monotype Goudy
Andale Mono
Droid Serif
ITC Eras
C Hei 2 PRC
News Gothic
Neue Haas Grotesk
DIN 1451
M Elle PRC
M Lady PRC
M Stiff Hei PRC
ITC Garamond
Heisei Kaku Gothic
Rotis Semi Sans

Great type makes sites stand out