Search code examples
cssmobile-website

Be confused with 'pt'

I'm working on mobile webApp development these days, and I have read some article about it, but the description here confused me.

Points are abstract units, they only make sense in this mathematical coordinate space.

So it means points are like density-independent pixel? Some place use 375pt * 627pt to describe the iPhone6 and many articles about design use pt as a unit.

And the description of pt as a css unit from CSS Trick.

A point is a unit of measurement used for real-life ink-on-paper typography. 72pts = one inch. One inch = one real-life inch like-on-a-ruler. Not an inch on a screen, which is totally arbitrary based on resolution.

And I remember there is a formula like 1px = 0.75pt. So I can't tell which points are they talking about.

  • Are these point the same one?
  • iPhone6 has 375px * 627px css pixels (when set initial-scale to 1.0), so why some place use pt?
  • Does the number 12pt in designers' article means 12px?
Solution

  • Designers makes designs with the theory of 1pt == 1px (in photoshop is the same in most configurations), but in the real web world this isn't correct because 1 point is not 1 pixel.

    • The pt unit in CSS is recommended to use only in printer versions of a page (because the relations with the inches).
    • iPhone6 has got that resolution but if you change to points it may crash sometimes, in most devices.
    • Maybe yes, but don't trust designers that thinks in web the pt is the same as px, that doesn't real.

    Here you are an interesting article from W3C:

    https://www.w3.org/Style/Examples/007/units.en.html