: 12pt in Photoshop looks totally different in Web 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

@Holmes874

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

Vote Up Vote Down

@Michele215

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.

Vote Up Vote Down

@Shelley591

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


For a couple of reasons.


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.
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.
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.

Vote Up Vote Down

@Murray976

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.

Vote Up Vote Down

@Ogunnowo857

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

Vote Up Vote Down