Learn about how letter-spacing affects text legibility, and when and how to increase or decrease letter-spacing in typography with CSS.
Letter-spacing is the horizontal spacing between text characters. Letter spacing, often called tracking in print design, can have a huge influence on legibility. Too much letter spacing makes text hard to read and slows down reading speed. Too little letter spacing also slows down reading speed, and it doesn’t just make it harder to read, it can make text illegible.
Legibility is one’s ability to process and comprehend text. An illegible text is one that is not clear enough to be read comfortably — or at all.
Letterspacing Letterspacing Letterspacing Letterspacing Letterspacing Letterspacing
Only one text element above uses the font’s default letter-spacing value, can you tell which? Regardless, we can all agree that there is such a thing as too little letter-spacing. The last one is what you call illegible text.
Don’t letter-space body text
By default, most typeface designs (fonts) are designed with body text legibility as a top priority, because body text (paragraphs, lists) on average is the most used text element. This means that the built-in letter spacing on the font you’re using has been carefully set by the typeface designer, to be reader-friendly.
Chances are, that the typeface designer knows what makes their specific font the most legible, at small font sizes, from 14px to 24px (which is a common body text font-size range, on the web). Therefore, it’s generally a bad idea to increase or decrease letter spacing on a font, for your body text.
Take the sentiment above as a rule of thumb. There will always be exceptions.
When to letter-space text
I said earlier that typeface designers generally put a lot of effort into letter-spacing their type for body text so that it works great by default. However, some typefaces tend to naturally gain or lose letter spacing at different font sizes or styles (italic, bold, caps, etc.) to an undesirable point.
This is why you sometimes need to manually adjust things like letter-spacing to make a font look just right for your use case.
To be clear: if you’re dealing with a font that is classified as a display type (titles, headings) then it has specifically been designed to work well at bigger font sizes, and won’t necessarily be a good choice for body text.
Typeface designers like Matthew Butterick fall under the category of designers who appear “to think of everything” when it comes to how his fonts perform at a myriad of use-cases. Don’t expect that standard from every font on the market, especially not the free ones (although many are awesome).
Headings
Headings and other commonly big font sizes (relative to body text) often benefit from decreasing letter-spacing a little bit.
What is a big font-size? 24px and up is what I consider big font sizes, but it depends on the typeface design. Some fonts look huge at 24px (e.g. Merriweather), while others look small in comparison (e.g. Alegreya).
If your headings (or any text) are uppercased, then you’ll usually want to increase letter-spacing, as you’ll read about below.
Uppercase
A great example of when increasing letter-spacing almost always improves legibility is when you use ALL CAPS or small-caps (uppercased text).
Uppercase text is harder to read than Sentence case (the most common case type). It’s not helped if there’s hardly any space between letters. The problem is especially common when uppercased text is also bold:
Uppercase with a regular font weight Uppercase with a bold font weight
Let’s add just a bit of letter-spacing to the bolded version:
Tip: The bigger the font size, the easier you can get away with either increasing or decreasing letter-spacing, without hurting legibility. With body text or other small text elements, tread carefully.
Stylistic letter-spacing
Letter-spacing can also be a stylistic choice, which is perfectly fine. You can get away with adding a lot of extra letter-spacing for one-off titles, and sometimes it works great. For example the intro titles for the movie Alien (1979):
This type of intentionally wide letter-spacing can work great for presentational titles but don’t do this on long sentences or paragraphs.
Letter-spacing with CSS
Some use cases call for adjustments, that’s why we have the option to increase or decrease letter spacing in CSS, with the letter-spacing property.
/* Decrease letter spacing */
h1 {
letter-spacing: -0.1em;
}
/* Increase letter spacing */
p {
letter-spacing: 0.1em;
}In responsive typography, it can be a good idea to use relative sizing units like em or rem, instead of the traditional pixel unit, which works best for absolute sizes (non-responsive typography). It depends on your project.
CSS utility classes for letter-spacing
If you’re working on a complex web UI with many moving parts, it can be useful to have a handful of pre-made CSS utility classes for letter-spacing that help enforcing consistency in your UI. Then whenever a text element calls for it, you can pick a tracking utility from your tracking scale (just like a type scale or spacing scale) that ranges from tight to wide letter-spacing:
.tracking-tighter {
letter-spacing: -0.05em;
}
.tracking-tight {
letter-spacing: -0.025em;
}
.tracking-normal {
letter-spacing: 0;
}
.tracking-wide {
letter-spacing: 0.025em;
}
.tracking-wider {
letter-spacing: 0.05em;
}
.tracking-widest {
letter-spacing: 0.1em;
}The utilities above are from the CSS framework Tailwind which is one of the only CSS frameworks that has excellent typography utilities out of the box.
Note: the letter-spacing utilities above are based on a general tracking scale. You might need to adjust some values for your own projects, but it’s a great starting point, and much better than picking arbitrary letter-spacing on the fly.
Key takeaways
- Trust the default settings of your typeface of choice, and only adjust letter-spacing when something visibly looks off.
- Don’t mess with letter-spacing on body text or other small text elements — unless you know what you’re doing.
- Big font sizes sometimes benefit from decreasing letter-spacing a bit.
- Uppercased (all caps) text often needs more letter-spacing than the defaults.
- Use a tracking scale to enforce consistent letter-spacing in your projects.
- When in doubt, don’t touch letter-spacing.
If reading a text makes your eyes squint, or causes you to pause, chances are that you need to take action.
