Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
I want Photoshop to render fonts like a browser. TypeKit is being used on the web site, but the default kerning/letter spacing is different between the two.
Can I use exactly the font Typekit is generating or in some other way achieve parity between the two?
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 :)
