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

You can use the em dimension instead of px, thus sizing the spacing relative to the font size (so photoshop's 25% is somewhere around .25em).

Answer 2

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.

Answer 3

In contexts like this, unitless numbers usually imply a typographic unit that is a small fraction of the em unit. It’s usually called just “unit”. The value of this unit depends on the font, and it is expressed as a UPM (units per em) value. The common UPM value is 1,000, but Microsoft fonts have 2,048, and other values occur too. (This issue is described in some detail in the article UPM value of 1000 set in stone?)

Assuming an UPM value of 1,000, -25 would map to -0.025em. Setting letter-spacing: -0.025em tends to have a rather small effect: a longish text line becomes about one “i” shorter. The effect you get using CSS should not be expected to be same as in PhotoShop; the rendering mechanisms of PhotoShop differ from those of browsers.

Answer 4

If your problem is simply with the unit conversion, you can use em instead of px

Although em allows decimal numbers, it doesn't change the rendering accuracy. 0.5px or equivalent accuracy is not shown on browsers - it'll become either 0 or 1px. Simply because a screen can't show half a pixel, at best it can aproximate that with anti-aliasing.

For smaller fonts the anti-aliasing would probably look worse than the spacing. Another option is finding a web-font that has the spacing you want by default. This way you would get similar results to what you want, but would probably mean changing the font.

The CSS spacing is simply not as accurate as photoshop. One reason is that photoshop renders for printing also - with screen/pixel resolutions you have to live with pixel accuracy. Although theoretically it would be possible with letter spacing that becomes more accurate on zooming etc i don't know of any implementation that would actually work that way.

If correct letter spacing is really important for you, you could try to use SIFR to render the fonts spacing more accurately than what the browser is capable of - they might be able to use changing anti-aliasing. Obviously this would only make sense if the letter-spacing is a big issue.