When you’re building out a website, you might come across an option to adjust letter spacing in your chosen editor or builder. Letter spacing refers to the horizontal space between the characters in a line of text. This feature is crucial in web design but is often confused with kerning, which deals with the spacing between two individual letters.
Kerning is primarily used in print design, while letter spacing affects an entire sentence or paragraph at once. In this article, I’ll guide you through how to use letter spacing correctly and avoid common mistakes that can damage your website’s readability.
What Is Letter Spacing?
Letter spacing controls the amount of space between the letters of a word or a full line of text. The larger the value, the more space you add between characters, while a smaller (or even negative) value pulls them closer together.
When used effectively, letter spacing can significantly improve readability, but if misused, it can make your text difficult to read and visually unappealing. Let’s look at some practical examples.
Letter Spacing in Body Copy
Body copy, or the main content of your website, benefits from subtle adjustments to letter spacing. One key rule: avoid adding positive letter spacing to body text that’s in lowercase or sentence case. The most appropriate use of letter spacing for body copy is a slight negative value to tighten things up.
Let’s look at an example:
If you have an H2 heading with default letter spacing, the characters may appear slightly too far apart. By adding a small negative letter spacing—say, -0.01em—you can subtly tighten the text and enhance readability without overdoing it. You could even try -0.02em for a tighter look, but anything beyond -0.03em will make the text look too cramped and hard to read.
When it comes to body copy itself, resist the temptation to add positive spacing. Even something like +0.2em can look awkward and disjointed. Instead, if you feel the text is a bit too spaced out, experiment with values like -0.01em. This tightens things up without harming readability.
Customizing Subheadings with Letter Spacing
Subheadings are where letter spacing can shine. I prefer subheadings in all uppercase to distinguish them from the body text, and this is where adding positive letter spacing makes sense.
Start with a small value like +0.1em to spread out the characters, giving the text some breathing room and making it more visually appealing. For a bolder look, you can go up to +0.25em, but I don’t recommend exceeding +0.3em. Once you push the spacing too far, the text can become harder to read, and the gaps between letters may start to resemble the space between words, which muddles the clarity.
Trust Your Eye
The key to getting letter spacing right is understanding that every font behaves differently. A value that works perfectly for one typeface might not look great with another. As a designer, you need to rely on your judgment.
For example, one font’s body copy might look perfect with no adjustments, while another could benefit from some tightening with -0.005em. Always test the appearance by viewing your changes in the actual context of the page to ensure readability and design coherence.
Final Thoughts
Letter spacing is a subtle but powerful tool in web design. Whether tightening up your body copy or giving subheadings more space to stand out, using the right values can make a significant difference. Always test your design choices and remember that less is often more when it comes to these adjustments.
Pay close attention to how your text looks across different sections of your website, and your users will benefit from the improved readability and clean design.
Happy designing!
