This letter spacing converter translates the tracking values used in Figma, Photoshop, and Illustrator into CSS letter-spacing values. Every design tool measures letter spacing differently, which makes handoff confusing — this tool resolves all of them into clean CSS in one step.
letter-spacing: -0.025emletter-spacing: -0.02emletter-spacing: -0.031emLetter spacing looks natural when it stays proportional to the font size. Setting it in em preserves that ratio automatically, so the typographic density stays consistent even when font sizes change across responsive breakpoints. A fixed px value tends to look too tight on large headings and too loose on small captions.
Many modern sans-serif fonts (such as Noto Sans or Pretendard) ship with fairly loose default spacing, so body text often reads better with a slightly negative value around -0.02em to -0.05em. Large display text usually needs even tighter spacing to look visually balanced. In contrast, all-caps labels and buttons are easier to read with wider spacing, typically 0.05em to 0.1em.
Divide the Photoshop or Illustrator tracking value by 1000 to get em. A tracking of -25 is letter-spacing: -0.025em.
Divide the Figma percentage by 100 to get em. -2% is letter-spacing: -0.02em.
Use em. The spacing ratio is preserved automatically whenever the font size changes.
For most sans-serif body text, a slightly negative value between -0.02em and -0.05em works well. Headings are often set tighter than body text.