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 Fonts.com 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:
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 Fonts.com 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.
Here’s a quick how-to for using these new capabilities
Applying kerning or OpenType features to a CSS selector
Applying kerning, tracking and OpenType features to targeted text
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.