1

I'm trying to understand the how CSS pixels relates to CSS points nowadays and what I've read is that one css point is a 3/4 pixel. Is that correct? And I can ignore the old idea that 1pt would be 1/72 of 1in because of difference in resolution and physical monitor sizes.

If I want to convert css points to pixels a formula could look like this then? Xpt/75*100 = Ypx

And if want to convert pixels to points the formula could look like this: Xpx -25% = Ypt

Tony Bolero
  • 281
  • 1
  • 2
  • 9
  • On print media, one `in` is one real physical inch, and the same applies to `pt` (1/72 `in`), `cm` (1/2.54 `in`), `mm`, etc. On screen, one `in` is defined as 96 `px`, so one `pt` is indeed 0.75 `px`. The real point is: don't mix units, as you may get different results on screen and when printing if you do. – jcaron May 03 '17 at 08:46
  • Yes, the reason I'm asking this question is about accessibility. WCAG 2.0 says it's ok for a lower color contrast for larger font sizes and they are talking about 18 points. So I need to know what 18 points really is if I don't want to use point as a measure. – Tony Bolero May 03 '17 at 08:53
  • Ref: *... the reason I'm asking this question is about accessibility...* - with all due respect, @TonyBolero: the reason you're asking this question is because you haven't (re)searched it first, which, according to [ask], is a prerequisite of asking on [so]. – tao May 03 '17 at 09:00
  • 1
    Actually, re-reading the actual spec, one `pt` is *always* 0.75 `px`. It may not be the same physical size on print and screen media, but it's always the same relationship. – jcaron May 03 '17 at 09:04
  • 1
    @TonyBolero you shouldn't be using a fixed font size if you are worried about accessibility, you should be using a relative font size so that if the users decides to change their default browser font size, the page will respect that and change the font sizes too - eg if you use a percentage for the font size, then as the font size of the browser is changed, the font size in your website will change too – Pete May 03 '17 at 09:06
  • Well, with all due respect Andrei Gheorghiu, I have done my research. :D I'm sitting here with four pages of research material about units and a couple of html-prototypes but they all come from single blogs etc and I have come to this wonderful place of expertise to validate some of the findings. – Tony Bolero May 03 '17 at 09:06
  • @Pete Yeah, you are right, I want to understand the relationship between points and pixels. – Tony Bolero May 03 '17 at 09:08

1 Answers1

2

It depends on your screen resolution and how many pixels per inch you have (often referred to as dpi instead of ppi) - as you say 1pt is 1/72 of an inch.

As most monitors are 96dpi that means that 1pt = 72 / 96 = 0.75 pixels

Pete
  • 57,112
  • 28
  • 117
  • 166
  • Yes, but this is the old definition of a point right? What I have understood is that since the birth of high resolution screens such as the Iphone retina displays *css pixels* has changed into something else than being the smallest physical unit in a display. Just so the browsers could handle different resolutions but still use pixels as a measure. – Tony Bolero May 03 '17 at 08:51
  • That's why you need to take into account the screen resolution, everything is the same, you just get more pixels per inch on some screens - eg I think retina can either be 2 times more or 4 times more – Pete May 03 '17 at 08:54
  • Yea, and that is why I could ignore the old rule that says that 1pt would be 1/72 of 1in because of difference in resolution and physical monitor sizes right? – Tony Bolero May 03 '17 at 08:55
  • Yeah probably, to be fair, I never use pt on a website. You're probably better asking this sort of question on https://graphicdesign.stackexchange.com/ – Pete May 03 '17 at 08:56