Web Fonts & Enhancements

Yesterday I found myself thoroughly impressed with Laura Kalbag’s effort to ensure the Indie Tech Summit website remains well designed.

Indie Tech Summit web fonts

In the screenshot above you can see the page design before and after web fonts have loaded. This is a superb example of progressive enhancement.

Had web fonts failed to load I wouldn’t have known otherwise. Of course, in comparison the preferred design look so much nicer, but what’s important is that should this not be available, nothing looks noticeably broken.

Laura is able to control the design this way because the web fonts are loaded via JavaScript and CSS has been written to address both scenarios.

Asynchronicity

By themselves web fonts aren’t dependant on JavaScript but many font providers require it to control usage and deter theft. Regardless, given their relatively large download size and our desire for progressive enhancement, I find asynchronous JavaScript loading to be a useful practice.

In my latest portfolio piece I too have taken advantage of web font loading in order to improve the website’s typography:

Uwe Witter typography design

As illustrated in the screenshot above, with Futura PT from Typekit spacing between letters — particularly the “w” and “e” — is uneven and requires manual adjustment. Without JavaScript to load and detect font availability I’d be stuck with bad kerning. In which case I’d rather see the more generic system font.

Usually I’ll strive for simplicity wherever possible. In this case I wish a single @font-face CSS declaration was enough without messing around with JavaScript. Such is life as a front-end developer I suppose. It’s rarely simple but that’s ok. We first understand the problem then we decide the most appropriate solution. If that includes prioritising design integrity, even better.


Follow @dbushell on Twitter
Return to Blog