Nowadays, we get most of our information through reading. Therefore, it only makes sense to pay attention to words so people can understand it much more effectively. Although typography has many aspects, letter spacing is something that plays a major role in a text’s readability.
Letter-spacing involves adding or removing space between letters. While it’s easy to confuse with kerning, there is a major difference. Kerning is responsible for the space between two individual letters, whereas letter spacing affects the entire line of text.
Where optimizing kerning is out of the question for a web designer, line spacing is something we can manage through CSS. In this article, we will discuss tips to optimize line spacing for better design.
Letter-Spacing Capital Letters
Capital letters are used mostly at the beginning of proper nouns, sentences, or with a combination of lowercase letters. For this reason, when these letters are besides each other, their spacing is too constricted. To attain better readability, it’s better to increase this space, regardless of font sizes.
Letter-Spacing Headlines
Most headline fonts are carefully designed to make them readable. However, as we increase the size of these headlines the space between letters enlarges exponentially and they often look unbalanced. We can fix these issues by modifying the letter-spacing value.
If you are uncertain about how you should modify change line spacing, you can always use default values provided by Apple and Material Design as a reference for certain typefaces. Doing so can save you a lot of time.
Letter-Spacing Body Text
There’s a common perception among designers that modifying the letter spacing of lowercase letters is a sin. However, this doesn’t apply to all typefaces. This is why it’s best to experiment with different typefaces and use a letter-spacing value that makes your body text readable. Here are some things you can use to optimize design for body text.
Line-Height
When you have a line-height more than 120%, using negative letter-spacing will make the letter spacing appear unbalanced. To make it seem balanced and optimized, it’s best to either increase it slightly or keep it at 0%.
Color Contrast
Contrast is something that always catches our eyes. This is why, it’s better to leverage contrast to make text readable.
You can use white text on a dark background, but that can seem overexposed and make letters feel tight. Instead you can increase the letter-spacing a small amount.
Use General Values
For body text use these guidelines.
- Body 1 — 16px — 0.5%
- Body 2 — 14px — 0.25%