There is much confusion in my organization around how many pixels are in a point and I have gone down a deep rabbit hole and I still do not have an answer to some questions which I am posting here...
First off, there are obvious differences between "physical pixels/device pixels" and CSS Pixels. As are there differences between "physical points" and point units on iOS.
This is a survey of what I have discovered:
on iOS What is pixel and points in iPhone?
- 1 iOS point is equal to 1 physical pixel on a 1x device.
- iOS points are used as an abstract unit for density independent pixels in which 1 iOS point is equal to 1 density independent pixel.
Android What is the difference between "px", "dip", "dp" and "sp"?
- 1 android point does not equal 1 physical pixel on a 1x device.
- 1 android point equals 1/72 of an inch.
- 1 dp is used as a density independent pixel.
Web https://www.w3.org/Style/Examples/007/units.en.html
- 1 CSS point does not equal 1 physical pixel on a 1x device.
- Obviously CSS points are listed units are NOT RECOMMENDED.
Sketch
- According to Sketch units are by default in points and 1 point is equal to 1 pixel.
InVision
- 1 point is equal to 1 pixel.
I have also come across this formula:
pixel = point * resolution (in terms of dpi) / 72
In which obviously the number of physical pixels in a point is variable...
So, my question is:
- Why is 1 CSS point equal to 1.333 CSS pixels?