ComicSans.conf, or: fonts have settings too
Here’s something that should rustle your developer-jimmies: using a technology and leaving all its settings on default. Squirm in horror as a web server runs on default settings… without caching, gzip or HTTP/2! Squeal in terror at default Bootstrap… when only the button styles are used! Shriek in shock when seeing a hero image… as the original 14MB file supplied by the photographer!
The horror of default settings
Us developers like to be in control. We don’t blindly use the default settings because we’re afraid of suboptimal performance. Crappy stuff might be left turned on, and cool stuff might be turned off.
We tweak the hell out of our servers, frameworks and tools. So why don’t we do that for our webfonts?
This is your font on default settings
Left on its default settings, a webfont will solemnly do its job. It lets your browser paint letters on the screen in a certain typeface, and that’s about it.
But fonts can have lots of clever options to make text more readable. Visual enhancements based on 400 years of accumulated typographic expertise, or insights we gained since we started showing text on light emitting rectangles.
These options are the OpenType features.
One feature you likely have heard of is kerning. It makes sure the algorithm that paints letters next to each other doesn’t dumbly treat them like boxes, but takes the letter shape in consideration. It moves the A, V and A snuggly close to each other in the word AVATAR.
Other typographic switches you can flick
That’s not all — there are over 140 OpenType features! Here are a few:
- Ligatures, to fix awkward letter combinations
- Small caps, to make abbreviations look good
- Alternates, different versions of the same character
- Tabular figures, to neatly align columns of numbers
You don’t even have to care about typography. These are just some simple settings you can turn on, and text will look better. What’s not to like?
Where do these settings come from?
These extra’s don’t just fall from the sky. Type designers deliberately and meticulously put in the kerning data, ligatures, or even alternate sets of all characters in a different style, like small caps. These aren’t required for the font to work, and it’s their decision to add these extra options.
This means not all fonts have these features. Some fonts stick to the basics, others get stripped of their features to save a handful of kilobytes.
Time for the browser support talk
If we have a font with OpenType features, how do we turn these on in our CSS? “In a complicated manner based on ever changing specs and wildly different implementations by all the various browsers,” I’d say when I would be in a grumpy mood.
But I’m not! So I say: a good starting point is Utility OpenType, a tiny, cross-browser and gracefully degradating dash of CSS that takes care of everything.
Need ligatures? Done.
<p class="liga">Difficult and iffy</p>
Small caps? Piece of piss.
<p>I love <span class="smcp">SVG</span> images</p>
Under the hood it uses font-feature-settings, which is supported pretty well, and the more flexible font-variant-* which has less support.
Believe the hype: configure your type
You might already use fonts with all kinds of cool features, but haven’t enabled them yet. Or you decided to strip them or turn them off in services like Typekit, in fear of a few extra kilobytes. If you don’t care about typography very much, that’s fine. But if you dig clean type and nice design, try some of the configuration options fonts offer. You might end up with a more beautiful and better readable website!
But you were kidding about Comic Sans, right?
Yes. Comic Sans has no typographic features whatsoever.