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?

  • 1
    If you have Dreamweaver, consider this workflow from a question about sub-pixel rendering
    – JohnB
    Dec 9, 2013 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, 2013 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, 2013 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 :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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