What is letter spacing and when should you adjust it?

Letter spacing is the amount of space added or removed evenly between characters in a piece of text. In typography it's usually called tracking, and in CSS it's the letter-spacing property. The font designer has already spaced the letters for normal text, so for body copy you should usually leave letter spacing at its default. You should adjust it in a few specific cases: add a little, around 0.05em to 0.12em, to text in all capitals or small caps; reduce it slightly, around 0.01em to 0.03em, for large headlines; and consider a small increase for very small text or light text on a dark background. Always use em units so the spacing scales with font size.

Letter spacing is one of those settings that's easy to overuse. A small, deliberate change can make labels and headlines look polished, but the wrong change can make body text harder to read, break ligatures and disrupt scripts where letters join. In this article you'll learn how letter spacing works in CSS, the situations where adjusting it helps, the values that work in practice, the side effects to watch for, and how it relates to accessibility guidelines.

How Letter Spacing Works in CSS

The letter-spacing property takes normal or a length:

.default  { letter-spacing: normal; }   /* the font's own spacing */
.loose    { letter-spacing: 0.1em; }    /* adds 0.1em after every character */
.tight    { letter-spacing: -0.02em; }  /* removes 0.02em after every character */

A few details about how browsers apply it:

• It's added on top of the font's spacing and kerning: The font's built-in sidebearings and kerning pairs still apply. Your value is added to every gap. If you want to understand the difference between this and kerning, see kerning vs tracking.
• It's inherited as a computed length: If you set letter-spacing: 0.1em on a parent with a 16px font, children inherit 1.6px, not 0.1em. Set it directly on the elements that need it.
• Space is added after each character, including the last: This makes centred or right-aligned text look slightly off, and it adds a trailing gap inside buttons and badges.
• Optional ligatures are disabled: When letter spacing isn't zero, browsers stop applying optional ligatures like fi and fl, because spaced-out letters can't join.

Why em, Not px

Pixel letter spacing doesn't scale. A value of 2px might look right on a 12px label but is barely noticeable on a 40px heading. If the user changes their default font size, a fixed spacing also stays the same while the text grows. em is relative to the element's font size, so 0.08em is proportionally the same at any size.

/* Avoid */
.label { font-size: 12px; letter-spacing: 1px; }

/* Prefer */
.label { font-size: 0.75rem; letter-spacing: 0.08em; }

When to Increase Letter Spacing

All Caps Text

Capital letters are designed to sit next to lowercase letters, where ascenders, descenders and varied shapes create natural rhythm. When capitals sit next to each other, they look crowded and their similar rectangular shapes blur together. A little extra spacing restores clarity:

