Swashbuckling with swashes & other ligatures

This one is for all you typophiles out there. For a long time web-typography was an unsightly, borked mess. Luckily, this changed with wide-spread support for @font-face. But still you couldn't use the fonts you had to their full extent: all the cool OpenType features like small-caps, ligatures, old-style figures and swashes were reserved for those who used these fonts in print. With the CSS property font-feature-settings, that has changed quite a bit.

Here are some examples

Sheffield or Cardiff
Sheffield or Cardiff
We can turn on ligatures (check the ff)
Or enable discretionary ligatures
Stylistic Set Five
Stylistic Set Five
With stylistic set 5 enabled
1/4 + 1/4 equals 1/2
1/4 + 1/4 equals 1/2
Automatic fractions
Lining numerals Old-style numerals
Proportional Tabular Proportional Tabular
14.55 14.55 14.55 14.55
129.11 129.11 129.11 129.11
Old-style and lining numerals in a proportional and tabular variant (see the position of the decimal mark)

Tell me more, tell me more!

The font-feature-settings CSS property gives us access to popular OpenType features. This gives us the power to enable or disable certain font features whenever we need to. To enable old-style numerals we set font-feature-settings: "onum". You can combine multiple features by appending them — eg. if we wanted to use old-style numerals like in the table above, we'd use: font-feature-settings: "onum", "lnum".


This is truly great news for designers and typgraphers alike, who've often seen their work butchered when it was transformed for use on the web. It is especially great if you're working with fonts that have different stylistic swashes. Apart from looking swanky, it also means that you can properly typeset text in a language like Turkish, where you have dotted i's and dotless i's which needs to be preserved when rendering ligatures and small caps.

Great, but can I use it today?

This is by no means a new feature, and with the release of IE10 all major desktop browsers (except Opera) support it.

Show me the source!

Feel free to snoop around the different source files we used for this example (no flash photography please).