Boneyard Tools

Letter Spacing Calculator

Turn design-app tracking into CSS letter-spacing, or convert between px and em letter-spacing. Photoshop and Figma measure tracking in thousandths of an em, where 1000 equals one em, so dividing by 1000 gives the CSS em value.

How to convert tracking to letter-spacing

  1. Pick a mode: tracking to CSS, px to em, or em to px.
  2. Enter the tracking or value, and a font size if you want a px result.
  3. Copy the em or px letter-spacing for your stylesheet.

Examples

Tracking to em

tracking 50
0.05em

Tracking to px at 16px

tracking 50, 16px font
0.8px

Frequently asked questions

What is tracking in Photoshop and Figma?

Tracking is the uniform spacing added between characters, measured in thousandths of an em. A tracking value of 1000 equals one em, so a tracking of 50 is 50 divided by 1000, which is 0.05em.

How do I convert tracking to CSS letter-spacing?

Divide the tracking value by 1000 to get an em value, which you can use directly as letter-spacing. A tracking of 50 becomes letter-spacing of 0.05em. To get px, multiply that em value by the font size.

Should I use em or px for letter-spacing?

Em is usually better because the spacing scales with the font size, so the look holds at every size. Px gives a fixed amount of spacing regardless of font size, which can feel too loose on small text and too tight on large text.

How do I convert px letter-spacing to em?

Divide the px value by the font size in px. A letter-spacing of 0.8px on a 16px font is 0.8 divided by 16, which is 0.05em. Going the other way, multiply the em value by the font size.

Can letter-spacing be negative?

Yes. A negative value pulls characters closer together, which is common for large headings. The tool accepts negative tracking and values, so a tracking of -25 produces a letter-spacing of -0.025em.

Related tools