Letter Spacing Converter (Tracking to CSS)
Convert letter spacing between Photoshop or Illustrator tracking (1/1000 em), Figma %, px, pt and CSS em or rem, for any font size, with a size table.
CSS adds the space after every letter, including the last one, which can push centered text slightly to the left; design tools differ in whether they add it to the last letter.
Prefer em in CSS: the spacing then stays in proportion when the font size changes.
| Font size (px) | Spacing (px) | Spacing (pt) |
|---|---|---|
| 10 | 0.5 | 0.375 |
| 12 | 0.6 | 0.45 |
| 14 | 0.7 | 0.525 |
| 16 | 0.8 | 0.6 |
| 18 | 0.9 | 0.675 |
| 20 | 1 | 0.75 |
| 24 | 1.2 | 0.9 |
| 32 | 1.6 | 1.2 |
| 48 | 2.4 | 1.8 |
| 64 | 3.2 | 2.4 |
| 72 | 3.6 | 2.7 |
Every design tool measures letter spacing differently. Photoshop, Illustrator and InDesign use tracking in thousandths of an em, Figma shows a percentage of the font size, Sketch and many developers think in pixels, and CSS needs em, px or rem. This converter turns any one of them into all the others for your font size, writes the CSS line, and shows how the same spacing works out at other sizes.
How to use this tool
- Enter the spacing value from your design file.
- Choose its unit: tracking, Figma %, em, px, pt or rem.
- Enter the font size the spacing belongs to.
- Copy the CSS letter-spacing value; use the table for other text sizes.
Formula
em = tracking ÷ 1000 = percent ÷ 100 = px ÷ font size (px); px = em × font size
Tracking and Figma percentages are relative to the font size, like CSS em, so they convert without knowing the size. Pixels and points are absolute, so they need the font size: 1 pt = 4/3 px. rem is relative to the root font size (usually 16 px), not to the text itself. Negative values tighten the letters.
Example
A designer sets tracking 50 on 16 px text. That is 50 ÷ 1000 = 0.05 em, which is 0.8 px at 16 px, 5% in Figma and 0.6 pt. In CSS write letter-spacing: 0.05em. A Figma heading at −2% on 32 px text becomes −0.02 em, or −0.64 px, which is tracking −20 in Photoshop.
Frequently asked questions
What unit should I use for letter-spacing in CSS?
em, in most cases. It keeps the spacing in proportion to the font size, so headings and body text that share a style still look right at any size.
Is Figma’s percentage the same as CSS em?
Yes, scaled by 100: Figma 5% is 0.05em. Figma’s pixel letter spacing is the same as CSS px.
Why does my centered text look off-center after adding letter-spacing?
CSS adds the extra space after every letter, including the last one, so the text gains a gap on the right. Some designers add a matching negative margin or padding to rebalance it.
Last updated:
Page address with these inputs: https://kakao.mobile/tools/letter-spacing-calculator/
Cite or embed this tool
kakaoCalc. (2026, November 8). Letter Spacing Converter (Tracking to CSS). https://kakao.mobile/tools/letter-spacing-calculator/
“Letter Spacing Converter (Tracking to CSS).” kakaoCalc, 8 Nov. 2026, kakao.mobile/tools/letter-spacing-calculator/.
Paste this code into your page. The widget runs in your visitors' browsers, shows no ads and keeps a link back to this page. Embedding terms