When you’re building a website and adding text to a page, one often-overlooked detail is letter spacing. This simple adjustment can have a significant impact on the readability and aesthetics of your design.
In this issue, I’ll guide you through the details of letter spacing, how to apply it effectively, and what to avoid.
Understanding Letter Spacing
So what exactly is letter spacing? Letter spacing refers to the horizontal space between characters in a line of text. It’s important not to confuse letter spacing with kerning. While kerning adjusts the space between two specific letters, letter spacing controls the spacing across an entire sentence or paragraph.
This distinction is crucial, especially since kerning is more commonly used in print design, whereas letter spacing plays a larger role in web design.
Why Letter Spacing Matters
Proper letter spacing can improve the readability of your text, making it easier for users to digest your content. However, incorrect spacing can have the opposite effect, making your text hard to read and visually unappealing.
Let’s break down how to use letter spacing effectively across different types of text.
Body Copy
For body copy—any text that isn’t in all caps—avoid adding positive letter spacing. Instead, consider tightening up the text with a slight negative letter spacing.
For example, if your default letter spacing feels too wide, try reducing it by a small increment, starting around -0.01em. This subtle adjustment can make the text feel more cohesive without sacrificing readability.
Headings
Headings, especially those in larger fonts, can benefit from slight negative letter spacing. For instance, an H2 heading might look more polished with -0.02em letter spacing. But be cautious—going too far can make the text look cramped. A good rule of thumb is to avoid exceeding -0.03em letter spacing for headings.
Subheadings
Subheadings are where positive letter spacing can shine, particularly if they’re in all caps. Start with 0.1em and adjust from there. A range of 0.2em to 0.25em often strikes the right balance between legibility and visual impact.
Just be sure not to exceed 0.3em, as this can make the text harder to read and disrupt the overall flow of your design.
Treat all text properly
Letter spacing is a small but powerful tool in your web design toolkit you shouldn’t ignore. By paying attention to it, you can help enhance the readability and overall look of your site’s design.
As you work on your next project, or take a look at your own site, try adjusting the letter spacing with the rules above and see how it transforms your design in the smallest ways.
Remember — good design is always in the details!
Thanks for reading,
