: Making Photoshop render font kerning and letter spacing like a browser I want Photoshop to render fonts like a browser. TypeKit is being used on the web site, but the default kerning/letter

@Voss6371140

According to this very interesting article, one of the issues between Photoshop kerning and CSS kerning is that Photoshop doesn't show the unit used for the letter spacing setting.

The value is based on the font-size, and the article's author claims to have found that a value in Photoshop of 1000 is equal to 1em in CSS.


X / 1000 = Y Where X is the value of the letter-spacing in Photoshop
and Y is the value in em to use in CSS


So to get the same result in pixels instead of ems, the formula is:


X * S / 1000 = P Where X is equal to the letter-spacing value in
Photoshop, S is the font-size in pixels (which is equal to the value
in point provided you're working in 72dpi) and P is the resulted value
in px to use in CSS


The other issue is the rounding-up of pixels.

When using em (or an other relative unit) some browsers (Chrome, IE6~8, Opera and Safari) will compute that value into pixels and eventually round it up, down or to the closest integer.

The article explains it much better than me :)

Vote Up Vote Down