With cross-browser support for both the
CSS3 @font-face rule and the WOFF font packaging
format, modern Web typography has expanded far beyond the realm of ‘Web-safe
fonts.’ Well-known magazines such as the New
Yorker use Web fonts to preserve the typographic personality of
their headlines, while [US] President Obama’s re-election campaign uses Web font service
Typekit to host their identity font.
One remaining limitation prevents Web designers from using the entire font: the inability
to access the large variety of optional OpenType® features built into many fonts.
These features define glyph substitution and positioning options to support fundamental
typographical features such as kerning, superscript and subscript, contextual letterforms
such as ligatures, numeral styles, access to alternate East Asian glyphs as well
as ornamental swashes.
For instance, an OpenType “stylistic
set” built into Gabriola allows this text:
…to render as:
Recent updates to the CSS3 Fonts module include
a new set of properties to expose these OpenType features within CSS. These
properties can be grouped in two broad categories:
- An explicit mapping of the common OpenType features to specific properties and values.
For example font-kerning:normal applies the kerning pair adjustments encoded within
the font and font-variant-numeric: tabular-nums enables tabular numerals. - The font-feature-settings property enables low-level access to all the OpenType
features supported by a font. It is meant as an ‘escape hatch’ to access to more
advanced features in less common use-cases.
CSS Property: font-feature-settings
Preview 4 of IE10 includes support for the font-feature-settings property. Our earlier
Gabriola example could thus be written:
p#demo {
font-family: Gabriola, cursive;
font-size: 24pt;
-ms-font-feature-settings: "ss06" 1;
}
The -ms-font-feature-settings declaration above turns on a stylistic set supported
by the font (ss06). The property takes either a value of ‘normal’ – no change
in glyph selection or positioning – or a comma-separated list of one or more features.
Each feature combines a four-letter OpenType feature tag and a value. In the example
above, “ss06” is the OpenType feature tag for stylistic set 6. We assign the value
1 to the feature to turn it on.
The OpenType
feature registry defines the list of possible tags (also documented here and standardized by ISO). Here a few of the most popular:
| OpenType tag | Enables |
|---|---|
kern
|
Kerning |
liga
|
Standard ligatures |
dlig
|
Discretionary ligatures |
smcp
|
Small capitals |
subs
|
Subscript |
sups
|
Superscript |
swsh
|
Swashes |
ss01,ss02,…, ss20
|
Stylistic sets 1 to 20 |
For a good illustrated introduction to these features and many others, we recommend
the Layout Features section of the
FontFont OpenType User Guide.
The more common features are on/off switches. Feature values of off or zero turn
the feature off; a value of on or any positive integer activates it. For some features,
an integer value gives access to several options. This is usually the case for swashes
(‘swsh’). If no value is specified for the feature, a value of 1 is assumed.
All the following declarations are thus equivalent for the purpose of our Gabriola
example:
-ms-font-feature-settings: "ss06" 1;
-ms-font-feature-settings: "ss06" on;
-ms-font-feature-settings: "ss06";
Finding Out Supported Features for a Font
Design tools such as Adobe InDesign or Illustrator expose OpenType features through
user-friendly menus and dialogs, word processors such as Word
support them through their font selection dialog and font vendors often
document which features their products support. A future post will discuss using
the browser to detect font features. With more browser access to OpenType features
we expect font hosting services to do more to advertise and document their use as
well.
Browser Support
The font-feature-settings property is currently supported by Firefox 4+ and Internet
Explorer 10, beginning with Preview 4. Note that because Firefox and IE implemented
different versions of the draft the value syntax they accept is different. For example,
enabling kerning in both browsers requires the following:
-ms-font-feature-settings: "kern" 1;
-moz-font-feature-setting: "kern=1";
More information about –moz-font-feature-settings see
-moz-font-feature-settings.
As CSS3 Fonts moves along the standardization track we expect more browsers to add
support for font-feature-setttings as well as the more author-friendly font-variant
properties and values defined in the module.
Also note that the property applies to all font families, whether Web fonts downloaded
through @font-face rules or local fonts referenced by name.
Demos
Our IE Test Drive site includes
advanced OpenType feature demos from Monotype Imaging,
FontFont
and The Font Bureau. They demonstrate the variety of typographic designs available
in modern fonts.
You don’t need any special fonts to try this. Windows 7 includes a number of OpenType-enabled
fonts including Calibri, Cambria, Consolas, Gabriola, and Palatino Linotype. In
the Windows 8 Developer Preview, we added OpenType features to Segoe UI and the
Web-safe fonts Arial, Verdana, Georgia, Times New Roman, Comic Sans and Trebuchet.
We are excited to give Web authors access to all the OpenType features built in Web
fonts and look forward to an even broader range of typographic design on the Web.
—Sylvain Galineau, Program Manager, Internet Explorer