Letter spacing converter
Convert letter spacing from Figma percent, Photoshop and Illustrator tracking, or pixels into CSS em values, with a live preview.
Spacing sets the tone
letter-spacing: -0.02em; /* -0.96px at 48px */ /* Tailwind */ tracking-[-0.02em]
How do you convert tracking to CSS letter-spacing?
Design tools and CSS describe the same thing in different units. Figma and Sketch express letter spacing as a percentage of the font size, so divide by 100: −2% is -0.02em. Photoshop, Illustrator and InDesign use tracking in thousandths of an em, so divide by 1000: a tracking of 50 is 0.05em. Pixel values divide by the font size: 1px at 20px is 0.05em.
Prefer em in CSS. An em value scales with the text, so a heading keeps the same proportional spacing at every breakpoint. A pixel value is only correct at the one size it was designed for.
As a rule of thumb, large display text often takes slightly negative spacing, and small uppercase labels need positive spacing to stay legible. There is more in line height and letter spacing.
What is the difference between tracking, kerning and letter-spacing?+
Tracking is uniform spacing applied across a run of text, which is what CSS letter-spacing does. Kerning adjusts the gap between specific pairs such as AV, and comes from the font itself via font-kerning.
How do I convert Figma letter spacing to Tailwind?+
Divide the Figma percentage by 100 and use an arbitrary value, for example tracking-[-0.02em] for −2%.
Check the spacing a live site really uses.
Click any text with Font Inspector to read its letter spacing, size and line height, then copy the whole style as CSS, Tailwind or SCSS.