Letter Spacing Calculator

Tracking

In em0
In px0px
Design-tool tracking0
Recommended for this size/role0em (0px)

Design-tool tracking is thousandths of an em — Figma/CSS convention: tracking 20 = 0.02em.

Starting points by size

Size bandBodyUppercaseDisplay
10–12px+0.02em+0.08em+0.01em
13–16px0em+0.06em−0.01em
17–24px−0.01em+0.04em−0.02em
25–40px−0.015em+0.02em−0.02em
41px+−0.02em0em−0.03em

Optical rules of thumb — check against the real typeface, since x-height and fit differ per family.

CSS
font-size: 16px;
letter-spacing: 0em; /* 0px */

You Might Also Need

The letter spacing calculator converts a tracking value between em, pixels and the thousandths-of-an-em number design tools use, and names the value that suits the size and the role. The conversion is the boring half; the size table is the useful half.

What is Letter Spacing Calculator?

The letter spacing calculator turns one tracking value into every form it is written in. Enter a number in em or in pixels along with the font size, and it returns the em value, the pixel value at that size, and the design-tool tracking number — thousandths of an em, so a value of 0.02em reads as tracking 20. That one convention is the reason tracking looks like a different quantity in a design file and in a stylesheet.

The size and role selection then names a recommended value, taken from a table of optical bands.

  • 10 to 12px body text wants about 0.02em positive tracking, because tiny letters crowd as they rasterise.
  • 13 to 16px body text sits at zero: the spacing the designer drew is the spacing intended.
  • 17 to 24px tightens slightly to minus 0.01em, and the bands above it continue in the same direction to minus 0.02em at 41px and up.
  • Uppercase always wants positive tracking, from 0.08em at the smallest sizes down to zero at the largest, because capitals are drawn to be spaced and their sidebearings assume surrounding lowercase.
  • Display headings want negative tracking at every size in the table, from minus 0.01em to minus 0.03em, since large letters show their sidebearings as gaps.

The role selector is separate from the size on purpose. A 14px uppercase label and a 14px paragraph sit in the same band and want opposite values: positive tracking for the capitals, zero for the sentence case. That is why the table has three columns rather than one recommendation per size, and why the readout gives the recommended value in both em and pixels for the size entered.

The exported CSS writes the font size and the letter-spacing together, with the pixel equivalent in a comment, and the em form is the declaration because it survives every breakpoint. A pixel value would have to be rewritten at each size in a responsive scale, which is exactly what the tracking number exists to avoid.

Four things the tool does not claim, and each one matters when a value is applied to real text.

  • The bands are optical rules of thumb rather than measurements of a specific face, and faces differ: a geometric sans with already-wide sidebearings needs less positive tracking than a condensed grotesque.
  • Letter-spacing is not kerning, and no value here fixes a bad pair inside a word.
  • Positive tracking adds space after the final letter as well as between letters, so a centred line of tracked capitals drifts left of true centre by half that space; a negative trailing margin of the same size cancels the phantom space and restores the centre.
  • Nothing checks the result against the actual typeface, since the tool works in numbers rather than in a rendering, so the final judgement is still made by eye on real text at the size it ships.

Treat it as a conversion table and a starting band, then confirm the value on the face and the size the project actually uses.

How to use Letter Spacing Calculator

  1. Enter the font size, then type the tracking value in whichever unit you have it — em, pixels or a design-tool number — and read the conversion.
  2. Choose the text role, since uppercase and sentence case want different values at the same size.
  3. Compare the entered value with the recommended one for that size and role, and use the table to see how it changes up and down the scale.
  4. Copy the CSS in em, keeping the pixel readout as a comment for the size you are working at.

When to use Letter Spacing Calculator vs related tools

Reach for it when a tracking value has to be translated between a design file and a stylesheet, when a size ladder needs a tracking value per step rather than one global setting, or when a line of uppercase looks cramped and the reason is that capitals are drawn to be spaced. The unit conventions are the part worth learning. For the full role table in CSS custom properties, the CSS letter spacing tool writes it out; the font letter spacing tester shows the values on real text, and the type scale generator supplies the sizes the bands refer to.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about Letter Spacing Calculator