CSS Letter Spacing and Word Spacing: How to Adjust Text Spacing

Use letter-spacing to change the gaps between characters and word-spacing to change the gaps between words. Both properties are inherited and accept normal or length-percentage values. Start with a small adjustment, then check it in the actual font, size, language, and layout.

.heading {
  letter-spacing: 0.05em;
}

.reading-copy {
  word-spacing: 0.1em;
}

These are illustrative starting values, not universal typographic recommendations or accessibility thresholds. Positive values expand spacing; negative values compress it. See MDN’s references for letter-spacing and word-spacing.

1. Letter spacing vs. word spacing

Property	What it changes	Where the effect appears
`letter-spacing`	Additional spacing between characters, on top of the font’s natural spacing	Within words and across character boundaries
`word-spacing`	Additional spacing between words and between inline text separated by tags	At word gaps

Neither property is a substitute for the other. If a heading looks too tight within each word, adjust letter-spacing. If words run together visually while individual letters look fine, adjust word-spacing. The value normal leaves the font’s normal spacing in place.

Letter spacing is not kerning. Kerning adjusts spacing for particular character pairs; letter-spacing applies uniform additional spacing. MDN notes that non-zero letter spacing normally suppresses optional ligatures unless they are explicitly re-enabled.

2. How to adjust letter spacing in CSS

Identify the text that needs adjustment and scope the rule to it.
Change only letter-spacing first so you can judge its effect.
Begin with a modest value, such as 0.02em or 0.05em, then compare with normal.
Check the text at its rendered font size, in the real typeface and surrounding layout.
Inspect it at narrow and wide viewports, and with longer text than the shortest example.

<h1 class="page-title">A clear page title</h1>
<p class="intro">Readable text should still feel connected.</p>

.page-title {
  letter-spacing: 0.03em;
}

.intro {
  letter-spacing: normal;
}

Lengths such as px are also valid. Relative values such as em scale with the text size, which can be useful when text scales responsively. Treat the value as a design decision to evaluate in context; there is no one amount that works for every font.

3. How to increase space between words in CSS

Set word-spacing on the relevant text. Positive values widen word gaps; negative values reduce them. Percentage values are calculated relative to the text’s font size.

.article-copy {
  word-spacing: 0.08em;
}

.compact-label {
  word-spacing: -0.02em;
}

Use word spacing sparingly in paragraphs: widening word gaps can make lines feel uneven, especially when the line is already constrained. Check how the text wraps and whether the spacing makes it harder to track from one word to the next.

4. Tune spacing in context

Change one property at a time. This makes it easier to identify which adjustment helped.
Compare against normal. Keep the browser’s natural font spacing as your baseline.
Check several text roles. A value that suits a large heading may look wrong in body copy, navigation, or a button.
Try realistic content. Long words, punctuation, mixed case, and different lengths can expose awkward gaps or wrapping.
Avoid extremes. Large positive letter spacing can make characters seem disconnected; large negative spacing can make them overlap. Extreme word spacing can similarly disrupt reading.

Both properties are inherited. A declaration on a container can affect descendant text unless a more specific rule overrides it. Scope changes to the intended component or reset a descendant with normal where needed.

5. Accessibility and WCAG text spacing

WCAG 2.1 Success Criterion 1.4.12, Text Spacing, is a Level AA criterion. For applicable content implemented in markup languages, it requires no loss of content or functionality when users apply all of these values without changing other style properties:

Line height of at least 1.5 times the font size
Spacing after paragraphs of at least 2 times the font size
Letter spacing of at least 0.12 times the font size
Word spacing of at least 0.16 times the font size

These are user-adjustment test values. They do not mean every page must use those values as its default styling. The requirement is that content and functionality remain available when users apply the spacing adjustments. Read the W3C explanation of Success Criterion 1.4.12.

Test that text can grow and wrap without being clipped or hidden. Fixed-height text boxes are a common source of trouble: longer button labels, navigation items, and paragraphs may overflow when spacing changes. Prefer layouts that can expand, wrap, or scroll when appropriate, and check that the adjustment does not cover adjacent content or controls.

6. Language and typography considerations

Do not apply letter spacing indiscriminately to every language or script. Some scripts use connected letter forms; MDN gives Arabic as an example where added letter spacing can make text appear broken. Test with the relevant script and font, and limit stylistic tracking to text where it is appropriate.

Keep text as text. Spacing with CSS is a visual presentation change; it should not replace actual spaces, meaningful content, or semantic markup. CSS can adjust the appearance while preserving the text sequence for users and browsers.

7. Troubleshooting common spacing problems

Symptom	Likely cause	Fix
Characters look disconnected	Positive `letter-spacing` is too large for the font or size	Reduce the value, compare with `normal`, and inspect at the actual rendered size.
Characters collide or overlap	Negative `letter-spacing` is too strong	Move the value closer to `normal` until each character remains clear.
Words look too far apart	`word-spacing` is too large, or the text column is narrow	Reduce word spacing and check wrapping in the real container.
A child element also has unexpected spacing	The parent’s spacing value is inherited	Inspect computed styles and override the child with an appropriate value, often `normal`.
Arabic text appears broken	Letter spacing disrupts connected letter forms	Remove the tracking for that script and test with the target font and language.
Text clips after a user increases spacing	A fixed height, hidden overflow, or rigid layout prevents content from expanding	Allow wrapping and growth; verify the WCAG spacing values do not hide text or controls.
Letter shapes or ligatures change	Non-zero letter spacing can suppress optional ligatures	Check whether the typeface’s ligatures are desired and explicitly re-enable optional ligatures where appropriate.

8. Performance, reliability, and cost

letter-spacing and word-spacing are native CSS properties, so you do not need a library, API, or paid service to apply them. Their practical reliability depends on testing the actual fonts, scripts, content, and layout states your page supports. Inherited styles can have a broad visual effect, so inspect computed styles when an adjustment appears in unexpected places.

For visual review, a browser screenshot can help compare the baseline and adjusted rendering at the same viewport. ScreenshotNeo is a website screenshot API and MCP server for developers. It can capture a page as PNG, JPEG, WebP, or PDF; this can help you inspect spacing changes in a rendered page. Its API also supports device presets, custom viewports, dark mode, full-page captures, and waiting for a selector or network idle. See the ScreenshotNeo documentation for request options.

9. Or skip the browser setup

After adjusting your CSS, you can capture a rendered page with one GET request. Replace the URL and API key with your own. See the ScreenshotNeo docs for the API options.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://stripe.com'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const image = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', image));

ScreenshotNeo accepts cookie and consent banners like a visitor, then removes 60+ known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers identify the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots.

10. FAQ

Are letter spacing and word spacing supported across browsers?

MDN marks both properties as widely available across browsers, with availability dating to July 2015. Check the target browsers if your project has older or unusual rendering constraints.

Should I use pixels or ems?

Both are valid length choices. Relative units such as em scale with text size; pixels provide a fixed length. Choose based on the design and verify the result at the sizes users will see.

What CSS values meet WCAG text spacing?

WCAG 2.1 SC 1.4.12 specifies user-adjustment test values: letter spacing of at least 0.12 times font size and word spacing of at least 0.16 times font size, alongside line-height and paragraph-spacing values. The test is whether there is no loss of content or functionality when users apply them, not whether those values are the site’s default.

Can spacing CSS replace spaces in the HTML?

No. Use real text and semantic markup. CSS spacing changes visual presentation and should not change the meaningful text sequence.