Please explain why in Photoshop setting a font size to 16pt or 16px looks exactly the same size but if I do the same test on a web site, the font-sizes are VERY different.

Example on the web

Web example of 16px and 16pt

Why would Photoshop consider 1px = 1pt but the web show them as very different sizes? What are they doing differently?

  • 1
    My question is different because I want to understand why Photoshop treats PX the same as PT, where the web does not. – Justin Dec 10 '15 at 19:47
  • Actually, the post @JohnManly suggested does seem to answer your question. But I could ask why are you using point values in Photoshop when designing for web? Best practice would be to have Photoshop and the CSS use pixel values instead, right? – paulmz Dec 10 '15 at 19:54
  • I am a developer who got a design from a graphic artist who used PT. He said he always uses PT and photoshop doesn't show it any different regardless which unit he uses. So, as someone who works with the web, I want to know why the heck Photoshop would treat them as the same when they are actually not 1 to 1. – Justin Dec 10 '15 at 19:58
  • It treats them the same at certain resolutions (ppi). If you change your PSD to let's say 300ppi then you'll very quickly see that 1pt does NOT equal 1px. General rule of thumb is that two different units of measurement are never equal, otherwise there'd be no point in have two different units of measurement. Please always work in pixels for web, I've had to go back to designers and have them redo their designs because the pixel values came back in weird fractions, etc. (Another relevant question) – Hanna Dec 10 '15 at 20:22
  • @justin: to help (or add) to the confusion, in most web-contexts, inches simply do not exist, so the idea of a 1:1 relationship to PT size and pixel size is hard to maintain. A 52 inch TV 1080p and a 21inch monitor at 1080p are both 1920x1080 pixels precisely. One is clearly larger in inches. – Yorik Dec 10 '15 at 20:35

Photoshop does not treat 1px = 1 pt. Except at a specific situation.

This is when the image is set to 72 ppi + you are using pt as a unit + you have the point/pica set to 72 pt/inch.

The explanation is that if you set the ppi to 72, it matches the idea that you can have 72 points on each inch.

You can see this in action changing this values in Photoshop (units and ppi resolution) Put for example your document at 300ppi and you will se a really big font at the same 72 pts.

On a windows environment the overall settings could be at 96 ppi which does not match that 72 criteria.

In fact on a web it is very difficult to set real phisical units, some devices are now declaring the pixel density, which gives a clue on what are the real life dimensions, but not all of them.

| improve this answer | |

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