5

Working on a site design where I'm trying to translate a tracking value of "100" to the CSS letter-spacing property.

When I specify a tracking value of "100", what am I saying? Definitely doesn't seem like percent or pixels.

I tend to eyeball to get what I want, but I'd rather run a conversion and not have to think about it if that's possible.

2

1 Answer 1

5

The answers given in the question linked to in AndrewH’s comment are correct.

As noted on this Photoshop help page:1

Tracking and kerning are both measured in 1/1000 em, a unit of measure that is relative to the current type size. In a 6‑point font, 1 em equals 6 points; in a 10‑point font, 1 em equals 10 points. Kerning and tracking are strictly proportional to the current type size.

In other words, you can achieve the same CSS letter-spacing by dividing the Photoshop tracking value by 1,000 and using the quotient, in ems, as the letter-spacing value.

1 The page linked to is for Photoshop, but the same holds true for all other Adobe products. According to Wikipedia, Quark has 1/200 em as its base unit.

2
  • Adding to this answer; if you use a letter spacing of 20 in InDesign/Illustrator/Photoshop that translates to CSS best using letter-spacing: calc(20rem/1000)
    – Kalaschnik
    May 22, 2021 at 11:49
  • @Kalaschnik Just saw your comment now – shouldn’t that calculation be using ems rather than rems? If the text has a size of 3rem, letter-spacing based on a rem calculation would be three times less than you were expecting. Jan 20, 2022 at 18:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.