.section-label {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

The smaller and bolder the text, the more it usually needs. A rough guide:

Text style	Typical letter spacing
Large all-caps heading	0.02em to 0.05em
Small all-caps label or eyebrow	0.06em to 0.12em
Very small all-caps text, such as legal notes	0.1em to 0.15em

Use text-transform: uppercase rather than typing in capitals. Screen readers can read text typed in capitals letter by letter in some cases, and your content stays easy to restyle.

Small Caps

True small caps, which you can enable with font-variant-caps: all-small-caps if the font supports them, benefit from the same treatment:

abbr {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.05em;
}

Small caps need a little less than full capitals, because they're designed with slightly looser spacing to start with.

Very Small Text

At small sizes, letters can start to touch and counters can close up, particularly on lower-resolution screens. A tiny increase can help captions, footnotes and interface labels below about 13px:

.caption {
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}

Some typefaces have optical size variants that already include looser spacing for small text. If your variable font has an opsz axis, font-optical-sizing: auto, which is the default, may handle this for you, and adding letter spacing on top could make it too loose.

Light Text on Dark Backgrounds

Light text on a dark background tends to look bolder and slightly tighter than the same text dark on light. A very small increase in letter spacing, sometimes combined with a slightly lighter weight, can balance it:

@media (prefers-color-scheme: dark) {
  body {
    letter-spacing: 0.005em;
  }
}

Keep this subtle. It's a fine adjustment, not a fix for poor contrast.

When to Decrease Letter Spacing

Large Headlines

Fonts are spaced for the sizes they're most often used at. When a text face is scaled up to 48px or more, the gaps between letters grow along with everything else and start to look loose. Tightening slightly makes large headlines feel more solid:

.display-heading {
  font-size: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

The larger the text, the more you can tighten, but stop well before letters touch. Check combinations like rn, ll and ij, which collide first.

Using clamp() to Scale Tightening With Size

If a heading changes size across breakpoints, you can tie its letter spacing to the size so that small versions stay at normal spacing while large versions tighten:

.hero-title {
  font-size: clamp(2rem, 1.25rem + 4vw, 5rem);
  letter-spacing: clamp(-0.04em, 1px - 0.25vw, 0em);
}

At viewport widths of 400px and below, the spacing stays at zero. At around 1440px it works out to roughly -0.03em, and on very wide screens it stops at -0.04em. Test at both ends to make sure the result looks right with your typeface.

Typefaces With Optical Sizes

Some families, including many variable fonts with an opsz axis and some superfamilies, ship display versions with tighter spacing already built in. Before tightening, check whether a display optical size or a dedicated display style exists. It will usually look better than letter spacing alone, because the designer has also adjusted details like stroke contrast and apertures.

When Not to Adjust Letter Spacing

Body Text

Paragraph text is where the font designer put most of their spacing effort. Adding or removing letter spacing across body copy almost always makes it harder to read. Wider spacing breaks words into separate letters and slows recognition; tighter spacing makes letters collide. Leave body text at normal unless you have a specific reason and have tested it with real readers.

Lowercase Text Spaced Widely

Widely spaced lowercase text is a stylistic choice with a reputation among typographers for looking awkward, because lowercase letters rely on close spacing to form recognisable word shapes. If you want an airy label, consider using capitals or small caps with modest letter spacing instead.

Scripts Where Letters Connect

In Arabic, many Indic scripts, and some other writing systems, letters join to their neighbours. Adding letter spacing can break those joins or produce text that native readers find wrong. In Arabic, extending words is traditionally done with a different technique called kashida, not by spacing letters. If your site is multilingual, scope letter spacing to the languages it suits:

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.eyebrow:lang(ar),
.eyebrow:lang(fa),
.eyebrow:lang(hi) {
  text-transform: none;
  letter-spacing: normal;
}

Monospace and Code

Monospace text is spaced so that every character aligns in columns. Letter spacing keeps the alignment, since it adds the same amount to every character, but it rarely improves code and makes it take up more space. Leave code blocks at normal spacing.

Fixing the Trailing Space Problem

Because browsers add spacing after the last character, wide letter spacing pushes centred text to the left. For short labels like buttons and badges with generous spacing, you can compensate:

.badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  /* reduce right padding by the trailing letter spacing */
  padding-inline-end: calc(0.625rem - 0.12em);
}

Here the 0.12em in the padding calculation is based on the badge's own font size, so it matches the letter spacing exactly. Newer drafts of the CSS Text specification discuss changing where letter spacing is applied, but don't rely on that yet.

Letter Spacing and Accessibility

WCAG 2.2 Success Criterion 1.4.12, Text Spacing, at Level AA, requires that no content or functionality is lost when a user sets letter spacing to at least 0.12 times the font size, along with increased line height, paragraph spacing and word spacing. People use tools and browser extensions to apply these overrides because they make reading easier.

That has two implications:

1. Your layout must cope with wider text: Buttons, navigation and cards with fixed widths or heights can overflow or clip. Use padding, min-width and flexible layouts instead of fixed sizes.
2. Your defaults don't need to be 0.12em: The criterion is about users' overrides, not your design values.

You can test by applying the overrides temporarily:

/* Paste into DevTools to test WCAG 1.4.12 */
* {
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
  line-height: 1.5 !important;
}

p {
  margin-block-end: 2em !important;
}

Look for truncated labels, overlapping text and buttons whose text wraps out of view.

A Practical Letter Spacing System

Rather than setting values ad hoc, define a few tokens and reuse them:

:root {
  --tracking-tighter: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0em;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;
}

h1 { letter-spacing: var(--tracking-tighter); }
h2 { letter-spacing: var(--tracking-tight); }
body { letter-spacing: var(--tracking-normal); }
.button { letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.eyebrow { letter-spacing: var(--tracking-wider); text-transform: uppercase; }

Tailwind CSS ships a similar scale as tracking-tighter, tracking-tight, tracking-normal, tracking-wide, tracking-wider and tracking-widest utility classes, which is a useful reference if you're designing your own.

---

FAQ: Letter Spacing

---

Conclusion

Letter spacing adds or removes an even amount of space between all characters in a piece of text, and in CSS it's set with letter-spacing. Fonts are already spaced for normal text, so the best default for body copy is to leave it alone. The cases where adjusting it helps are specific: more space for all caps, small caps and very small text, slightly less for large headlines.

Use em units, set spacing on the elements that need it rather than inheriting it, and keep a small set of reusable values. Watch for side effects like disabled ligatures, trailing space in centred labels and broken joins in connected scripts, and make sure your layout survives users' own spacing overrides. Done with restraint, letter spacing is one of the quickest ways to make typography look considered.