How big in 1pt?

Benjirich picture Benjirich · Mar 18, 2014 · Viewed 10.7k times · Source

i really need to know this. Everyone (hopefully) knows that dpi dont matter on the web, it doesnt matter if you save and image with 4000 or just 1 dpi, you computer just shows it point to pixel. Now, what about css and font size in pt? Many websites say that windows uses 96 dpi and mac 72 what means that 1 pt on mac is 1 px and on windows 1,333 px. But this makes no sense, the os has nothing to do with any resolutions, only the screen has PPI, not dpi. And the ppi depend on the screen.

Is it true that 1pt is 1px on mac and 1,333px on pc?

Answer

SW4 picture SW4 · Mar 18, 2014

This is quite a good read on the subject

Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.

See this article from W3C

The so-called absolute units (cm, mm, in, pt and pc) mean the same in CSS as everywhere else. A length expressed in any of these will appear as exactly that size (within the precision of the hardware and software). They are not recommended for use on screen, because screen sizes vary so much. A big screen may be 60cm (24in), a small, portable screen is maybe only 8cm. And you don't look at them from the same distance.

The relation between the absolute units is as follows: 1in = 2.54cm = 25.4mm = 72pt = 6pc

As such on a 72 PPI (pixels per inch) display, 1 pixel=1 point, so yes on a Mac if PPI is 72, 1pt = 1px, and on a Windows machine if PPI is 96, then 1pt=1.3'px.

The 72 for mac and 96 for Windows are only defaults however, and may vary depending on available hardware and system settings.

Points are for print? Nope.

Points are not for print exclusively. Theoretically, points are for defining an absolute measure. Pixels are not absolute, since depending on your screen and chosen definition (not resolution), the resolution (pixels per inch) can go from a lot (150dpi) or very little (75dpi). Which means your pixels can be a size, or maybe half that size. Which means that text you design to be perfectly legible on your screen may look too big on your client’s screen (“please make the text smaller, ok?”) or too small to be readable on your neighbor’s screen (“hey, the website you told me about the other day? the one you said you had worked on… well i couldn’t read the text very well, it’s so small”).

Points are a solution to this issue. But browsers and operating systems need to manage those. Basically, it means:

browsers have to calculate the display size in pixels using the given value (say, 10pt) and the screen’s real resolution; operating systems have to communicate the real current resolution, and not a default value.

Also, take a look at this question, and this article