What You’ll Learn

The letter-spacing property controls the space between characters in text. It helps you improve readability, create typographic style, and make headings or labels stand out.

Introduction

The letter-spacing property in CSS is used to control the spacing between characters in text. By adjusting letter spacing, you can enhance the readability and visual appeal of your content.

This property is particularly useful for creating different typographic effects and ensuring that text fits well within its designated space. You will often see it on headings, buttons, navigation labels, and brand typography.

Definition and Usage

Apply letter-spacing to any text-containing element such as headings, paragraphs, links, buttons, or spans. It works with any font and combines well with text-transform, font-size, and font-weight.

📝 Syntax

The syntax for the letter-spacing property is simple. It can be applied to any text-containing element:

selector {
  letter-spacing: value;
}

Basic Example

h1 {
  letter-spacing: 2px;
}

Syntax Rules

• The value can be the keyword normal or any valid CSS length.
• Positive lengths increase space between characters.
• Negative lengths decrease space between characters.
• The property is inherited by child elements.
• Relative units like em scale with the element’s font size.

💎 Property Values

The default value of letter-spacing is normal, which uses the spacing built into the font by the type designer.

🎯 Default Value

The default value of the letter-spacing property is normal. This means the browser uses the font’s built-in character spacing. You only need to set letter-spacing when you want to deliberately widen or tighten text.

Examples Gallery

Apply different letter spacings to headings and paragraphs, style uppercase labels, use relative units, and store spacing in a CSS variable.

<style>
  h1 {
    letter-spacing: 2px;
  }
  p {
    letter-spacing: -0.5px;
  }
</style>

<h1>Increased Letter Spacing</h1>
<p>This paragraph has slightly decreased letter spacing.</p>

.nav-link {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  font-weight: 600;
}

.hero-title {
  font-size: 2.5rem;
  letter-spacing: 0.05em;
}

.hero-subtitle {
  font-size: 1rem;
  letter-spacing: 0.05em;
}

:root {
  --heading-track: 0.08em;
}

h1, h2, h3 {
  letter-spacing: var(--heading-track);
}

♿ Accessibility

• Keep body text readable — Avoid extreme negative spacing on long paragraphs.
• Do not rely on spacing alone — Headings still need proper semantic tags and contrast.
• Test with zoom — Very tight or wide spacing can become harder to read when text is enlarged.
• Consider dyslexia-friendly settings — Some users prefer default font spacing; use custom spacing sparingly on body copy.
• Pair with sufficient line-height — Character spacing and line spacing work together for readability.

💡 Best Practices