CSS Letter Spacing Converter

How to use

1. 1Pick the source unit you have in hand: Figma percent, Figma pixels, Sketch pixels, Adobe tracking (1/1000 em), CSS em, CSS px, or CSS rem.
2. 2Type the value into the input field. The unit suffix is automatic, so you can paste a raw number or a value with its unit attached.
3. 3Set the font size in pixels. This is only used when the input or output is in pixels; em and percent values do not depend on it.
4. 4Optionally adjust the root font size if you need to convert to or from rem.
5. 5Read the equivalent value in every other dialect on the right, with copy buttons for each format, the CSS declaration, and a Tailwind class.
6. 6Use the live preview to confirm the spacing reads correctly at your target size, weight, and case, then use Copy CSS declaration or Copy every format to paste into your code or design tokens.
7. 7Pick a preset (Tight display, UI caps, Wide caps, etc.) to load a common tracking value, or scroll to the font-size comparison table to see how the same em maps to px across breakpoints.

About this tool

CSS Letter Spacing Converter translates the letter spacing (a.k.a. tracking) value between every dialect designers and frontend developers paste into each other every day, in one shot. Pick the source unit (Figma percent, Figma pixels, Sketch pixels, Adobe 1/1000 em tracking, CSS em, CSS pixels, or CSS rem) and the tool computes every other representation live. Letter spacing across design tools does not match CSS 1:1 because every tool uses its own unit. Figma in Percent mode stores a fraction of em multiplied by 100; the same value in Pixels mode is hard pixels at that layer's font size. Sketch reports pixels only. Photoshop, Illustrator, and InDesign use tracking units that are exactly 1/1000 of an em, so a tracking value of 50 in Photoshop is letter-spacing: 0.05em in CSS. CSS itself accepts em, px, rem, and several other units, and only em is font-size-relative in the way design tools usually mean tracking. The converter solves this by normalizing every input to canonical em, then deriving every other format from em plus the chosen font size and root font size. The output panel shows CSS em, CSS px, CSS rem, Figma percent, Figma px, Sketch px, and Adobe tracking units side by side with individual copy buttons, plus ready-made CSS declarations (em and px variants), a Tailwind v3+ tracking-[value] arbitrary-value class, and a CSS custom-property declaration so you can paste the converted value straight into any stack. A live preview rerenders the sample text at your chosen font size, weight, and case (with an ALL CAPS toggle for UI-style spaced labels) using the exact letter-spacing value the tool will emit, so what you see is exactly what the browser will render. A font-size comparison table shows the same em-equivalent tracking translated into px at common sizes (12, 14, 16, 18, 20, 24, 32, 48, 64), making it obvious why a Figma px handoff does not paste cleanly into responsive CSS that also has to look right on a hero headline. Quick presets cover seven common tracking targets used in real style guides: tight display, normal, subtle body, UI caps, wide caps, and widest caps. Useful for frontend developers translating a design handoff, designers checking that a tracking value will look the same in code, design system engineers writing tracking tokens, and anyone tired of guessing whether 50 in Photoshop equals 5% in Figma equals 0.05em in CSS (it does). Everything runs in your browser; values are never uploaded.

Free to use. Works in your browser. No signup, no login.