7

we are creating a website right now in Photoshop and we are using 12pt for the fonts. But when we see the fonts in web with 12pt they look much bigger. It seems that we have to use 12px in web so it looks same or similar.

So my question is how can it be that 12pt in photoshop look different than 12pt in web?

Thanks

5

So my question is how can it be that 12pt in photoshop look different than 12pt in web?

For a couple of reasons.

  1. They are different mediums with different font-rendering engines. Put simply, Photoshop is not a web browser. It doesn't render based on CSS and HTML.

  2. Points, for measuring type, isn't an exact measurement. Points refer to the bounding box of the letter--not the letter itself. Differences in font files and rendering engines can contribute to that difference as well.

  3. DPI and Zoom levels in Photoshop vs. Zoom levels in the browser. They can simply vary.

Also keep in mind that you likely won't get your type match from browser to browser or even device to device. There are simply too many variables out of your control. As such, one should never assume that what they built in Photoshop will be what they see in the browser. Photoshop simply isn't a web page. It's fine as a starting point, but don't treat it as an immovable blueprint.

1

The rendered font size (at a zoom level of 100 %) depends on the dpi settings of your image, too.

Try one of those:

  • old school standard for web graphics: 72 dpi
  • usual desktop displays: 96 dpi
1

Adding to Scott's answer, the reason the font size is very different in Photoshop or web could be because Photoshop uses points, while web uses pixels (or ems, which I would strongly recommend against px).

The calculation for the relationship would be something like:

Font size in pixels / font size in points = browser dpi (96) / Photoshop image resolution (ppi or points per inch)

So, if you have a Photoshop image with 13pt font at 72 ppi, the corresponding font size in pixels for display in a web browser is

Font size in pixels = (13/72)*96 = 17.3 px

You can see a conversion table here.

1

Photoshop & Browser both are different so it is possible in text size. i also have this problem so i Google it and find http://pxtoem.com You can see it how font size work and which font size you can use for your text.

  • Your link is broken. – Wrzlprmft Jan 26 '15 at 12:01
  • 1
    Should be http://, not https://. – Devin Jan 26 '15 at 12:37
  • Ok Link corrected. – Rafael Jan 26 '15 at 20:39
0

You have to remember that PhotoShop is built differently than a browser, so what is 12 px in PhotoShop might be 14 px on a website online. Even browsers sometimes display things oddly or move an element 2 px to the right.

When your browser renders a website, it uses px instead of pt. Nothing will look the same on everything, just strive for it to look good.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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