Letter Spacing & Line Height: Web Typography Tips

You can pick the perfect font, set the ideal font size, and choose a beautiful color palette. But if your letter spacing is too tight and your line height is too cramped, the text will feel uncomfortable to read. People will not consciously think "the line height is wrong." They will just leave your page because reading it feels like work.

Letter spacing (also called tracking in design tools) controls the horizontal space between characters. Line height (also called leading) controls the vertical space between lines of text. Together, they determine how dense or airy your text feels, how quickly the eye can move across a line and down to the next one, and ultimately whether people actually read your content or just skim past it.

The Typography Scale Calculator lets you experiment with size ratios and see how letter spacing and line height interact across heading levels. The PX to REM Converter helps you translate font-size values when you tune spacing across breakpoints. These are not tools you set once and forget. Different fonts, different sizes, and different contexts require different values.

Line Height: The Most Impactful Typography Setting

Line height affects readability more than any other typography property. Too little line height and lines of text blur together. Too much and the eye loses its path from the end of one line to the beginning of the next.

The ideal line height depends on font size and line length:

Body text (14px to 18px): A line height of 1.5 to 1.7 works well for most fonts. This means if your font size is 16px, the line height should be 24px to 27px. This gives enough vertical breathing room for comfortable reading.

Headings (24px to 48px): Headings benefit from tighter line height, around 1.1 to 1.3. Large text has more internal whitespace between characters, so the lines do not need as much vertical separation. A heading at 36px with a line height of 1.5 looks disconnected, as if the lines are not part of the same phrase.

Small text (12px to 13px): Small text needs proportionally more line height, around 1.6 to 1.8. At small sizes, the vertical space between lines is the primary visual cue that helps readers track from line to line.

Long lines (80+ characters): Wider text columns need more line height because the eye has to travel farther horizontally before dropping to the next line. A blog post at 700px wide needs more line height than a narrow sidebar at 300px wide.

In CSS, set line height as a unitless number (not px or em): `css body { line-height: 1.6; } h1, h2, h3 { line-height: 1.2; } ` Unitless values scale proportionally with font size, which means your line height stays correct even when the font size changes at different breakpoints.

Letter Spacing: When to Tighten and When to Loosen

Letter spacing adjustments are more subtle than line height changes, but they matter in specific contexts.

Tighten for large headings. Most fonts are designed with letter spacing optimized for body text sizes (14-18px). When you scale them up to 48px or 72px for a hero heading, the space between characters looks proportionally larger than intended. Reducing letter spacing by -0.01em to -0.03em at large sizes makes headings look tighter and more intentional.

`css .hero-title { font-size: 3rem; letter-spacing: -0.02em; } `

Loosen for all-caps text. Uppercase letters have more uniform shapes than lowercase letters, which makes tightly spaced all-caps text harder to read. Adding 0.05em to 0.15em of letter spacing improves readability and gives all-caps text a more refined, professional look.

`css .label { text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.1em; } `

Leave body text alone. For body text at standard sizes, the font's default letter spacing is almost always correct. Type designers spend significant time tuning the spacing of their fonts, and overriding it usually makes things worse. If your body text feels too tight or too loose, the problem is more likely the font choice itself, not the spacing.

The PX to REM Converter helps you convert between px and rem units, which is useful when you are specifying letter spacing values that need to scale with the font size.

Font-Specific Spacing Adjustments

Different fonts have different spacing characteristics, and the same letter spacing or line height value looks very different across fonts.

Sans-serif fonts (Inter, Helvetica, Arial) generally have consistent character widths and built-in spacing that works well out of the box. They need minimal letter spacing adjustments except at very large sizes.

Serif fonts (Georgia, Times New Roman, Garamond) have more variable character widths due to their serifs. They often benefit from slightly looser letter spacing (0.005em to 0.01em) at small sizes because the serifs can make characters feel crowded.

Monospace fonts (Fira Code, JetBrains Mono, Consolas) have fixed-width characters by definition. Adjusting letter spacing on monospace fonts is unusual and can break alignment in code blocks. Leave them at default.

Display fonts (Playfair Display, Oswald, Bebas Neue) are designed specifically for headings and large sizes. Their built-in spacing is optimized for that use case. If you use them for body text (which you should not), the spacing will feel wrong because the font was not designed for that context.

