Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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?

share|improve this question
1  
If you have Dreamweaver, consider this workflow from a question about sub-pixel rendering –  JohnB Dec 9 '13 at 22:57
1  
The real question you need to ask yourself is "Which Browser?" We're making strides, but there's still going to be differences from browser to browser in the appearance of your text. See this: webtype.com/info/articles/web-font-quality –  TunaMaxx Dec 10 '13 at 0:21
    
Tuna, your question got me thinking like a developer: it should be technically possible to overlay a browser on top of the Photoshop artboard/canvas so that it IS actually rendering in the browser. They could call them web layers... –  BrianV Dec 10 '13 at 0:43

1 Answer 1

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 :)

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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