Elliot Jay Stocks: Tomorrow’s web type today

Let’s face the ugly truth: Typography on the web is still in an awful state. There may be countless positive things to be said about the internet, but fine typography is definitely not among them. In his talk on Friday, Matthew Butterick blamed this on low expectations: While most web developers (excuse the generalization) don’t care about good typography, most web designers have grown up with just a handful of fonts to choose from and still decide to stick to them. Consequently end users are accustomed to seeing bland, standard typefaces.

Photo © Gerhard Kassner

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)

Elliot Jay Stocks is a designer and musician. He is the Co-editor and Creative Director of lifestyle magazine Lagom, the Creative Director of coffee roaster Colonna, and the founder of typography magazine-turned-book 8 Faces. He was previously the Creative Director of Adobe Typekit and his design work, for clients such as Virgin, Microsoft, Brooklyn Beta, and MailChimp, has been showcased in publications such as Communication Arts, Creative Review, Computer Arts, Page, The Independent, .Net, and Design Week. He lives and works in the countryside near Bristol, UK, and creates electronic music by night under the alias ‘Other Form’. (Photo: Norman Posselt)
And that’s it for the quick overview … Elliot’s talk was refreshing and inspiring. He made very clear that web typography is maturing and that it’s time to bring typographic finesse to web pages. Now, would you please excuse me? I need to enable ligatures on my websites.

Further reading: www.elliotjaystocks.com, www.letteringjs.com

Text — Harry Keller