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

DISCRETIONARY christmas

DISCRETIONARY christmas

Stylistic Set Five

Stylistic Set Five

1/4 + 1/4 equals 1/2

1/4 + 1/4 equals 1/2

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

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".

Useful?

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).

• The stylesheet