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.
In his talk on Saturday he made clear that beautiful web typography is indeed possible and that browser vendors are quickly improving their rendering engines to support OpenType features. At the same time smart web developers are exploring ways to patch and enhance current browsers regarding their typographic abilities.
Before we start the feature run-down, one of these aforementioned tools has to be introduced though: Lettering.js. It is a jQuery plugin which does one seemingly little thing, but has spectacular implications: It wraps every letter (or word) of your text into a <span>, so you get very fine-grained control over the building blocks of your text – with both CSS and Javascript. As an example, you could style individual words and letters differently, or you could even kern specific letters. All of that happens with excellent browser support.
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.
1) Ligatures
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.
3) Swashes
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.
4) Stylesets
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.
Elliot Jay Stocks
Designer and musician, creative director (UK)
Further reading: www.elliotjaystocks.com, www.letteringjs.com
Text — Harry Keller
