On web typography

Typography - it’s at the heart of the web experience but with so many different options available it’s sometimes hard to know where to start when designing. Font stacking, embedding or webfonts? And what’s more important, brand or user experience? And what does this all mean for the designer who just wants to try and make type look great across as many devices as possible without losing their mind?

Some (very concise) context

To over-simplify it, the visual end of the internet is essentially text and images on a page with a little wizardry to hold it all together. Various techniques have been employed over the years to control their appearance, but designers usually had a pretty good idea of what users would see the other end. Choices were definitely limited, but you could be fairly certain that between system fonts, text as images and workarounds such as sIFR, type would render at the right size, headers would break in the right places and users would be happy. As connection speeds increased and hosted web fonts appeared we were a happy bunch - font suitcases were open for use, and use them we did. No longer did we suffer the ‘web alternative’, we just went ahead and used what we wanted - a beautiful typographic experience for all...

But then came the mobile internet and responsive websites. Suddenly all those lovingly crafted headers fell apart and often looked terrible on the small screen. Endless design comps at various sizes appeared to reassure everyone that yes, that obscure Android 343 x 629 mobile resolution would be ‘covered’. Probably. And then the question of speed - we quickly realised that downloading a nice big font file and waiting for it to render was not the optimal mobile browsing experience. There have been plenty of recent advances to help address these issues, but with the increasing shift toward mobile access we are left in somewhat of a quandary - all the choices available to us have pros and cons and it’s difficult to know which is best and when.

Fingers crossed

Unfortunately, knowing how type will appear for the huge volume of devices available is impossible - there is a real element of ‘best guess’ when designing, but we do have a few tricks up our sleeves to help.

Tools such as the excellent Typecast and Google Chrome’s Device Mode help prototype fonts and simulation across multiple devices, but nothing can replace experiencing firsthand how something ‘feels’. We talk about ‘experience’ and it’s important to remember that often the product of our hard work is used in many different circumstances and conditions that a flat design will not give you a full appreciation for. I recently handed a mobile type prototype to one of our clients and their reaction was priceless, it felt like the moment the project really came to life for them, they ‘got it’ - really satisfying for everyone involved.

Luckily at Clearleft we have our very own device lab - with an ever growing number of devices on which to test, we can hedge our bets that the resolutions in between will be covered. Probably. Incidentally, if you’re wondering what your site looks like on anything from a Nokia N96 to a Amazon Kindle Fire (and you really should) our device lab is open and free to use - please drop by.

Form made easy

Typography on the web is currently in a great place - we have access to a huge range of fonts and multiple ways in which to use them. Be it self-hosting or using one of the many online hosting services available, a little bit of web magic is often all that’s required to display beautiful typography on a site. Services such as Adobe’s Typekit have made this process even easier, and integration into the Creative Cloud applications has meant we can experiment with fonts at the design stage before committing to a hosting license. I’ve always been keen to pull together a number of font options when working on a project and it’s liberating not to feel constrained in selection before you’ve even started.

Function over form

However, with the wealth of web font options available, it’s all too easy to spend time agonising over the ‘perfect font’ for a project without necessarily asking the right questions first. I’m certainly guilty of feeling the draw of a beautiful typeface and ‘making it work’, only to suffer from the choice during implementation (read, being scowled at by a friendly developer). A couple of recent Clearleft projects with a heavy mobile focus raised the question of whether webfonts (and the brand expression they provide) were the right choice over system fonts that will load more quickly and easily. Unfortunately system font choices are limited and all too often overlooked, but a carefully chosen font stack is a design decision, and can provide a good alternative to hosted fonts. It’s certainly worth considering the options available - sites such as CSS Font Stack provide a valuable breakdown of system font penetration and a good refresher of of what’s on offer. Lately I’ve been reminded of these, and have been prompted to reconsider my position on using some of the more ‘classic’ fonts on occasion.

(Don’t) Sweat the details

So where does all of this leave us? What can we do to ensure great typography for everyone and still get a project out of the door? The shear volume of typographic variations on digital devices alone makes this an impossible task, and agonising over the tiny details when you have limited control over the final output is not going to win any time or budget points. Now I’m not suggesting we all ditch the beautiful and very successful options available to us and run back to the safety of Times New Roman - as a designer this is against my very sensibility. But perhaps before getting too giddy over the latest humanist sans consider the application first and what the intended outcome is - do you need a font with all the bells and opentype whistles? How will any hosting affect the experience, and just when might you need to use an interrobang anyway‽