Blog posts on line height and vertical rhythm are all so boring. Let’s get horizontal, instead.
I know very few web designers who ever adjust letterspacing when setting type on the web. Small changes can have an enormous effect on the readabiltity of text. That means it’s hard to make those decisions unless you’re very confident with your knowledge in web typography.
Effectively letterspacing text can make the difference between good typography and great typography. With that in mind, I decided to put together some guidelines for letterspacing type on the web.
When setting type in all uppercase, it’s almost always a good idea to increase the text’s letterspacing from its default value. The spacing built into most fonts isn’t intended for use with uppercase text, so that means you’ll need to loosen tracking manually via CSS.
This usually involves setting a letter-spacing value around 0.2–0.25 ems for headings and a value around 0.05–0.1 ems for acronyms.
See the Pen QbRayd by John D. Jameson (@johndjameson) on CodePen.
In this example, “HTML” and “CSS” are set in small caps, but the same advice applies here, too.
The relationship between font size and letterspacing is pretty straightforward: as size increases, letterspacing decreases, and as size decreases, letterspacing increases.
In more practical terms, here’s what that relationship looks like:
See the Pen aa39c703c30de9f1b65a3c738ad344c2 by John D. Jameson (@johndjameson) on CodePen.
Like with font size, the relationship between font weight and letterspacing follows a simple pattern: as weight increases, letterspacing decreases, and as weight decreases, letterspacing increases.
This is because of the way typefaces at look and feel at certain weights. Light typefaces have an airy aesthetic that’s complemented by open letterspacing, while bold typefaces have a dark and heavy aesthetic that’s complemented by pulling the letters closer together.
See the Pen ba2516c0e03124d5afe2d7f0eefec5fd by John D. Jameson (@johndjameson) on CodePen.
For a more in-depth explanation on how weight affects letterspacing decisions, check out Carolina de Bartolo’s Typography Matters talk over on YouTube.
Light type set on a dark background usually benefits from a small increase in letterspacing.
If you look at the following example, you’ll notice that the white-on-black text appears bolder than the black-on-white text. They’re the exact same size and weight, but the white-on-black text still looks a little bit thicker. To compensate for that difference, you’ll need to make a subtle increase in letterspacing.
See the Pen Value vs. Letterspacing by John D. Jameson (@johndjameson) on CodePen.
CSS supports letter-spacing values in quarter-pixel increments, so I’m able to specify 0.5px in this example. When setting type at a small size, you’ll often find comfortable letterspacing somewhere in between whole pixel values.
This article just scratches the surface of letterspacing type on the web. Once you start combining different elements of typography, you’ll run into situations where its best to work outside these guidelines. For example, how does type set in italics respond to letterspacing? And in what situations does wordspacing come into play?
I’m still figuring out the answers to those questions myself, but if you’d like to start a conversation about web typography, hit me up on Twitter.