6XC

Letter Spacing Converter (Tracking → CSS)

Convert Photoshop/Illustrator tracking or Figma % letter spacing into CSS em and px values.

824 views

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. Enter whichever value your design file shows; the others update.

Prefer the em output in CSS — it scales with font size, so headings and captions keep proportional tracking from one rule. Typical ranges: −10 to −30 tracking for large display headings, +50 to +200 for small uppercase labels.

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, and read the em equivalent for scalable CSS.

Why does uppercase text need positive tracking?

Capitals are designed to be flanked by lowercase; set solid they look cramped. +5% to +15% (tracking 50-150) is the classic fix for all-caps labels.

Similar Tools

Cooking Measurement Converter Convert cups, tablespoons, teaspoons, fluid ounces, milliliters — and ounces, pounds, grams — for any recipe. Convert Currency Converter (Live ECB Rates) Convert between 30+ currencies — USD, EUR, GBP, TRY and more — using the European Central Bank's daily reference rates. Free, no sign-up. Convert Pounds to Kg Converter Convert pounds to kilograms and kg to lbs instantly — type in either field. 1 lb = 0.4536 kg. Convert Feet & Inches to Cm Converter Convert feet and inches to centimeters and back — height conversions like 5'9" to cm, instantly. Convert