Most of the information we consume occurs through reading, so it makes perfect sense to pay attention to words when designing. There are many aspects of typography, but one of the things that helped improve the quality of my design was the letter spacing.
Letter spacing is all about adding and removing spaces between letters. Some people confuse it with kerning, but these two are different; letter spacing affects the entire line of text, while kerning adjusts the space between two individual letters at once. Kerning is best left to the type designers, plus, unlike letter spacing, there is currently no way to control kerning in CSS.
I think practice and a lot of observation will also change the way you deal with letter spacing in your work.
The purpose of letter spacing
The main purpose of letter spacing is to improve the readability and readability of the text. Words act differently based on their size, color, and the background they’re in. By adjusting the letter spacing to the environment you are working with, you will help readers consume your information faster and more efficiently. The fun part is that they won’t even notice it, that’s the point of the job.
Keep in mind that typographers think about letter spacing and kerning when designing a typeface. It means you don’t have to apply it to all of your text, but to understand it when necessary, you need to know some basic principles and use good typefaces.
How letter-spacing affects readability and readability
The readability and readability of your text depends on factors such as line height, paragraph length, font size, choice of typeface, letter spacing, and much more. As for letter spacing, if you are just starting out in typography, the best thing you can do is not overuse it. What I mean by that is just don’t make the distance between letters too big or too small; even if you think it looks good, people will have a hard time reading it and that will ruin your experience.
Uppercase with letter spacing
Capital letters are designed to appear at the beginning of a sentence or proper noun, in combination with lower case letters. When capital letters are next to each other, the space between them is too narrow. Therefore, to achieve better readability, it is necessary to increase the space. This applies to both large and small font sizes.
Headlines with space between letters
If you are using well-designed fonts, you can be sure that they are well-calibrated and you will not have to make any major adjustments to them. However, the problem with headlines is that at larger scales, the letter spacing appears unbalanced. This can be solved by increasing or decreasing the letter-spacing value.
There are no hard and fast rules for letter spacing, there are many fonts and they all require an individual approach, but if you look at how big companies like Google and Apple treat their fonts, you can find a lot of valuable information there.
Let’s take a look at the “Roboto” and “San Francisco” fonts (the former is used in Material Design and the latter in the Apple ecosystem). Titles from 20 to 48 pixels have a positive or no letter-spacing value. If the font size is larger, the letter spacing becomes negative. These exact numbers will not work as well for other typefaces, but after trying different approaches I can state that it is a common pattern.
I have tried several guidelines for letter spacing and the one published by the Bazen agency works with many popular typefaces. It will be a good starting point for you, but you can always apply additional settings:
- H1 — 96px — -1.5%
- H2 — 60px — -0.5%
- H3 — 48px — 0%
- H4 — 34px — 0.25%
- H5 — 24px — 0%
- H6 — 20px — 0.15%
- Subtitle — 16px — 0.15%
Body text with space between letters
If you’ve ever read about letter spacing, you’ve probably seen this popular wisdom from typographer Frederic Goudy: “Anyone who used lowercase letter-spacing would steal sheep.” (There is an argument that it was only referring to black letter fonts.) Some designers took it as a strict rule and now never set letter spacing in lowercase text.
Based on my practice and looking at the work of designers, I cannot agree with Goudy, because sometimes small changes can make a big difference to the performance of your text. Take, for example, condensed fonts. At a small size, the letters are too close to each other, which leads to poor readability. By increasing the letter spacing by 1.5%, you will see that the text is now easier to read.
If we look at my example above, in the guidelines for “Roboto” and “San Francisco” typefaces, the letter spacing is applied to the body text; even though San Francisco has a dedicated “SF Pro Display” for headlines and “SF Pro Text” for body text, letter spacing is still used to refine them.
There are many different typefaces and one rule does not apply to all. Experiment with letter spacing and do what feels right for you. There are a few simple guidelines that will guide you in the right direction, especially when working with body text:
PLEASE NOTE THE LINE HEIGHT
If you have a line-height greater than 120%, the negative letter-spacing will most likely result in an unbalanced appearance of the paragraph. To refine it, you would need to keep it at 0% or just increase it slightly.
CLEAR TEXT ON DARK BACKGROUND
On a dark background, white text is overexposed and therefore the letters appear too tight. To make it more readable, I suggest increasing the letter spacing a bit.
GENERAL VALUES OF THE BODY TEXT
You can use the following guidelines for body text, which I have tested with various fonts:
- Body 1 — 16px — 0.5%
- Body 2 — 14px — 0.25%
Unlike headings and body text, smaller font sizes don’t have much variation in letter spacing. It is common practice when font size is less than 13 px to increase the spacing between letters to make it legible. But there are always exceptions (the “SF Pro Text” guidelines suggest using positive letter spacing only when the font size is 11 px or less). Be sure to experiment with the settings.
You can use the following values as a starting point and then edit them as appropriate for the font you choose:
- Caption — 12px — 0.5%
- Overline — 10px — 1.5%
One of the things that helped me improve my typography skills was looking at other designers and especially type foundries. When decoding their work, you may notice some nuances in how they treat typography and it will help you in future projects.