Typography for Developers
Type is really important, but often goes forgotten amongst all the other design considerations that go into a product. It seems that 99% of websites nowadays employ the following typographic process:
Let’s use Open Sans.
There’s obviously nothing inherently wrong with Open Sans (it’s actually quite good), but typography is about much more than just choosing a font — CSS comes pre-loaded with a bunch of default typographic settings, but these defaults are only acceptable for a handful of fonts at a handful of sizes.
Most text will look terrible under default settings, so we need to be a lot more deliberate about typography.
Typography isn’t an exact science, despite what many golden ratio enthusiasts might try to tell you, and so it requires a bit of intuition and a lot of trial and improvement in order to get right. This is intended as a practical guide to web typography for developers who want to make their products and projects more usable (and more beautiful).
Choosing a typeface
This is very subjective, and of varying importance depending on what exactly your product does. Every font has a “personality” and you should choose one that you feel sets the right tone for your product.
Sure — for most side projects you can safely go with Open Sans or Lato, but if you’re building something for commercial use, or if you want to stand out from the crowd, then I’d recommend going for something a bit more personal, at least for the heading font.
Typewolf is a great resource for discovering nice font combinations:
Spacing
This is the most important yet most neglected part of typography on the web. Improperly spaced text can undo all the hours of hard work that you put into choosing Open Sans, since most people would rather read well-formatted Times New Roman than poorly formatted latest-trendy-startup-font.
Line Spacing — the default line spacing is almost always too tight. You can set line spacing in CSS using the line-height property. It’s best to set it as a “multiplier” — somewhere between 1.2 and 1.5 is usually pretty good for paragraph text.
Most people forget to set line spacing on headings because they only span one line on a laptop screen, but lots of headings end up spilling over onto multiple lines on mobile screens so it’s important to bear this in mind.
Letter Spacing — this one seems to be a very well-kept secret but can actually make a lot of difference, especially for headings and large size text. You’ll almost always want to reduce the letter spacing, which you can do in CSS using the letter-spacing property. A tiny amount should usually do the trick — use -0.01em as a starting point and fiddle around until it looks good.
Line Length — try to keep lines of a reasonable length. It’s unpleasant to have to move your eyes from side to side to read text, so somewhere between 60 and 70 characters per line is usually good. A lot of people actually prefer Wikipedia’s mobile site to their desktop site for this very reason.
True Bold/Italics
One of the features that separates good fonts from bad ones is whether they have true bold and italic versions. Making a font bold isn’t as simple as adding an outline to the letters, and making it italic isn’t as simple as slanting the letters a bit — good fonts have good custom bold and italic variants.
Make sure that your fonts have true bold and italic variants, otherwise the browser will try and simulate bold and italics on its own, which looks really bad:
Font Smoothing
There’s a nifty little CSS property in Webkit browsers called -webkit-font-smoothing which controls how fonts are anti-aliased. The default setting is subpixel-antialiased, but it’s worth seeing what your type looks like when it’s set to just antialiased. It can improve the way many fonts look, especially for headings and larger font sizes, but the tradeoff is that it ends up lowering contrast which can affect readability.
A lot of sites have started using this, but you should use with caution — Amazon have jumped on the “super thin antialiased font” bandwagon in their new design rollout, and it’s made it a lot harder to read things:
Before:
After:
Windows vs OSX
Microsoft and Apple have chosen to go in very different directions when it comes to rendering text. Predictably, Microsoft prioritises readability, sometimes at the cost of “looking nice”, while Apple does the opposite. If you’re interested in the details, take a look at this piece from Adobe Typekit which explains what’s going on behind the scenes.
All you really need to know is that fonts look quite different for Windows users than they do for Mac users, so you should check how your typography looks on both operating systems:
Paid vs free fonts
There are now a tonne of different font services online. Google Web Fonts is by far the most popular, mainly because it’s free. The selection on there is okay — there are a few good fonts and a lot of mediocre ones. It’s good enough for most projects, but if you’re serious about creating a brand for your product then you should definitely pay for your fonts — you’ll get nicer looking fonts with a lot more different weights and variants.
The best way to get fonts is via web font services, which are like Netflix for fonts — you pay a monthly/annual fee and you can have whichever fonts you want. Here are some good web font services:
I hope you found this useful. I’d love to hear your thoughts — please do comment below or tweet me @TaimurAbdaal, and if you’re interested, check out some of the stuff I’m working on: www.taimur.me.
