Letter Spacing

letter-spacing controls the space between individual characters in text. It can make text feel more open and airy, or dense and compact. This property is often overlooked but it has a big impact on how polished your typography looks.

Basic Usage

You can use positive values to spread letters apart or negative values to bring them closer together. Most fonts look best with a very subtle positive letter spacing.

.spaced-out {
  letter-spacing: 3px;
}

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

.normal {
  letter-spacing: 0;
}
    

The default is 0, which uses the font's built-in spacing. Small adjustments of 0.5px to 2px can make a surprising difference in readability and feel.

When to Use Letter Spacing

Letter spacing is especially useful for uppercase text and small headings. All-caps text tends to look cramped without extra spacing, and adding a bit of letter-spacing makes it much more readable.

.section-label {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  font-weight: 600;
}

h1 {
  letter-spacing: -0.5px;
}
    

For large headings, a slight negative letter-spacing can make the text feel more cohesive and intentional. This is because large text often looks too loose with default spacing.

Negative Spacing for Headings

Large display text often benefits from tight letter spacing. This is a common technique in modern web design and branding. The bigger the text, the more negative spacing you can get away with.

.hero-title {
  font-size: 72px;
  letter-spacing: -2px;
  font-weight: 800;
}

.subtitle {
  font-size: 24px;
  letter-spacing: -0.5px;
}
    

Be careful not to go too tight — letters should not touch or overlap. Test with your actual font and content to find the sweet spot.