Letter Spacing Converter (Tracking → CSS)
Convert Photoshop/Illustrator tracking or Figma % letter spacing into CSS em and px values.
1,149 views
Preview
TYPOGRAPHY SPACING EXAMPLE
Three Tools, Three Units
Adobe apps measure tracking in thousandths of an em: CSS em = tracking ÷ 1000, so tracking 50 → letter-spacing: 0.05em. Figma's percent is just em × 100: 5% = 0.05em. The px value additionally depends on font size: 0.05em at 16 px = 0.8 px, but the same 0.05em at 48 px is 2.4 px. Enter whichever value your design file shows; the others update instantly, so you never need to do the arithmetic by hand when handing a spec from Figma to a developer. Sketch and XD follow the same em-based logic as CSS, which is why the em field is usually the safest one to standardize on across a mixed design toolchain.
Good to Know
"Tracking" is a holdover term from phototypesetting machines of the 1960s–70s, like Letraset dry-transfer sheets and early photo-typesetters, where adjusting letter spacing meant physically shifting how characters sat on a strip of film or transfer sheet. It's often confused with kerning, but the two aren't the same: tracking adds equal spacing across an entire selection of text, while kerning adjusts the space between just one specific pair of letters — like the overlapping shapes in "AV" or "To" — to fix an awkward visual gap that uniform spacing can't solve. In CSS there's also a practical gotcha worth knowing: letter-spacing adds space after every character, including the very last one, so centered or right-aligned text can end up looking slightly off-balance because of that invisible trailing gap nobody accounts for. Negative tracking values are just as valid as positive ones and are common on very large headings, where default spacing starts to look loose once letters are blown up past their intended point size.
- Large display headings: −10 to −30 tracking (tightened for visual impact)
- Small uppercase labels: +50 to +200 tracking (opened up for legibility)
- Body text: usually left at 0 — default spacing is already tuned by the type designer
- Logotypes and wordmarks: often custom-tracked per letter pair, beyond what a single tracking value can achieve
Frequently Asked Questions
Figma shows letter spacing in px — what then?
Then it is already the CSS px value; enter it in the px field with the font size set correctly, and read the em equivalent for CSS that scales properly across different type sizes. Figma actually supports both percent and px units for letter spacing depending on the file's settings, so check which one your design system uses before handing values to development.
Why does uppercase text need positive tracking?
Capital letters are drawn to sit comfortably next to lowercase letters with their ascenders and descenders; set solid on their own, without any lowercase to balance them, they read as visually cramped. +5% to +15% (tracking 50-150) is the classic fix for all-caps labels, navigation items, and eyebrow text, opening the letterforms up enough to read comfortably at a glance.
What's the difference between tracking and kerning?
Tracking adds uniform spacing across a whole run of text — a word, a line, or a full selection. Kerning adjusts the space between just one pair of adjacent letters, like "AV" or "To", where the shapes would otherwise overlap or leave an odd visual gap. CSS handles them separately too: letter-spacing controls tracking, while font-kerning (usually left on "normal") controls per-pair kerning pulled from the font's own built-in kerning table.
Why does centered text look slightly off with letter-spacing applied?
CSS letter-spacing adds space after every character, including the final one — a quirk of the spec that catches a lot of developers off guard. On centered or right-aligned text, that invisible trailing space shifts the visual center, making the text look pushed slightly left of where it should actually sit. A common fix is a small negative margin-right on the element, roughly equal to the letter-spacing value.
Where does the term "tracking" come from?
It dates back to phototypesetting equipment of the 1960s and 70s — machines like Letraset transfer sheets and photo-typesetting units, where adjusting the space between characters literally meant physically shifting how they were tracked across a strip of film or transfer sheet. The term stuck around through digital typesetting and eventually became the standard word for letter spacing in tools like Photoshop and Illustrator, long after the physical machines it originally described disappeared.
Similar Tools
Report a Problem
Letter Spacing Converter (Tracking → CSS)
Comments
No comments yet — be the first to write one!