Free Typography Tool
Letter Spacing Converter: Photoshop & Figma Tracking to CSS
Convert Photoshop and Illustrator tracking or Figma letter spacing into CSS em, px, or %. Enter your font size, preview the result live, and copy production-ready letter-spacing CSS in one click.
Convert tracking
font-size: 16px;
letter-spacing: 0.1em;
Live preview
SPACED LETTERING sample
Preview size is capped at 64px so long strings stay on screen.How to Use the Letter Spacing Converter
Pick the unit you're converting from — Photoshop/Illustrator tracking, Figma px or %, or a raw CSS value — enter the number from your design file, and set the font size the text will render at. The converter instantly returns the equivalent CSS letter-spacing in em, px, and %, updates the live preview so you can judge the spacing with your own eyes, and gives you a copy-ready CSS snippet.
The math behind it is simple once you know it. Photoshop and Illustrator measure tracking in thousandths of an em, so the core formula is:
tracking ÷ 1000 = em
A tracking value of 100 becomes letter-spacing: 0.1em, 50 becomes 0.05em, and -25 becomes -0.025em. To express the same spacing in pixels, multiply the em value by the font size:
em × font size = px
So tracking 100 on 16px text is 0.1 × 16 = 1.6px, while the same tracking on a 32px heading is 3.2px — same em value, different pixel result. That's exactly why the font size input matters: px and % conversions only make sense relative to a specific size, while the em value stays constant. Once the preview looks right, copy the CSS and paste it straight into your stylesheet.
Why Design-Tool Tracking and CSS Letter-Spacing Don't Match
The number in your design file almost never transfers to CSS as-is, because every tool measures spacing differently.
Photoshop and Illustrator use tracking, measured in thousandths of an em — a unit inherited from traditional typesetting. Tracking 200 doesn't mean 200 pixels; it means 0.2 of the current font size. Paste it into CSS unconverted and your text will explode across the page.
Figma measures letter spacing in either px (an absolute value tied to the current layer's font size) or % (a relative value, where 10% equals 0.1em). The % mode maps cleanly to em; the px mode only matches CSS if the rendered font size is identical to the one in your Figma layer — resize the text and the spacing is wrong.
CSS accepts px, em, rem, and (in modern browsers) percentages via relative units, but the best practice is em. An em-based letter-spacing is defined relative to the element's own font size, so the spacing scales automatically: your responsive headline that shrinks from 48px on desktop to 28px on mobile keeps proportionally identical tracking with a single declaration. A px value, by contrast, is frozen — spacing that looks elegant at 48px becomes gappy and loose at 28px. Convert your design-tool value to em once, and it holds up at every breakpoint, zoom level, and user font-size preference.
Letter Spacing Guidelines: How Much Is Right?
Letter spacing is a small adjustment with a big effect on legibility. These starting values cover the common cases:
- All-caps labels and buttons: +0.05em to +0.1em. Uppercase letterforms are uniform rectangles with no ascenders or descenders, so they need extra air to stay readable. This is the classic case for positive tracking — in Photoshop terms, tracking 50 to 100.
- Large headings: -0.01em to -0.03em. Most typefaces are spaced for body sizes, so at display sizes the gaps between letters look too wide. A slight negative value tightens headlines and makes them feel more deliberate. Go easy — beyond about -0.05em, letters start to collide.
- Body text: usually 0. Type designers have already optimized spacing for reading sizes. Leave paragraph text at the default unless a specific font genuinely needs correction; added tracking in body copy usually hurts reading speed.
- Small text and captions: slightly positive, around +0.01em to +0.02em. At 12px and below, letterforms crowd together and fine details blur. A touch of extra spacing restores legibility — the same reason print typographers letterspace footnotes.
Whatever values you settle on, define them in em and reuse them consistently across your type scale — spacing that shifts randomly between components reads as sloppiness even when no single value is wrong.
Frequently asked questions
What is Photoshop tracking 100 in CSS?
Photoshop tracking 100 equals letter-spacing: 0.1em in CSS. Photoshop measures tracking in thousandths of an em, so you divide by 1000: 100 ÷ 1000 = 0.1em. In pixels, that's 1.6px at a 16px font size or 3.2px at 32px. The same rule covers any value — tracking 50 is 0.05em, tracking 200 is 0.2em, and tracking -25 is -0.025em.
How do I convert Figma letter spacing to CSS?
It depends on the unit Figma shows. If it's a percentage, divide by 100 to get em: 5% becomes letter-spacing: 0.05em. If it's in px, you can use the pixel value directly in CSS — but only if the rendered font size matches the Figma layer. For spacing that scales, convert px to em by dividing by the font size: 0.8px on 16px text is 0.05em. This converter handles both directions.
Should letter-spacing use px or em in CSS?
Use em in almost every case. An em value is relative to the element's own font size, so the spacing scales proportionally when the text resizes — across breakpoints, in responsive headings, or when users change their browser font settings. A px value is fixed: tracking that looks right at one size becomes too loose or too tight at another. Reserve px for rare cases where an element's font size never changes.
What is the difference between tracking and kerning?
Tracking (letter spacing) adjusts the space between all letters in a range of text uniformly — that's what CSS letter-spacing controls. Kerning adjusts the space between one specific pair of letters, like the A and V in 'AVE', to correct awkward gaps. Kerning data lives inside the font file, and CSS applies it automatically via font-kerning; tracking is the designer's global adjustment on top.
Is negative letter spacing okay to use?
Yes, in moderation and mainly for large text. Slightly negative spacing — around -0.01em to -0.03em — tightens big headlines that would otherwise look airy, and it's a standard technique in modern interfaces. Avoid negative tracking on body text and small sizes, where it makes letters collide and hurts readability, and stay above roughly -0.05em even for display type.
How much letter spacing should uppercase text have?
Add +0.05em to +0.1em for all-caps text like labels, buttons, and navigation links — Photoshop tracking 50 to 100. Uppercase letters are uniform in height with no ascenders or descenders, so at default spacing they merge into a dense block. Extra tracking restores the distinct letter shapes readers rely on. The shorter and smaller the text, the closer to 0.1em you can go.
