Guidelines for Letterspacing Type

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 readability 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.

Capital letters

It’s almost always a good idea to increase letterspacing with uppercase type. Default spacing between uppercase letters is designed to be the minimum necessary, so you’ll usually want to add a little more breathing room between the characters.

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.

In this example, “HTML” and “CSS” are set in small caps, but the same advice applies here, too.

Font size

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:

• Large text (e.g., titles and headings) should have decreased letterspacing.
• Body text should have default tracking, or stick very close to default letterspacing.
• Very small text should have increased letterspacing.

Font weight

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.

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-on-dark text

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.

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.

There’s always more to learn

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.