How to Set Letter-Spacing in CSS: Simple Guide

Use the letter-spacing CSS property to control the space between letters in text. Set it by specifying a length value like letter-spacing: 0.1rem; to increase or decrease spacing.

Syntax

The letter-spacing property accepts length values to adjust space between characters. Common units are rem, em, px, or normal to reset spacing.

• letter-spacing: The property name.
• value: The space size, e.g., 0.2rem or 2px.

css

selector {
  letter-spacing: value;
}

Example

This example shows how to increase letter spacing for a heading and decrease it for a paragraph.

css

html {
  font-family: Arial, sans-serif;
}
h1 {
  letter-spacing: 0.3rem;
  color: #2a2a2a;
}
p {
  letter-spacing: -0.05rem;
  color: #555;
  max-width: 400px;
}

Output

A heading with spaced out letters and a paragraph with slightly tighter letters.

Common Pitfalls

Common mistakes include using invalid values like negative spacing too much, which can make text hard to read, or forgetting units like px or rem. Also, setting letter-spacing on elements with very small font sizes may not show visible changes.

css

/* Wrong: missing unit */
h1 {
  letter-spacing: 2; /* invalid, no unit */
}

/* Correct: with unit */
h1 {
  letter-spacing: 2px;
}

Quick Reference

Property	Description	Example Values
letter-spacing	Controls space between letters	normal, 0.1rem, 2px, -0.05em
normal	Default spacing, no extra space	normal
length	Positive or negative space value	0.2rem, 1px, -0.1em

Key Takeaways

Use letter-spacing with length units like rem or px to adjust space between letters.

Avoid large negative values as they reduce readability by making letters too close.

Always include units when setting letter-spacing; omitting units causes invalid CSS.

The default value normal resets spacing to the browser default.

Letter spacing changes are more visible on larger font sizes.