A beautiful font can still make a page exhausting to read. Sometimes the typeface is not the problem: lines sit too close together, or characters are spaced so widely that familiar words become harder to recognize. Line height and letter spacing are small typographic controls with a surprisingly large effect on reading comfort.
Line Height and Letter Spacing Do Different Jobs
Line height controls the vertical rhythm
Line height, sometimes called leading or line spacing, describes the height of a line box. In ordinary horizontal text, it affects the distance between successive lines. At a 16-pixel font size, a line-height value of 1.5 produces a 24-pixel line box. A value of 1.2 produces only 19.2 pixels.
More leading helps separate adjacent lines, especially in longer paragraphs. Too little makes a page look crowded and can make it difficult to find the next line. Too much breaks the visual connection between lines that belong to the same sentence.
Letter spacing adjusts the space within words
Letter spacing, also called tracking, changes the distance between characters. It is different from word spacing and from kerning, which adjusts particular character pairs. A little extra tracking may improve an uppercase label, but heavy tracking can disrupt familiar word shapes. Negative tracking may make letters collide.
Leading and tracking are therefore not interchangeable. When readers lose their place between lines, check vertical spacing. When individual letters appear crowded or oddly disconnected, examine character spacing and the font itself.
What Settings Work for Body Text?
For most online articles, a line height around 1.5 to 1.7 times the font size is a useful starting point. It is not a universal formula. Different fonts, sizes, column widths, and scripts need different treatment. MDN recommends at least 1.5 for main paragraph text, and unitless CSS line-height values adapt naturally when the font size changes.
Consider 16-pixel body copy. A line height of 1.5 gives a 24-pixel line box; 1.6 gives 25.6 pixels. The numerical difference looks small but becomes noticeable through several paragraphs. Compare real article text at both settings rather than judging a single headline or sample sentence.
For ordinary mixed-case body copy, start with the font’s default letter spacing. Well-designed reading fonts already have carefully considered proportions. If a particular font looks cramped, try a subtle adjustment such as 0.01em and compare it against the original. No single tracking value makes every font easier to read.
Avoid reducing tracking simply to fit more words in a narrow card. If text overflows, adjusting the column, font size, or wording is usually safer than squeezing letters together. A related guide to choosing readable fonts can also help identify when the typeface, rather than its spacing, needs changing.
Headings Need Their Own Spacing Rules
Large headings can often use tighter line spacing than paragraphs. A two-line display heading may look balanced with line height near 1.1 to 1.3, depending on its font. Apply that setting to a long paragraph, however, and the lines are likely to feel cramped. Check that tall and descending letters never overlap between lines.
Letter spacing also depends on how the heading is written. Short, all-capitals labels sometimes benefit from modest positive tracking. Sentence-case headings usually need less. Excessive spacing can create awkward wrapping, particularly in mobile navigation or narrow sidebar headings.
Separate sections primarily with a clear size hierarchy and appropriate space around headings. Do not rely on extreme tracking to make every heading distinctive. A typography hierarchy guide is a useful companion when deciding how titles, subheadings, and body copy should relate.
Try a Real Before-and-After Test
Imagine a blog article in a 16-pixel sans-serif font, displayed in a fairly wide reading column. Its paragraphs use line height 1.2 and slight negative letter spacing. The opening sentence looks compact, but by the fourth paragraph the lines seem crowded and words appear to run together.
First, restore tracking to the font default. Next, raise line height to 1.55, making the line box 24.8 pixels high. Read three complete paragraphs. If the page feels calmer, the improvement probably came from making neighboring lines easier to distinguish, not from adding decorative space.
Then narrow the browser to a phone-sized width. Shorter lines create more frequent returns to the left edge, and headings wrap differently. Check whether the paragraph still reads smoothly and whether buttons or labels remain intact. Change only one variable at a time; otherwise you cannot tell which adjustment helped.
Accessibility: Comfortable Defaults Are Not the Whole Story
WCAG 2.2 Success Criterion 1.4.12 addresses user-adjusted text spacing. Content must remain usable without losing information or functionality when spacing is overridden to specified levels. These include line height of at least 1.5 times the font size and letter spacing of at least 0.12 times the font size, alongside increased paragraph and word spacing.
These figures are not mandatory default design settings. The requirement is that users can apply the adjustments without content being clipped, overlapped, or hidden. A fixed-height button, for example, can fail this test if its text expands beyond the available space. Flexible containers are more resilient.
Language matters too. Scripts with connected letters, including Arabic, cannot always be handled like English. Positive tracking may interfere with how letters join. Test typography in the actual language rather than applying a single character-spacing rule to an entire multilingual site. An accessible typography checklist can support that review.
Mistakes That Make Text Harder to Read
One common mistake is using generous line height to compensate for an overly wide paragraph. Extra leading may help, but long lines can still make it difficult to return to the correct position. Review the reading column and text size together.
Another is confusing paragraph spacing with line height. Leading controls the lines inside one paragraph; paragraph spacing separates blocks of thought. Both are useful, but increasing one does not automatically solve a problem with the other.
Frequently Asked Questions
What is the best line height for website text?
Around 1.5 to 1.7 is a practical starting range for many body-text layouts. Test your actual font and column width before deciding. Large headings generally need tighter spacing.
Does increasing letter spacing always improve readability?
No. Default tracking often works well for paragraphs, while modest extra spacing may suit some uppercase labels. Large positive or negative values can make words harder to recognize.
Is line height the same as paragraph spacing?
No. Line height affects successive lines within a paragraph. Paragraph spacing separates one paragraph from another. They create different kinds of visual rhythm.
Does WCAG require every page to use 1.5 line height?
No. The text-spacing criterion requires content to tolerate specified user overrides without losing content or functionality. Comfortable default settings are important, but they are not the same as that requirement.
Make Spacing Serve the Reading
Start with comfortable paragraph leading, keep body-text tracking close to the font’s intended spacing, and evaluate headings separately. Then test real content on smaller screens and with accessibility adjustments. Effective line height and letter spacing should be almost invisible: readers notice the message, not the effort required to follow it.