CSS Letter Spacing: Syntax, Usage, and Examples

The CSS letter-spacing property adjusts the spacing between characters in text. It controls how close or far apart letters appear in a word or phrase, letting you create tightly packed headlines or spaced-out branding styles. CSS letter spacing is easy to use but powerful in shaping typography that fits your website's tone, accessibility goals, and visual design.

How to Use CSS Letter Spacing

You apply the property using the following syntax:

selector {
  letter-spacing: value;
}

The value is usually a length in pixels (px), ems (em), or rems (rem). You can also use a negative value to reduce spacing between letters.

h1 {
  letter-spacing: 2px;
}

This adds 2 pixels of space between each character in the heading.

You can also reduce spacing with negative values:

h2 {
  letter-spacing: -1px;
}

This pulls the letters closer together, which can help balance wide fonts or large headlines.

When to Use Letter Spacing CSS

Use letter spacing in CSS to improve readability, create visual emphasis, or adjust layout spacing. Designers often tweak it for branding consistency, responsive typography, or performance in different languages.

Enhancing Headlines

In large fonts, letter spacing helps maintain balance and clarity:

.hero-title {
  letter-spacing: 0.05em;
}

This slight spacing makes bold titles easier to scan, especially on mobile.

Improving Readability

For long-form body text, subtle adjustments can improve readability. For example:

body {
  font-size: 16px;
  letter-spacing: 0.01em;
}

It’s a small shift, but it can reduce visual clutter in dense paragraphs.

Correcting Font Quirks

Not all fonts are created equal. Some need manual spacing adjustments to look their best:

.logo-text {
  letter-spacing: 3px;
}

This technique is common in logo design or minimalist headers that rely heavily on spacing for elegance.

Examples of CSS Letter Spacing in Action

Default vs Spaced Text

.default {
  letter-spacing: normal;
}

.spaced {
  letter-spacing: 2px;
}

Use normal to reset any changes. A few extra pixels can give your text a modern, refined look.

Negative Letter Spacing

.tight-text {
  letter-spacing: -0.5px;
}

This creates a compressed look, good for certain display fonts or compact designs.

Responsive Letter Spacing

Use em units to make letter spacing scale with the font size:

.heading {
  font-size: 2rem;
  letter-spacing: 0.1em;
}

This ensures the spacing feels proportionate across devices.

Learn More About Letter Spacing in CSS

Letter Spacing vs Word Spacing

Don’t confuse letter spacing with word spacing. letter-spacing adjusts the space between characters; word-spacing adjusts space between entire words.

p {
  letter-spacing: 1px;
  word-spacing: 4px;
}

Use them together when refining line length or rhythm in paragraphs.

CSS Letter-Spacing and Text Alignment

Justifying or centering text can exaggerate letter spacing changes. It’s best to test adjustments in the layout they’ll appear in.

Also, note that letter spacing affects the overall width of a text block—important when working with constrained or centered layouts.

CSS Font Letter Spacing and Accessibility

Increasing letter spacing slightly can help users with dyslexia or other reading challenges:

.accessible-text {
  letter-spacing: 0.12em;
}

This extra space improves word recognition and reduces crowding. For accessibility-first design, always test how your spacing choices impact line breaks and visual clarity.

Font Letter Spacing CSS in Branding

Spacing is a big part of branding. Tightly packed letters feel bold or edgy, while loosely spaced ones feel airy and luxurious:

.brand-logo {
  font-weight: bold;
  letter-spacing: 4px;
}

Use letter spacing with font weight, text transform, and color to craft a unique brand voice.

CSS Letter Spacing Percentage

While you can’t directly apply a percentage to letter-spacing, using em units achieves a similar effect:

.banner-text {
  letter-spacing: 0.1em;
}

This gives you responsive spacing that scales with font size—essentially a percentage-based approach.

CSS Letter-Spacing and Font Families

Different fonts behave differently with the same spacing value. A serif font like Georgia may need less spacing than a geometric sans-serif like Futura.

Test spacing in the context of your font choices:

h3 {
  font-family: 'Futura', sans-serif;
  letter-spacing: 0.15em;
}

Always review your typography across different screen sizes and devices.

Outlined Text and Spacing

When using outlined or uppercase text, spacing becomes more noticeable. Add spacing to prevent letters from appearing cramped:

.uppercase-heading {
  text-transform: uppercase;
  letter-spacing: 2px;
}

This approach works well for section titles or labels where visual hierarchy matters.

Using Letter Spacing in Animations

You can animate letter spacing just like other CSS properties:

.animated-text {
  transition: letter-spacing 0.3s ease-in-out;
}

.animated-text:hover {
  letter-spacing: 5px;
}

This creates a modern effect that signals interactivity and adds flair.

Combining Letter Spacing with Text Shadow and Color

Create eye-catching headings by combining letter spacing with color and shadow:

.stylized-title {
  font-size: 3rem;
  letter-spacing: 4px;
  color: #222;
  text-shadow: 1px 1px 2px #ccc;
}

These visual layers make headlines stand out and improve overall readability on colored or textured backgrounds.

Controlling Text Width with Letter Spacing

If you're working with centered text or short lines (like quotes or headers), spacing helps control perceived width:

.quote {
  font-style: italic;
  text-align: center;
  letter-spacing: 0.08em;
}

Spacing helps the text breathe and improves visual balance, especially in large headings or standalone phrases.

CSS Letter Spacing in Print Styles

When designing for print with media queries, letter spacing can help fit titles into constrained spaces or improve clarity in body text:

@media print {
  h1 {
    letter-spacing: 1px;
  }
}

This keeps your text legible even in black-and-white formats or on lower-resolution printers.