Two pixels of letter spacing can be the difference between text that reads smoothly and text that drives people away. So what is font spacing, exactly?
It’s the collection of adjustments that control distance between characters, words, and lines in any block of text. Whether you’re working in CSS, Figma, or Adobe InDesign, spacing decisions shape how readers experience every word on the page.
This guide breaks down the types of font spacing, how each one works in code and design tools, where accessibility standards draw the line, and how to avoid the mistakes that quietly wreck readability. Practical values included, not just theory.
What Is Font Spacing
Font spacing is the controlled adjustment of distance between characters, words, and lines within a block of text. It covers horizontal gaps between individual letters, the breathing room between whole words, and the vertical distance from one line of text to the next.
Not a single CSS property. Not one slider in Figma. It’s actually a collection of settings that work together to determine how text feels on screen or in print.
The global font and typeface market was valued at roughly $1.14 billion in 2024, according to Data Horizon Research. That number alone tells you how much weight businesses put on getting text right.
And a huge chunk of “getting text right” comes down to spacing. A font can be beautifully drawn, but if the spacing is off, readability drops fast. Your eye stumbles. You lose the reader before they finish the first paragraph.
Font spacing lives in CSS properties like letter-spacing, word-spacing, and line-height. It lives in the tracking and kerning panels inside Adobe Illustrator and InDesign. It even lives in the basic character spacing dialog in Microsoft Word.
Where it really matters, though, is in how your audience processes what you’ve written. Spacing determines whether someone reads comfortably or gives up after two sentences.
Types of Font Spacing
Four types of spacing fall under this umbrella. Each one controls a different dimension of how text appears and how easily it can be read.
| Spacing Type | What It Controls | Common Tool/Property |
|---|---|---|
| Letter spacing (tracking) | Uniform space between all characters | CSS letter-spacing |
| Kerning | Space between specific character pairs | CSS font-kerning |
| Word spacing | Distance between individual words | CSS word-spacing |
| Line spacing (leading) | Vertical distance between baselines | CSS line-height |
These four types interact with each other constantly. Tighten letter spacing without adjusting line height, and you’ll create a dense, claustrophobic block of text. Widen word spacing while leaving letter spacing tight, and individual words start floating apart from each other while their internal characters stay crammed together.
Good typography means balancing all four at once.
Letter Spacing vs. Kerning
This is the most common mix-up. Took me a while to internalize the difference too, honestly.
Letter spacing (also called tracking) applies a uniform adjustment across every character in a text block. If you set letter-spacing: 2px, every single gap between every pair of letters gets 2 extra pixels. No exceptions.
Kerning is pair-specific. It adjusts the space between two particular characters that look awkward next to each other. The classic example is “AV” or “To,” where the natural bounding boxes leave too much visual whitespace. Most professional fonts ship with built-in kerning tables that handle this automatically.
In CSS, these are two separate properties. letter-spacing controls tracking globally. font-kerning toggles whether the browser uses the font’s built-in kerning data (values: auto, normal, none).
When do you adjust one versus the other? Almost always, leave kerning to the font designer. Adjust letter spacing when you need a specific visual effect, like looser uppercase headings or tighter body text on a compact layout.
How Font Spacing Works in CSS
Four CSS properties handle the bulk of font spacing on the web. Each one targets a different layer of the text layout.
letter-spacing adds or removes horizontal space between characters. Positive values push letters apart. Negative values pull them closer. The value gets added on top of whatever spacing the browser already applies based on the font’s metrics.
word-spacing adjusts the gap between words specifically. Browsers already calculate a default word space from the font’s space character width, and this property modifies that default.
line-height controls the vertical rhythm between lines, which is the CSS equivalent of leading in traditional typesetting. It accepts unitless values (like 1.5), lengths, or percentages.
font-kerning tells the browser whether to use the OpenType kerning data baked into the font file. Set to normal to enable it, none to disable it.
The 2025 HTTP Archive Web Almanac found that web fonts now appear on roughly 88% of all websites, up from 87% the previous year. Nearly all of those sites are making spacing decisions through these exact properties, whether they realize it or not.
Font Spacing Units and Values
Three units dominate: px, em, and rem.
Pixels are fixed. Set letter-spacing: 1px and it stays 1px whether the font size is 12px or 48px. That rigidity becomes a problem on responsive layouts.
Em units scale relative to the element’s current font size. So letter-spacing: 0.05em on a 16px font gives you 0.8px of spacing, but on a 32px heading, it gives you 1.6px. This is what most web design professionals reach for because the spacing scales proportionally.
Rem units work similarly but reference the root font size instead. Useful when you want consistent spacing across different nesting depths.
One quirk worth knowing: most browsers can’t render sub-pixel letter spacing. If your computed value lands below 1px, you might see no spacing change at all, depending on the rendering engine.
Font Spacing in Design Tools
CSS isn’t the only place where spacing decisions get made. Designers working in visual tools make these calls long before any code gets written.
Figma: Letter spacing accepts percentage values (like “2%”) or pixel values. Line height can be set as a fixed value or “Auto.” Paragraph spacing is a separate field that controls the gap between text blocks.
Adobe Illustrator and InDesign: These use the terms “tracking” and “kerning” directly in their character panels. Tracking values are measured in thousandths of an em (so a value of 50 means 50/1000 of the current font size). InDesign also offers optical kerning as an alternative to the font’s metric kerning.
Google Docs and Microsoft Word: Both bury character spacing in a dialog box under “Font” settings. Word gives you “Expanded” and “Condensed” options measured in points.
Here’s the tricky part. Values don’t translate cleanly from one tool to the next.
A tracking value of 100 in Illustrator doesn’t mean letter-spacing: 100px in CSS. Figma’s percentage-based letter spacing doesn’t map directly to em values either (though it’s close, since Figma’s 1% is roughly 0.01em). Developers who don’t verify these conversions end up with text that looks nothing like what the designer intended.
Monotype introduced a variable font suite in 2023 that specifically addressed this problem. According to Global Growth Insights, 61% of UI/UX designers reported better design flexibility with variable fonts, partly because spacing parameters can be encoded directly into the font file itself.
How Font Spacing Affects Readability
Spacing and readability are directly linked. There’s no way around it.
Tight character spacing causes visual crowding, which is a perceptual phenomenon where letters start masking each other. Your brain struggles to isolate individual characters. This hits hardest at small font sizes and on low-resolution screens where each pixel counts.
Too-loose spacing creates the opposite problem. Words lose their shape. Readers can’t recognize word forms at a glance anymore, and reading speed drops because the eye has to process each character individually rather than perceiving words as unified chunks.
A 2024 study published in Education Sciences found that matching font and spacing settings to individual readers produced gains of up to 29 words per minute and 20% greater accuracy. The same research showed an average 35% change in reading speed between a reader’s best-fit and worst-fit font configuration.
For body text on screens, a line height between 1.4 and 1.6 is the range where most people read comfortably. The adoc-studio typography guide cites research showing that proper typography can boost reading accuracy by up to 20% and cut eye strain by 30%.
These aren’t abstract numbers. They’re the difference between someone reading your content and someone bouncing.
Font Spacing and Accessibility Standards
WCAG Success Criterion 1.4.12 (Text Spacing) is the one to know here. It’s an AA-level requirement, which means it applies to most sites pursuing accessibility compliance.
The criterion doesn’t force you to use specific spacing values. What it requires is that your content stays readable and functional when users override your styles to these minimums:
- Line height at least 1.5x the font size
- Paragraph spacing at least 2x the font size
- Letter spacing at least 0.12x the font size
- Word spacing at least 0.16x the font size
A landmark PNAS study by Zorzi et al. (2012) showed that wider letter spacing enabled dyslexic children to read 20% faster while making half as many errors. This is with no training at all, just a change in spacing.
Dyslexia affects between 3% and 7% of the population. If your layout breaks when users increase text spacing, you’re locking out millions of people.
Test it yourself. Use a browser extension like Stylus to apply WCAG 1.4.12 spacing values to your site. If text overflows its containers, if buttons disappear, if content gets clipped, those are failures. The fix is usually straightforward: use relative units (em or rem), avoid fixed-height containers for text, and let your layout breathe.
Common Font Spacing Mistakes
Most spacing problems come from the same handful of errors. And they’re surprisingly easy to make, even if you’ve been doing this for years.
Adding Letter Spacing to Lowercase Body Text
There’s a famous (cleaned-up) quote from type designer Frederic Goudy: anyone who would letter-space lowercase would steal sheep.
Bit dramatic. But the point holds.
Lowercase body text is designed to be read at its default spacing. The letter shapes, the counters, the way ascenders and descenders interact, it all assumes the spacing baked into the font. When you add extra letter spacing, you break the visual rhythm that makes words recognizable as shapes rather than strings of individual characters.
Ignoring Built-In Kerning Tables
What happens: A developer sets a flat letter-spacing value across all text, which overrides the font’s carefully designed kerning pairs.
Why it’s bad: Kerning tables exist because certain character combinations (AV, To, LT, Ty) need custom spacing to look right. A global letter-spacing value treats every pair the same and removes those subtle adjustments.
The CSS font-kerning: normal property should be left on in most cases. Only disable it if you have a specific reason.
Using Absolute Pixel Values for Spacing
A letter-spacing: 2px looks fine on a 16px body font. It looks ridiculous on a 48px heading.
The HTTP Archive’s 2025 data shows roughly one-third of all websites now exclusively self-host their fonts, with many using responsive CSS approaches. If you’re still setting spacing in fixed pixels, your text breaks the moment someone views it on a different screen size or zooms in.
Use em values. Your future self will thank you.
Not Testing Across Typefaces
Every typeface has different built-in metrics. A serif font like Georgia may need less letter spacing than a geometric sans-serif like Futura. The x-height, character width, and default sidebearings all differ from font to font.
Three-quarters of Fortune 500 companies use sans-serif fonts for their logos, according to Toner Buzz research. But the spacing that works for one sans-serif won’t necessarily work for another. Always test your spacing values against the specific font you’re using, not just a generic default.
Font Spacing for Headings vs. Body Text
Spacing rules flip depending on text size. What works for a 16px paragraph will look wrong on a 48px heading, and the other way around.
Google’s Material Design 3 type scale makes this clear. Their Roboto guidelines use negative tracking (-0.025em) for large display text at 57px, zero tracking for medium headlines, and positive tracking (+0.05em) for small 12px labels. That’s not random. It follows a pattern most professional type systems share.
| Text Role | Typical Size | Spacing Direction | Why |
|---|---|---|---|
| Display / Hero | 36px–57px | Negative (tighter) | Large letters look gappy at default spacing |
| Headings | 20px–32px | None to slightly negative | Balance between readability and compactness |
| Body text | 14px–18px | Default or very slight positive | Optimized by the font designer already |
| Captions / Labels | 10px–12px | Positive (looser) | Prevents character crowding at small sizes |
Why does this happen? At larger sizes, the whitespace between characters becomes more visible to the eye. The gaps feel exaggerated. Tightening the spacing pulls the letterforms into a cohesive word shape again.
At small sizes, the opposite problem shows up. Characters crowd together and start blending visually. Adding a bit of positive letter spacing (even just 0.01 to 0.05em) gives each character room to be individually recognized.
Uppercase Headings Need Extra Attention
Butterick’s Practical Typography recommends adding 5–12% extra letterspacing to all-caps and small-caps text. Always.
Uppercase letters were designed to sit next to lowercase. When you force them all together, the default spacing looks too tight because every character has a similar boxy shape. There’s no ascender/descender variation to create natural breathing room.
Adam Wright Design suggests starting at +0.1em for uppercase subheadings and capping it at 0.3em maximum. Going past that actually hurts readability instead of helping it.
How Variable Fonts Handle This Automatically
The HTTP Archive’s 2024 Web Almanac found that variable font usage reached 33% of desktop pages and 34% of mobile pages, up from 29% and 30% the year before.
Some of these variable fonts include an optical size axis (opsz). When supported, the browser automatically adjusts glyph shapes, stroke weights, and spacing based on the rendered font size. Thicker strokes and wider spacing at small sizes. Finer details and tighter spacing at large sizes. No manual CSS needed.
Apple’s SF Pro actually ships as two variants: SF Pro Display (optimized for headlines) and SF Pro Text (optimized for body). The spacing behavior is baked right into each variant’s metrics. Google took a similar approach with Roboto’s type scale, where letter spacing values shift from negative to positive as font sizes decrease.
How to Choose the Right Font Spacing
There’s no single correct set of values. But there is a process that consistently gets good results.
Start with the Font’s Defaults
Well-designed fonts ship with spacing that already works for their intended use case. A body text font like Inter or Source Sans has its character spacing calibrated for sustained reading at 14–18px.
Don’t touch anything until you’ve seen the defaults in context. Load the font. Set it at the size you need. Look at it on the screen you’re targeting. Most of the time, default spacing for body text is already close to where it should be.
Butterick’s Practical Typography makes this point directly: if you use well-designed fonts, they’re already calibrated, and you won’t need major adjustments.
Adjust Incrementally
Headings: Try -0.01em to -0.02em for tighter display text. Don’t go past -0.03em.
Uppercase subheadings: Start at +0.1em. Keep it under +0.25em.
Body text: Leave it alone. If you absolutely must adjust, stay within +/- 0.01em.
Small text below 13px: Add slight positive spacing, around +0.01em to +0.03em, to prevent crowding.
These values come from the WebDesignerDepot guide, which tested them across multiple popular typefaces including Roboto and SF Pro.
Test Across Contexts
A spacing value that looks polished on your 27-inch monitor might fall apart on a phone screen.
Check your text at multiple viewport widths. Open Chrome DevTools and toggle between device sizes. The HTTP Archive’s 2025 data shows Google Fonts still appears on roughly 54% of desktop sites but only 47% of mobile, partly because mobile rendering behaves differently and some developers are switching to self-hosted solutions for tighter control.
Browser rendering engines don’t all treat sub-pixel spacing the same way. Firefox, Chrome, and Safari can produce slightly different results with the same CSS values. If precision matters (and for brand typography it usually does), test in all three.
When to Leave Spacing Alone
Honestly? Most of the time.
Body text in a blog post, article, or documentation page rarely benefits from custom letter spacing. The font’s built-in metrics plus a sensible line-height of 1.5 handles it.
Where spacing adjustments actually matter:
- Uppercase headings and navigation labels
- Display fonts at hero sizes (40px+)
- Condensed typefaces used at small sizes
- Text over images or gradient backgrounds where readability is already compromised
If you’re tweaking letter spacing on a 16px paragraph of regular-weight body text, you’re probably solving a problem that doesn’t exist. Pick a better font instead, or adjust line height first. Those two changes almost always have a bigger impact on readability than letter spacing does.
Shopify’s typography guidelines echo this: design tools like Figma handle character spacing automatically with a zero-percent default, and in most body text scenarios, that default is exactly where it should be.
FAQ on What Is Font Spacing
What is the difference between letter spacing and kerning?
Letter spacing (tracking) applies a uniform adjustment across all characters in a text block. Kerning adjusts the gap between two specific characters, like “AV” or “To.” Most fonts include built-in kerning tables that handle pair-specific spacing automatically.
What CSS property controls font spacing?
The letter-spacing property handles space between characters. Use word-spacing for gaps between words and line-height for vertical distance between lines. All three accept values in px, em, or rem units.
What is the best letter spacing for body text?
Leave it at the font’s default in most cases. Well-designed typefaces like Inter or Roboto are already optimized for body sizes (14–18px). If you must adjust, stay within +/- 0.01em to avoid breaking the natural reading rhythm.
Does font spacing affect readability?
Directly. A 2024 Education Sciences study found up to a 35% change in reading speed between best-fit and worst-fit spacing configurations. Too tight causes visual crowding. Too loose breaks word shape recognition.
What are the WCAG requirements for text spacing?
WCAG Success Criterion 1.4.12 requires that content stays functional when users override spacing to: line height at 1.5x font size, paragraph spacing at 2x, letter spacing at 0.12x, and word spacing at 0.16x.
Should I use pixels or em units for letter spacing?
Use em units for responsive layouts. They scale proportionally with font size, so spacing stays consistent across screen sizes. Pixel values are fixed and break when text is resized or viewed on different devices.
How does font spacing work in Figma?
Figma’s character panel lets you set letter spacing as a percentage or pixel value. Line height can be “Auto” or a fixed number. These values don’t translate directly to CSS, so developers need to convert them manually during handoff.
Does wider letter spacing help people with dyslexia?
Research published in PNAS by Zorzi et al. showed dyslexic children read 20% faster with wider spacing while making half as many errors. The benefit comes from reducing visual crowding between characters that interferes with letter recognition.
What letter spacing should I use for uppercase headings?
Add positive spacing, typically between +0.05em and +0.25em. Uppercase letters have uniform shapes that look cramped at default spacing. Butterick’s Practical Typography recommends 5–12% extra letterspacing for all-caps text.
What is leading in font spacing?
Leading is the vertical distance between text baselines, originating from strips of lead placed between metal type lines. In CSS, it’s controlled through the line-height property. A value between 1.4 and 1.6 works well for most body text.
Conclusion
Understanding what is font spacing gives you control over how people experience your text. Every CSS property, every Figma slider, every OpenType kerning table ties back to one thing: making content readable.
The numbers back this up. Proper spacing can shift reading speed by 35%. It determines whether your site meets WCAG 1.4.12 or locks out users with dyslexia and low vision.
Start with your font’s built-in defaults. Use em units for responsive scaling. Tighten headings slightly, loosen small labels, and leave body text alone unless you have a clear reason not to.
Font spacing isn’t glamorous. But it’s the difference between a typographic hierarchy that works and one that quietly fails your readers on every page.
Renowned for his expertise in logo design and visual branding, Bogdan has developed a multitude of logos for various clients.
His skills extend to creating posters, vector illustrations, business cards, and brochures. Additionally, Bogdan's UI kits were featured on marketplaces like Visual Hierarchy and UI8.
He also wrote in the past years on sites like Design Your Way, WebDesignerDepot, WPDean, Designmodo, Speckyboy, Slider Revolution, and more.
- The Dualshockers Logo History, Colors, Font, And Meaning - 4 August 2026
- Elegant Cormorant Garamond Font Pairing Inspiration - 3 August 2026
- Pantone to RAL Converter - 2 August 2026
Bogdan Sandu is a seasoned designer who has been designing websites since 2008. Renowned for his expertise in logo design and visual branding, Bogdan has developed a multitude of logos for various clients. His skills extend to creating posters, vector illustrations, business cards, and brochures. Additionally, Bogdan's UI kits were featured on marketplaces like Visual Hierarchy and UI8. He also wrote in the past years on sites like Design Your Way, WebDesignerDepot, WPDean, Designmodo, Speckyboy, Slider Revolution, and more.
You Might Also Like
