How to use the Letter Spacing & Kerning Previewer
- Type your text and pick a font. The box takes several lines, so you can test a logo, a headline and its tagline together. Twenty Google Fonts and five system fonts are in the list; tick Bold for the heavier weight where the family has one.
- Set Size, Tracking, Word spacing and Line height with the sliders. Under the tracking slider you’ll see the same value in every unit you might need: thousandths of an em for Illustrator and InDesign, percent for Figma,
emfor CSS, and pixels at the current size. - Kern individual pairs. Click between two letters in the preview. The pair appears below with the font’s own kerning value; adjust it with −10 / −1 / +1 / +10, type a number, or use the keyboard — ← → move between pairs, Alt+← → or ↑ ↓ change the value by 10, Shift makes it 50, Delete resets the pair.
- Compare. Switch the toggle above the preview between After (your settings) and Before (the browser default). Untick “Use the font’s built-in kerning” to see how much work the font is already doing.
- Copy the result. Copy CSS gives you the letter-spacing, word-spacing and line-height rules. Copy HTML adds a
<span>around each letter you kerned by hand, so the pairs survive on a website.
Tracking, kerning and the units behind them
Tracking changes the space between every letter in a run of text by the same amount. Kerning changes the space between one specific pair. You track a whole headline open or closed; you kern the gap between the W and the a in “Wavy” because the diagonal of the W leaves a hole that the rest of the word doesn’t have.
Most professional fonts already ship with thousands of kerning pairs. In Arial, for example, the font itself pulls A and V about 74/1000 em closer and T and o about 111/1000 em closer — at 100 px that’s 7.4 px and 11.1 px of space the browser removes for you. Manual kerning is for what’s left over: unusual letter combinations, display sizes where tiny gaps become visible, and logos where every gap is judged by eye.
Both are measured in fractions of the em, which is simply the font size. That’s why the values scale: 50/1000 em is 0.8 px at 16 px and 4.8 px at 96 px, but it looks proportionally the same at both sizes. Design apps disagree on how to write it, which is where most handoff mistakes happen:
| Adobe (1/1000 em) | Figma (%) | CSS letter-spacing | at 16 px | at 48 px | at 96 px |
|---|---|---|---|---|---|
| −20 | −2% | −0.02em | −0.32 px | −0.96 px | −1.92 px |
| 10 | 1% | 0.01em | 0.16 px | 0.48 px | 0.96 px |
| 25 | 2.5% | 0.025em | 0.4 px | 1.2 px | 2.4 px |
| 50 | 5% | 0.05em | 0.8 px | 2.4 px | 4.8 px |
| 100 | 10% | 0.1em | 1.6 px | 4.8 px | 9.6 px |
| 150 | 15% | 0.15em | 2.4 px | 7.2 px | 14.4 px |
The rule is easy to remember once you see it: divide the Adobe number by 10 for Figma’s percent, by 1000 for CSS em. Avoid pixel letter-spacing in CSS — it stays fixed when the text scales on a phone, so a headline that looked right on desktop comes out too loose or too tight.
Pairs that almost always need a look
Diagonals and overhangs cause most of the trouble. Check these first in any headline or logo:
- Capital pairs: AV, AW, AY, AT, LT, LY, LV, VA, WA, YA, TA, PA
- Capital + lowercase: To, Ta, Te, Tr, Ty, Wa, We, Wo, Ya, Yo, Va, Fa, Pa
- Around punctuation: P., F., T., r., y., and quotes next to A or J
- Lowercase in display sizes: rn (can read as m), ry, ty, vy, wy, f followed by a quote or bracket
Fonts handle the common ones well; script and display faces with swashes are less consistent. When a pair looks wrong, kern it, then flip the toggle to Before to make sure you improved it rather than overcorrected.
Tips from practice
Track caps open, track big lowercase slightly closed. Capital letters are designed to sit next to lowercase, so in an all-caps line they look cramped; +50 to +100 is a common range. Large lowercase headlines go the other way — a touch of negative tracking, often −10 to −30, keeps the word together. The badges under the controls flag both cases.
Kern at the size it will be seen. A gap that is invisible at 24 px becomes a hole at 200 px on a poster. Set the Size slider to the real output size, or the size of your mockup, before you start nudging pairs.
Kern for even space, not equal distances. Look at the area of white between letters, not the distance between their edges. Squinting or flipping the word upside down helps; so does checking the Before view every few adjustments.
Watch centered text with CSS letter-spacing. Browsers add the spacing after every letter, including the last one, so a heavily tracked centered heading shifts slightly left. Add a negative margin-right equal to the letter-spacing, or a matching padding-left, to rebalance it.
Turn finished logo lettering into outlines. Once the spacing is right, convert it with the Text to SVG Outline Tool so your kerning can’t be lost to a missing font, and pick a companion face in the Font Pairing Generator.