In recent years we have seen a huge increase in the capabilities of web typography, from the release of the @font-face feature to the launch of web-font hosting specialists such as Typekit and Fontdeck, among others. We have also seen an exciting increase in web-fonts with OpenType features and increasing support for these across major browsers too, which is the main focus of this article.
OpenType features can be used to enhance web typography in the browser by enabling Ligatures, Numerals and Small Caps, which are the focus of this article.
It’s important to note that support for OpenType fonts and support for OpenType features are two different things. OpenType fonts are supported in more recent versions of all major browsers, whereas support for OpenType features is only available in FireFox v4+, ie 10 preview and Chrome 15+ as of the writing of this (7th August 2013).
There are also two levels of control available in the CSS3 font specification, these are high level support
font-variant and low level support
font-feature-settings, but so far only the low level attribute is supported by the browsers mentioned above, but I will provide samples of both throughout.
OpenType CSS Specifications
There are many different features to implement with the latest specification. I’ll be covering the most common features that I’ve mentioned in previous articles, but the rest are in principle the same.
In samples above you can see the code to activate (common-ligatures/discretionary-ligatures) and to deactivate ligatures (no-common-ligatures/no-discretionary-ligatures).
-moz-font-feature-settings: “liga=1”, “dlig=1”;
-web-kit-font-feature-settings: “liga” on, “dlig”;
-o--font-feature-settings: “liga”, “dlig”;
font-feature-settings: “liga” on, “dlig”;
This would enable standard (lig) and discretionary ligatures (dlig) on your website. At present we still need to rely on vendor prefixes and although Opera at present does not support such features, it is wise to include it anyway for when they eventually do begin to offer support.
To enable small caps on your website you can use the following code.
To enable Old-style numerals use the following code.
To enabling lining figures, use the following code.
To enable tabular figures use the following code.
As previously mentioned there is limited support for these features amongst browsers at present, but it would be smart to set everything in place now, so that when they do become available, you’ll already have everything you need in place.
- Phillip Patterson, 06/08/2013, Numerals, Capitals & Small Caps [ Type & Music ], [online]. Available: http://typeandmusic.com/numerals-capitals-small-caps/ [07/08/2013].
- Phillip Patterson, 03/08/2013, Ligatures [ Type & Music ], [online]. Available: http://typeandmusic.com/ligatures/ [07/08/2013].
- Gustavo Ferreira, 06/05/2012, Typotheque: OpenType features in web browsers — Tests by Gustavo Ferreira [Typotheque type foundry – high quality fonts for print and web], [online]. Available:https://www.typotheque.com/articles/ opentype_features _in_web_browsers_-_tests [07/08/2013].
- Sampo Kaasila, 23/01/2013, OpenType Feature Support Now Possible in Nearly Any Browser « fonts.com blog [ fonts.com blog], [online]. Available:http://blog.fonts.com/2013/01/23/ opentype-feature-support-now-possible-in-nearly-any-browser/ [07/08/2013].