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.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>