When switching fonts during a redesign, do not carry over the old spacing values. Reset letter spacing to 0 and line height to 1.5 for body text, then adjust from there based on how the new font renders. Each font needs its own tuning.

A live preview lets you type your actual content and compare different fonts and spacing values side by side, which is faster than editing CSS and refreshing the browser repeatedly.

Responsive Typography: Spacing That Adapts to Screen Size

A line height of 1.6 works beautifully on a desktop monitor at 700px content width. On a mobile phone at 350px content width, that same line height might be too generous because the shorter lines do not need as much vertical separation.

Responsive typography adjustments for spacing:

`css / Mobile first / body { font-size: 1rem; line-height: 1.5; letter-spacing: normal; }

h1 { font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.01em; }

/ Desktop / @media (min-width: 768px) { body { font-size: 1.125rem; line-height: 1.6; } h1 { font-size: 3rem; letter-spacing: -0.025em; } } `

The key adjustments between mobile and desktop:

Line height decreases slightly on mobile. Shorter lines need less vertical space between them. Going from 1.6 on desktop to 1.5 on mobile makes text feel more compact without sacrificing readability.

Letter spacing on headings changes with size. A heading at 3rem on desktop needs tighter tracking (-0.025em) than the same heading at 1.75rem on mobile (-0.01em) because the characters are physically larger.

All-caps spacing stays proportional. If you use em units for letter spacing on uppercase text, it scales automatically with the font size. This is one of the reasons em is the preferred unit for letter spacing.

The Typography Scale Calculator can help you find optimal values for both your mobile and desktop breakpoints based on your font size and content width at each size.

Common Typography Mistakes and How to Fix Them

Text walls with no visual breathing room. This happens when line height is set to 1.0 or 1.2 for body text. The lines stack on top of each other and the reader's eye cannot distinguish where one line ends and the next begins. Fix: set body line height to at least 1.5.

Headings that float away from their content. When line height is too high on headings, multi-line headings look like separate phrases rather than a single heading. This is especially noticeable on mobile where headings wrap to 3 or 4 lines. Fix: reduce heading line height to 1.1 to 1.3.

Tracking that fights the font. Adding positive letter spacing to a font that is already loosely spaced creates an airy, disconnected look. Adding negative spacing to an already tight font makes characters collide. Fix: check the font's default spacing first and only adjust in the direction it needs.

Inconsistent spacing across the page. One section has a line height of 1.5, another has 1.8, a sidebar uses 1.4. The page feels visually inconsistent even if no single section looks wrong on its own. Fix: define a typography scale in your CSS custom properties and use it everywhere.

`css :root { --lh-body: 1.6; --lh-heading: 1.2; --lh-small: 1.7; --ls-heading-lg: -0.02em; --ls-caps: 0.08em; } `

Ignoring line length. All the spacing in the world cannot save text that runs 120 characters wide. The optimal line length for readability is 50 to 75 characters. If your lines are longer, increase line height. If they are shorter, you can decrease it slightly.

FAQ

What is the best line height for web body text?

A unitless value between 1.5 and 1.7 works well for most fonts and most content widths. Start with 1.6 and adjust based on the specific font, the line length, and how the text feels when you read a full paragraph. There is no universal perfect number because every font has different internal metrics.

Should I use em or px for letter spacing?

Use em. Letter spacing in em units scales proportionally with the font size, which means your spacing stays correct across different heading levels and responsive breakpoints. A letter spacing of -0.02em means the same proportional adjustment whether the font is 16px or 48px.

Does line height affect SEO?

Not directly. Search engines do not read your CSS line height value. However, poor readability increases bounce rate and decreases time on page, which are user engagement signals that indirectly affect search rankings. Google's Core Web Vitals include CLS (Cumulative Layout Shift), and inconsistent line heights that cause content to reflow during loading can increase CLS scores.

How do I test if my typography spacing is correct?

Read your own content on a real phone, not just a desktop browser resized to a mobile width. The physical distance between your eyes and the screen, the ambient lighting, and the actual display resolution all affect how spacing feels. If you find yourself squinting or losing your place between lines, the spacing needs adjustment.