In 2010 the dawn of webfonts happened and a lot of people expected the quality of web typography to rise quickly. Unfortunately, looking at large scale websites not much has changed in these two years and Verdana, Arial and Georgia are still everywhere. It feels like the dramatic OpenType advancements in print publishing have not affected the web yet. Although, from a technical standpoint that is not entirely the case … here comes Elliot Jay Stocks to open our eyes.
Having said that, we can take a look at several typographic subtleties and how they can be implemented on the web. Elliot has written fantastic blog posts on each of these in case you want to know more.
Ligatures have always been the one obvious detail to distinguish carefully typeset text and a hastily composed pile of letters. Surprisingly, ligatures have very good browser support and can be easily turned on in modern browsers – they are even enabled by default in recent Chrome as well as Firefox. In fact, we are only talking about a couple of lines of CSS to be future-proof and enable ligatures for supported browsers.
What needs to be kept in mind here is that not all web fonts come with ligatures, so you better choose one that does. Elliot’s article on ligatures with examples and the necessary CSS.
2) Small Caps and Old Style Numerals
Small caps have a long history to get faked with smaller font-size in combination with uppercase text-transform. That deception is easy to spot though, because false small caps appear much thinner than the surrounding text. While native support is coming to browsers a lot of webfonts don’t bring the necessary glyphs. Some web font foundries therefore offer seperate font files for these features – you would then assign that second font to the appropriate parts of your text. Detailed information can be found in Elliot’s article on his blog.
Firefox is the only browser with a proper implementation of swashes, so the way to go is patching support with a different font declaration. The tricky part is that we probably are in a vicious circle here: Browser support is practically not available, so very few web fonts come with swashes. Which might again be the reason why the topic does not have priority for browser vendors. More information and examples with swashes in use over at Elliot’s blog.
This one is about stylistic alternates, but sadly in this case browser support is in its infancy. There is a proposed CSS syntax, but only Firefox and the latest Chrome on Windows have it implemented. So while it is good to keep an eye on stylesets, this shouldn’t give you sleepless nights.
As always, Elliot has the inside scoop.
Designer and musician, creative director (UK)
Text — Harry Keller