Convert letter-tracking value set in Photoshop to equivalent letter-spacing in CSS

Question

I am currently building a site from a PSD. Most of the fonts have a letter-tracking of -25 ( <- AV-> : I'm guessing that is the symbol for letter spacing?).

How would I get the same effect in CSS? I know the property is letter-spacing: X but it doesn't take percentages and -25px or pts would be a huge figure!

Answer 1

In Photoshop letter-spacing is called letter-tracking and is specifically the space between each letter of text. The problem is that Photoshop Letter Tracking doesn’t convert 1:1 to Letter Spacing in CSS.

It's very easy to calculate the conversion from Photoshop to CSS though.

Formulas to convert Photoshop Letter Tracking to CSS Letter-spacing

em Formula

    X / 1000 = Y

X is the value of the letter-tracking in Photoshop
Y is the value in "em" to use in CSS

Example

Consider the following example: Photoshop has a letter tracking value of 200..

200 / 1000 = 0.2

The result is 0.2em in CSS.

px Formula

If you prefer to use "px" values the formula is

    X * S / 1000 = P

X is equal to the letter-tracking value in Photoshop
S is the font-size in pixels
P is the resulted value in "px" to use in CSS

Example

Consider the following example: Photoshop has a letter tracking value of 200 and a font-size value of 10.

200 * 10 / 1000 = 2

The result is 2px in CSS.