Letter Spacing and Word Spacing in CSS

What You Learn From This Page

• How letter-spacing and word-spacing affect different horizontal relationships.
• How normal, positive, negative, pixel, and em values behave.
• How tracking differs from kerning and interacts with justification.
• How to style headings, labels, buttons, navigation, and body copy responsibly.
• How to support language-specific typography and user spacing overrides without breakage.

Introduction

CSS provides two properties for adjusting horizontal text spacing. letter-spacing changes spacing between typographic character units, while word-spacing changes spacing around word separators. Both can influence visual rhythm, brand tone, label clarity, line wrapping, component width, and reading comfort.

These properties should be treated as refinements, not repairs for every typography problem. Fonts already contain spacing and kerning decisions designed for their glyphs. Large adjustments can break word shapes, separate punctuation, distort scripts, and make body text difficult to follow. A strong strategy keeps paragraph spacing near normal, uses subtle role-specific adjustments, and ensures layouts survive user-controlled spacing.

The Core Difference

letter-spacing addresses the general spacing between adjacent typographic character units. word-spacing addresses word-separator spacing where the writing system and white-space processing provide those opportunities. The distinction is straightforward in space-separated English text and more nuanced across other scripts.

.example {
  letter-spacing: 0.04em;
  word-spacing: 0.1em;
}

The first value changes character rhythm throughout the text. The second changes gaps associated with words. They can be combined, but each needs an independent reason and should be tested with the actual language and font.

What letter-spacing Does

The letter-spacing property adds a spacing adjustment between typographic character units. Positive values create more separation; negative values tighten the sequence. The property is inherited, so a declaration on a container can influence all descendant text unless a child resets it.

.title {
  letter-spacing: 0.05em;
}

Typographers often call broad character-spacing adjustment tracking. CSS applies the rule according to its text layout model rather than simply inserting visible blank characters into the source.

Basic letter-spacing Syntax

The common values are normal and a length. Lengths can be positive, zero, or negative. Em values scale with the element's font size, while pixel values remain a fixed number of CSS pixels.

.normal { letter-spacing: normal; }
.open { letter-spacing: 0.08em; }
.tight { letter-spacing: -0.02em; }
.fixed { letter-spacing: 1px; }

The browser combines the requested spacing with font shaping, kerning, language rules, and any justification adjustments. The property does not replace the font's internal metrics with a new fixed grid.

The normal Value for Letters

letter-spacing: normal leaves normal inter-character spacing under the user agent's shaping and justification behavior. For body copy, this is usually the strongest starting point because the typeface designer has already balanced recurring character relationships.

Normal is not always visually identical to an explicit zero in every text-layout circumstance, particularly when justification can adjust spacing opportunities. Use normal when you want ordinary font and browser behavior, and use a length when you intentionally need an additional tracking adjustment.

Positive Letter Spacing

A positive value opens the text. Small positive tracking can improve the clarity of short uppercase labels because all-cap words lose the varied ascenders and descenders that normally help identify word shapes. It can also establish a restrained display style for categories or navigation.

