12pt in Photoshop looks totally different in Web


Question

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

1
7
12/31/2014 11:04:00 AM

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.

5
12/31/2014 2:35:00 PM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
^