Letter-Spacing in Web Design: How to Use It Well

Letter-spacing is the space between the characters in a line of text, and it is one of the quickest ways to make web typography look professional. A small change can make a heading feel tighter and more confident, or make small text easier to read.

In this guide you will learn what letter-spacing is, how it differs from kerning and word-spacing, how it should change with size, case and weight, and how to set it in CSS without hurting accessibility.

What is letter-spacing?

Letter-spacing, also called tracking in print design, adds or removes the same amount of space between every character in a block of text. It affects how dense the text looks and how easily the eye moves along the line.

Too little space and letters start to touch, which slows reading, especially at small sizes. Too much and the letters stop forming words and look like separate marks. The aim is spacing that readers never notice.

Letter-spacing, kerning and word-spacing

• Letter-spacing (tracking) changes the space between all letters in a selection by the same amount.
• Kerning adjusts the space between one specific pair of letters, such as “AV”. Type designers build it into the font, and browsers apply it by default. See the MDN page on font-kerning.
• Word-spacing changes the gap between words. It is a separate property, described in the MDN word-spacing reference.

A quick note on terms: a typeface is the design, and a font is one style of it, such as bold italic. If this is new to you, start with our guide to typography for web design.

Why letter-spacing matters

The main purpose of letter-spacing is legibility. Text behaves differently depending on its size, colour and background, so one fixed setting rarely suits everything. Adjusting it for the context helps people read faster without noticing why.

It also adds character. Wide tracking on a small uppercase label feels refined and calm. Tight tracking on a large headline feels strong and modern. Because it changes the tone so easily, it is worth learning to control. It also sits well alongside your choice of font and your font pairings.

How to set letter-spacing in CSS

In CSS, the property is letter-spacing. Use em units instead of pixels, so the spacing scales with the font size. The default value is normal, which means no extra space. You can read the full details in the MDN letter-spacing reference.

h1 {
  letter-spacing: -0.02em; /* tighter for large headings */
}

body {
  letter-spacing: normal; /* leave body text alone */
}

.label {
  text-transform: uppercase;
  letter-spacing: 0.08em; /* more room for capitals */
}

Design tools have the same control. In Figma it is called letter spacing and can be set in percent or pixels, and in Adobe tools it is called tracking. Convert carefully when you hand designs to developers: a value of 5 percent is 0.05em in CSS.

Letter-spacing by size, case and weight

Font size

As a rule, the bigger the text, the less space it needs. Large headings usually look better a little tighter than the default. Body text works best at or very close to the default. Very small text, such as captions and labels, often benefits from a small increase.

Capital letters

Capitals are drawn to sit next to lowercase letters, so a line of them looks cramped at the default setting. Adding a little tracking to uppercase text, usually between 0.05em and 0.1em, almost always improves it. This is why navigation labels, buttons and small headings in capitals often have wide spacing.

Font weight

Light weights have thin strokes and a lot of white space, so they can take slightly more tracking. Bold weights look dense, and slightly tighter spacing keeps them from feeling heavy and loose. Always judge by eye, because every typeface is different.

Display type versus reading type

Letter-spacing in logos, titles, banners and quotes is a design decision. In paragraphs that people read for minutes, keep it close to the default. A little breathing room on a headline is style. On a long paragraph it is a readability problem. The font trends and minimalistic fonts posts show tracking in real use.

Letter-spacing and accessibility

Some visitors change text spacing to read comfortably, for example with a browser extension or a custom stylesheet. The WCAG text spacing criterion says your layout should not break when letter-spacing is set to 0.12 times the font size, word-spacing to 0.16 times and line height to 1.5 times.

In practice, avoid fixed-height boxes and tight containers around text, so nothing overlaps or gets cut off when spacing grows. Also avoid letter-spacing on scripts that join letters, such as Arabic, because it breaks the connections between them.

Common letter-spacing mistakes

• Tracking out lowercase body text. It hurts reading rhythm. Keep it for capitals and short labels.
• Using pixels. A value in px does not scale when the font size changes on different screens.
• Forgetting the trailing space. Browsers add the spacing after the last letter too, so centred, tracked text can look slightly off-centre. Adjust with a small negative margin or padding.
• Fixing a bad font with tracking. If a font looks wrong, change the font first.
• Ignoring the font. Some fonts are already spaced widely and need no help.

When you pick fonts, our lists of beautiful fonts and fonts of the week are a good place to experiment with different spacing.

Quick reference

• Large headings: slightly negative, about -0.01em to -0.03em.
• Body text: normal, or no more than 0.01em either way.
• Small text and captions: a little positive, about 0.01em to 0.03em.
• Uppercase labels and buttons: positive, about 0.05em to 0.1em.
• Logos and wordmarks: set by hand, after checking the result at small sizes.

Treat these as starting points. Zoom in, look at the shapes between the letters and adjust until the rhythm looks even. Then view the page on a phone, because small screens often show spacing problems first.

Frequently asked questions

What is letter-spacing in CSS?

It is the CSS property that adds or removes space between characters. A positive value spreads letters apart, a negative value pulls them together, and normal uses the font’s default spacing.

What is the difference between kerning and letter-spacing?

Kerning adjusts the space between specific pairs of letters and is built into the font. Letter-spacing, or tracking, changes the space between all the letters equally.

What is a good letter-spacing for headings?

Large headings often look best slightly tighter than normal, around -0.01em to -0.03em, depending on the font. Test it visually, because the right amount changes from typeface to typeface.

Should I use em or px for letter-spacing?

Use em. It scales with the font size, so the spacing stays in proportion on every screen and in every text style.

---

Need typography that works for a client?

Inkyy is a white label design and development team for agencies. Our designers set up type systems that look sharp and stay readable on every device, and you deliver the result under your own brand. See our design services or book a 15-minute call.