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