.category {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

The adjustment should remain subtle. At large values, individual characters look unrelated and the reader must reconstruct each word from separated pieces.

Negative Letter Spacing

A negative value tightens character spacing. Large display headings sometimes benefit from a small negative adjustment because their glyphs occupy substantial visual space and default tracking can appear loose at large sizes.

.hero-title {
  font-size: 4rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}

Negative tracking can cause glyph collisions, obscure punctuation, and reduce recognition. Test every heading, weight, language, and fallback font. Never apply aggressive negative spacing globally.

Using em for Scalable Tracking

An em length ties letter spacing to the current font size. At 20 pixels, 0.1em contributes two pixels; at 40 pixels, it contributes four. This is useful when tracking is a proportional part of a reusable typography role.

.label {
  font-size: 1.25rem;
  letter-spacing: 0.06em;
}

The value also inherits as a computed length, so broad ancestor declarations can create unexpected behavior when descendant font sizes differ. Scope tracking to the role that owns it rather than setting it high in the document tree.

Using Pixels for Letter Spacing

A pixel value provides a fixed CSS-pixel adjustment. It can work for a tightly controlled logo treatment or a specific size, but it does not scale when the same component changes font size. Two pixels may be subtle at 48 pixels and excessive at 12 pixels.

Prefer em when the relationship should remain proportional. Use pixels when the fixed relationship is deliberate and the text does not appear across a wide size range. In either case, test browser zoom and user overrides.

Uppercase Labels

Uppercase labels are a common place for modest positive letter spacing. The extra room can clarify short categories, metadata, and form labels while creating a consistent utility style.

.form-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

Keep labels concise and readable. Uppercase text with wide tracking is slower to scan in long phrases, so it should not replace ordinary sentence-case instructions or body copy.

Headings and Display Typography

Large headings can use slight negative tracking to maintain a strong visual block, particularly in heavy geometric fonts. Other display families already include tight spacing and need no adjustment. The decision must follow the rendered font rather than a reusable fashion rule.

h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

Test wrapped lines and punctuation. Tracking and line height together determine whether a multi-line title appears cohesive or crowded.

Navigation Links

Navigation can use subtle tracking to create structure, especially when labels are short and medium weight. Avoid wide uppercase spacing when menus contain long words or must fit narrow screens.

.nav-link {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

Tracking changes the width of every label and can trigger wrapping or overflow. Test translated navigation, browser zoom, and user-applied letter spacing. The responsive menu must accommodate expanded text rather than clipping it.

Buttons

Buttons may use a very small positive adjustment at medium or semibold weights. The label's immediate recognition is more important than decorative style, so values should remain restrained.

.button {
  font-weight: 600;
  letter-spacing: 0.015em;
  padding: 0.75em 1.25em;
}

Use flexible padding and minimum dimensions instead of fixed width. Increased tracking, localization, and larger text can all make the label wider. A button must grow or wrap without hiding its command.

Body Text

Long-form body text usually works best with the font's normal letter spacing. Readers recognize words partly through familiar internal shapes, and large positive tracking weakens those shapes. Negative tracking can merge letters and reduce clarity.

article {
  max-width: 65ch;
  line-height: 1.65;
  letter-spacing: normal;
  word-spacing: normal;
}

If body copy feels difficult to read, evaluate font family, size, line height, measure, weight, and contrast before adding tracking. Spacing cannot rescue a poorly matched typeface.

Inheritance of letter-spacing

Letter spacing is inherited. A declaration on a card, section, or body can propagate into headings, buttons, code, and form controls, where the same value may be inappropriate. This is especially risky with em lengths because the computed adjustment can be tied to the ancestor's font size.

.card {
  letter-spacing: 0.02em;
}

.card code {
  letter-spacing: normal;
}

Prefer targeted typography-role selectors. Use DevTools to trace inherited values when a nested component looks unexpectedly loose or tight.

What word-spacing Does

The word-spacing property changes spacing associated with word separators. In languages where spaces separate words, positive values widen those gaps and negative values reduce them. Other writing systems may have different or no equivalent word-separator behavior.

.intro {
  word-spacing: 0.08em;
}

This property should be adjusted more rarely than letter spacing. The font and browser already provide ordinary separation, and excessive changes quickly disrupt reading rhythm.

Basic word-spacing Syntax

Word spacing accepts normal and length-based adjustments, including positive and negative values. Relative em values scale with the current font size, while pixels provide fixed adjustments.

.normal { word-spacing: normal; }
.open { word-spacing: 0.12em; }
.tight { word-spacing: -0.03em; }
.fixed { word-spacing: 2px; }

Use small values and inspect line wrapping. Every widened separator consumes inline space, so paragraphs can gain lines and fixed components can overflow.

Positive Word Spacing

A small positive adjustment can help a specialized display treatment or a font whose default word gaps are unusually narrow. It can also be introduced by users who need greater separation for reading.

.reading-mode {
  word-spacing: 0.12em;
}

For ordinary body copy, default spacing is usually preferable. Large values fragment sentences into isolated pieces and create uneven visual rivers across a paragraph.

Negative Word Spacing

Negative word spacing reduces gaps around word separators. This can occasionally correct a controlled display treatment, but it easily makes words appear merged and damages recognition. It may also interact poorly with justification and fallback fonts.

Avoid negative word spacing for body copy, controls, and globally inherited styles. If a paragraph appears too loose, first inspect justification, container width, font family, and the actual source whitespace before compressing every separator.

Using em for Word Spacing

An em adjustment scales with the element's font size. At 20 pixels, 0.1em contributes about two pixels of additional spacing. This is more adaptable than a fixed length when text size changes across responsive states.

.subtitle {
  font-size: 1.25rem;
  word-spacing: 0.05em;
}

Proportional scaling does not prove the value is readable. The font's built-in space width and the language's spacing conventions remain the primary context.

Letter Spacing Versus Word Spacing

These properties solve different relationships. Do not substitute large word spacing for paragraph margins or large letter spacing for a font with poor readability.

A Combined Hero Example

.hero-title {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.hero-subtitle {
  line-height: 1.6;
  word-spacing: 0.04em;
}

The heading uses compact character and line spacing to remain one visual statement. The subtitle uses comfortable vertical rhythm and only a slight word adjustment. Both values require testing with real copy and fallback fonts.

Typography Hierarchy

A practical hierarchy leaves body spacing normal, slightly tightens large headings, and opens short uppercase labels. Word spacing remains normal unless a specific reading or display need justifies a change.

body {
  letter-spacing: normal;
  word-spacing: normal;
}

h1 { letter-spacing: -0.02em; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

This creates distinction without applying decorative spacing to every text role.

Font Family Matters

Every typeface contains its own side bearings, kerning data, character widths, and space design. Georgia at 0.05em does not feel like Inter at the same value. A fallback family can also make a carefully tuned heading collide or spread unexpectedly.

Re-test spacing after any font migration and during web-font failure. If the design requires a narrow tolerance to look correct, the component is likely too rigid. Prefer layouts that remain acceptable across the full fallback stack.

Font Weight Matters

Heavy glyphs occupy more visual mass and may appear crowded even when their advance widths do not change. Slight negative tracking can strengthen a large heavy heading, while the same value can damage a smaller semibold label.

Do not assume heavier always means tighter. Many fonts already optimize spacing for each weight, and variable fonts can adjust metrics throughout an axis. Inspect the actual rendered face and size before overriding its spacing.

Letter Spacing and Uppercase Transformation

Uppercase text often appears denser because it lacks lowercase variation. A modest positive value can restore separation for short labels. However, text-transform: uppercase is language-sensitive, and transformed content can expand beyond the width expected from the source text.

Use correct language attributes, test translated labels, and avoid all-cap paragraphs. The style should reinforce a compact role, not replace semantic hierarchy or clear wording.

Tracking Versus Kerning

Tracking adjusts spacing broadly across text. Kerning adjusts particular character pairs whose shapes need special treatment, such as AV, To, or WA. A well-designed font can place those pairs more evenly than uniform advances would.

Letter spacing does not perform pair-specific analysis. It adds a general adjustment while shaping and kerning still influence glyph placement. Heavy positive tracking can make kerning less perceptible, but the two concepts remain distinct.

The font-kerning Property

font-kerning accepts values such as auto, normal, and none. Normal asks for kerning information to be applied, while none disables it. Auto leaves the decision to the user agent.

.display-title {
  font-kerning: normal;
  letter-spacing: -0.015em;
}

Use kerning from the font rather than manually correcting individual pairs with spans. Test performance and rendering in supported browsers, especially at very small sizes where implementations may make different choices.

Word Spacing and Justified Text

When text is justified, the user agent distributes remaining line space among justification opportunities. Depending on language and text-justify, this can alter word-separator or inter-character spacing in addition to the authored word and letter spacing.

.article-copy {
  text-align: justify;
  word-spacing: normal;
}

Aggressive authored word spacing can compound uneven gaps and visible rivers. Justification quality is language-sensitive, so mark document language correctly and test narrow columns carefully.

Writing Systems Without Space-Separated Words

Not every language separates words with spaces in the same way English does. Word-spacing may have little or different visible effect, while justification can use script-specific inter-character opportunities. Applying an English-focused spacing recipe globally can damage another writing system.

Use correct lang attributes, work with localized content, and follow language-specific typographic guidance. Scope specialized letter or word spacing to the language and role for which it was designed.

Punctuation, Ligatures, and Complex Scripts

Text shaping can combine characters, position marks, and form required script-specific glyph sequences. Spacing rules operate on typographic character units rather than blindly treating every Unicode code point as an independent visible letter. Required ligatures and shaping must remain intact.

This is another reason to avoid aggressive global tracking. A value that looks harmless in Latin uppercase can be unsuitable for Arabic joining, Indic shaping, combining marks, or Southeast Asian scripts. Test the exact content and browser support matrix.

Responsive Typography

Em-based letter spacing scales with fluid font sizes, which often preserves a display heading's intended proportion. The value may still need adjustment at a content-driven breakpoint if a heading changes from one line to several or if navigation moves into a compact layout.

.hero-title {
  font-size: clamp(2.25rem, 5vw, 5rem);
  letter-spacing: -0.025em;
}

Test intermediate widths. Expanded user spacing can move wrap points even when the default text looks correct at every design breakpoint.

Accessibility and User Overrides

Some users increase letter, word, line, and paragraph spacing to improve reading. The interface must allow that adaptation without clipping text, hiding actions, overlapping content, or removing functionality. A visually exact single-line label cannot be treated as a fixed-size asset.

Natural height, flexible width, wrapping, and responsive reflow make spacing overrides possible. Avoid !important rules that fight user styles and avoid fixed text containers that fit only the authored metrics.

WCAG Text-Spacing Tolerance

WCAG 2.2 Success Criterion 1.4.12 requires applicable content to remain usable when users apply spacing that includes letter spacing of at least 0.12 times font size and word spacing of at least 0.16 times font size, together with specified line and paragraph spacing.

The criterion does not require authors to use those values by default. It requires no loss of content or functionality under the override. Test the complete set together because failures often arise from combined expansion rather than one property alone.

Avoid Fixed-Height Text Containers

A card, alert, or button with fixed height and hidden overflow can lose text when tracking or word spacing increases. This is especially dangerous for error messages, consent language, and controls whose labels communicate the only available action.

.message {
  min-height: 5rem;
  padding: 1rem;
}

Prefer natural height or minimum dimensions. If truncation is intentional, provide an accessible method to reveal the full content.

Common Mistake: Excessive Body Tracking

A paragraph with letter-spacing: 0.2em turns familiar words into loose sequences of characters. Reading slows, line length expands, and narrow screens gain many extra wraps. The result can look decorative in a short sample and become exhausting over an article.

Keep body copy at normal spacing unless user research and language-specific typography support an adjustment. Fix size, measure, line height, font, and contrast before altering every character gap.

Common Mistake: Global Negative Tracking

A universal rule such as * { letter-spacing: -1px; } ignores font, size, language, weight, code, inputs, and icon labels. It can merge glyphs in small text and break carefully shaped scripts.

Scope negative values to tested display roles. Reset inherited spacing in components that require normal character rhythm, and include fallback-font testing in review.

Common Mistake: Fixed Pixels at Every Size

Two pixels of tracking has a different proportion at 12 and 60 pixels. If the same heading component scales responsively, a fixed value may become overwhelming at the small end and invisible at the large end.

Use em when proportional scaling expresses the design. Keep pixel values for genuinely fixed treatments and verify every size where the style appears.

Common Mistake: Excessive Word Spacing

A value such as word-spacing: 1em creates large visual holes and weakens sentence continuity. Negative values can make neighboring words appear merged. Both extremes alter wrapping and can produce unpredictable justified text.

Use word spacing only when a measured reading or display requirement supports it. Normal remains the safest default for ordinary prose.

Common Mistake: Spacing as a Font Repair

If text looks cramped or unclear, the underlying cause may be a poorly chosen font, missing weight, small size, long measure, tight line height, weak contrast, or fallback mismatch. Adding three pixels of tracking can hide one symptom while creating several new problems.

Diagnose the typography system in context. Spacing should refine a suitable font, not make an unsuitable font barely usable.

Common Mistake: Ignoring Content Expansion

A short English label can tolerate generous tracking inside a fixed button, while a translated label or user-defined name overflows. Word and letter spacing both consume inline space and change wrap points.

Test long words, multiple languages, dynamic values, browser zoom, and the WCAG override set. Components should expand, wrap, or switch layout before text becomes clipped or overlaps adjacent controls.

Centralize Spacing Roles Carefully

A design system can define tokens for recurring display tracking, uppercase labels, and ordinary body spacing. Tokens should describe roles rather than raw numbers and should not encourage one value across unrelated fonts.

:root {
  --tracking-body: normal;
  --tracking-display: -0.025em;
  --tracking-label: 0.07em;
}

body { letter-spacing: var(--tracking-body); }
.display { letter-spacing: var(--tracking-display); }
.label { letter-spacing: var(--tracking-label); }

Retest tokens whenever the font family changes because the role is stable while the ideal numeric value may not be.

Letter Spacing and Variable Fonts

Variable fonts can expose several design axes inside one font file, including weight, width, optical size, and sometimes custom axes defined by the type designer. Changing one of these axes can alter the apparent space between characters even when letter-spacing remains unchanged. A condensed width setting packs glyphs into less horizontal space, while a heavier weight can make the same gaps appear smaller because the strokes occupy more visual area.

For that reason, do not tune tracking against only one variable-font instance. Test the lightest and heaviest supported weights, the narrowest and widest settings, and any optical-size behavior used by the design. A value that gives a large heading a controlled, compact appearance may cause collisions when the same component switches to a heavier weight on hover or at a responsive breakpoint.

.display-title {
  font-family: "Example Variable", sans-serif;
  font-variation-settings: "wght" 720, "wdth" 92;
  letter-spacing: -0.02em;
}

Use font-variation-settings only when higher-level properties such as font-weight, font-stretch, or font-optical-sizing cannot express the intended result. Whichever method is used, spacing decisions should be reviewed with the actual font file loaded and with its fallback stack visible during loading failures.

Spacing in Numbers, Tables, and Data Interfaces

Dashboards, invoices, reports, and tables place unusual demands on typography. Numbers must often be compared vertically, scanned quickly, or fitted into narrow columns. Adding letter spacing to every numeric value may appear orderly in one sample but can make decimal values, currency symbols, signs, and percentages harder to read. The better first tool is usually an appropriate numeric font feature, such as tabular figures, rather than artificial tracking.

.metrics-table {
  font-variant-numeric: tabular-nums;
}

.metric-label {
  letter-spacing: 0.03em;
}

This example aligns numeric glyphs while reserving a small tracking adjustment for the label. It preserves the internal rhythm of values such as $1,204.50, -3.8%, and timestamps. Test these interfaces with large values, localized separators, negative numbers, and narrow mobile columns. If a value no longer fits, allow wrapping where meaningful, increase the column space, or provide horizontal table scrolling instead of compressing characters until they become ambiguous.

Print, PDF, and Export Considerations

Typography can change when a page is printed or exported because the browser may substitute fonts, use different metrics, or calculate line breaks for a physical page. Tight negative spacing is particularly vulnerable: a substituted font can turn a refined heading into overlapping text. Excessive positive spacing can push a final word onto another line and create an unexpected extra page.

Define print rules only where the print layout genuinely needs a different treatment. Preserve normal spacing for body text, avoid fixed-height containers, and inspect the generated result rather than assuming the screen preview is identical. For downloadable documents, use embedded fonts when the format and licensing permit it, and keep a robust fallback stack. Verification should include headings, code samples, tables, links, page headers, and any certificate or report content that combines uppercase text with narrow dimensions.

Testing Strategy

Test spacing with the primary and fallback fonts, all supported weights, uppercase transformations, punctuation, ligatures, numbers, and every required script. Resize continuously, zoom to 200 percent, increase default text size, and apply user spacing overrides.

Review navigation, buttons, form labels, validation messages, tables, cards, dialogs, tooltips, and sticky regions. Long-form copy needs sustained reading tests, not just a screenshot. Check whether words remain recognizable and lines retain a comfortable measure.

Debugging Spacing Problems

Use DevTools to inspect winning and inherited letter- and word-spacing values, computed font size, rendered family, text transformation, kerning, justification, and container dimensions. An em value may appear as a pixel result after computation, so trace the source rule before editing the number.

Disable spacing declarations one at a time. Compare normal tracking, remove justification, switch to a fallback font, and expose overflow. This isolates whether the issue belongs to spacing, shaping, the font, or a rigid layout constraint.

Common Interview Questions

What does letter-spacing control? It adjusts spacing between typographic character units and is comparable to broad tracking.

What does word-spacing control? It adjusts spacing around word separators where the language and white-space model provide them.

Can these values be negative? Yes, but negative values can create collisions or merged words and should be used carefully.

Why is em useful? It makes the adjustment proportional to font size, which suits reusable and responsive typography roles.

Should body text use wide tracking? Usually not. The font's normal spacing is the best starting point for sustained reading.

Why is spacing added to uppercase labels? Modest positive tracking can reduce the dense appearance of short all-cap text.

How does kerning differ? Kerning adjusts specific character pairs, while letter spacing applies a general adjustment across character units.

How does justification interact? The user agent can further expand or compress spacing at language-appropriate justification opportunities in addition to authored spacing.

Practical Review Checklist

• Keep long-form body letter and word spacing close to normal.
• Use modest positive tracking for short uppercase labels.
• Use slight negative tracking only for tested display headings.
• Prefer em when spacing should scale with font size.
• Keep word-spacing adjustments rare and subtle.
• Distinguish general tracking from pair-specific kerning.
• Test justification with the correct content language.
• Review every value with the actual font family and weight.
• Avoid global spacing rules across different scripts and components.
• Use flexible containers that tolerate user spacing overrides.
• Test translation, zoom, fallback fonts, and long dynamic labels.
• Prioritize recognition and reading rhythm over decoration.

Key Takeaway

letter-spacing adjusts character-to-character rhythm, while word-spacing adjusts spacing at word separators. Both are inherited typographic refinements that interact with font design, shaping, language, wrapping, and justification. The font's normal spacing is usually the strongest baseline for body text.

Use small em-based adjustments for roles that clearly benefit: slightly open uppercase labels, carefully tightened display headings, or specialized word separation. Test real fonts, fallbacks, languages, and user overrides. Good spacing improves hierarchy without making the reader notice individual gaps, and good layout remains functional when users increase those gaps for their own readability.