CSS Portal

CSS letter-spacing Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The letter-spacing property controls the extra space inserted between characters (glyphs) in rendered text, effectively adjusting the text’s tracking. It operates uniformly across the selected text: whatever adjustment is applied is added to (or subtracted from) the advance widths of the glyphs, so the visual rhythm of letters changes without altering glyph shapes. This property participates in the cascade and is inherited by descendants, so a spacing change on a container will typically affect all contained text unless overridden on a child.

From a typographic and design perspective, small adjustments to letter-spacing are a powerful way to tune readability and tone. Increasing spacing can open up dense type in display headings or all-caps text, while decreasing it can tighten loose headlines or logos; however, overly wide or tight spacing harms legibility. These effects depend heavily on other font choices, so you should always test spacing in context with the chosen size and face — particularly with different values of font-size and font-family, because metrics and perceived spacing vary between typefaces and sizes.

On a technical/layout level, changing letter-spacing affects the inline box metrics: it changes the computed width of text runs, which in turn influences wrapping, overflow, and justification. It works alongside spacing-related properties rather than replacing them — for example, use it together with word-spacing when you need to balance inter-letter and inter-word gaps, and be aware of interactions with line-height since very tight or very loose letters can change perceived vertical density. Also note that typographic kerning performed by fonts is separate; if you need to control automatic kerning behavior explicitly, consider using font-kerning.

In practice, apply letter-spacing sparingly and test across devices and at multiple sizes. Small visual adjustments often suffice for headings, buttons, and branding, while body copy usually benefits from default spacing tuned by the font designer. Watch punctuation and letter collisions when reducing spacing, and remember that any change will ripple through line breaks, alignment, and measurement calculations, so verify layout after introducing spacing adjustments.

Definition

Initial value
normal
Applies to
All elements
Inherited
Yes
Computed value
An absolute length
Animatable
Yes
JavaScript syntax
object.style.letterSpacing

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

letter-spacing: normal | <length> 

Values

  • normalNo additional spacing is applied.
  • <length>Specifies additional spacing between characters. Values may be negative, but there may be implementation-dependent limits.
  • inherit

Example

<div class="demo">
<h2>letter-spacing: normal</h2>
<p class="normal">The quick brown fox jumps over the lazy dog.</p>

<h2>letter-spacing: 2px</h2>
<p class="spacing-2px">The quick brown fox jumps over the lazy dog.</p>

<h2>letter-spacing: 0.25em</h2>
<p class="spacing-025em">The quick brown fox jumps over the lazy dog.</p>

<h2>letter-spacing: -1px (condensed)</h2>
<p class="spacing-neg1px">The quick brown fox jumps over the lazy dog.</p>
</div>
.demo {
  max-width: 800px;
  margin: 40px auto;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #222;
}

.demo h2 {
  font-size: 0.9rem;
  margin: 1.5rem 0 0.5rem;
  color: #555;
  font-weight: 600;
}

.demo p {
  font-size: 1.2rem;
  background: #f7f7f7;
  padding: 12px 16px;
  border-radius: 6px;
  margin: 0;
}

.normal {
  letter-spacing: normal;
}

.spacing-2px {
  letter-spacing: 2px;
}

.spacing-025em {
  letter-spacing: 0.25em;
}

.spacing-neg1px {
  letter-spacing: -1px;
}

Browser Support

The following information will show you the current browser support for the CSS letter-spacing property. Hover over a browser icon to see the version that first introduced support for this CSS property.

This property is supported by all modern browsers.
Desktop
Chrome
Edge
Firefox
Opera
Safari
Tablets & Mobile
Chrome Android
Firefox Android
Opera Android
Safari iOS
Samsung Internet
Android WebView
-

Last updated by CSSPortal on: 1st January 2026

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!