5 ms·

Font sizes are even better if defined in PT instead of PX!

by err4nt 11y ago

chrismorgan 11y ago
Eh, 16px = 12pt, simple 4:3 ratio, why bother with the pt unit at all?
- theandrewbailey 11y ago
  16px will always be 16px, unless you redefine CSS pixel size. pt is more scalable.
  - err4nt 11y ago
    CSS 'px' units don't map directly 1:1 with pixels in your screen, it's weird. :/ In general, CSS 'PX' is great for spacing inside and outside containers. I often use 5px or 15px padding in places that don't directly touch or contain text. Where text is involved I like to define my spacing in 'em' units because those are relative to the 'font-size', so if I change the font size the spacing will still look great!
- err4nt 11y ago
  I come from a graphic design background with training in typography. While you _can_ specify font-size in any units CSS understands, typography as a field has traditionally used PT and EM units for sizing and spacing. - for container size I use % or PX - for margins, spacing, and padding I use EM or PX - for text sizes I use PT or % Here's a short, good primer for typography on the web: http://www.markboulton.co.uk/journal/five-simple-steps-to-better-typography http://www.markboulton.co.uk/journal/five-simple-steps-to-be...
- leni536 11y ago
  Yeah, on 96 DPI. Anywhere else you rely on browser scaling if you don't use pt. Edit: Ok, so I'm not a web developer, so I read after it: http://www.w3.org/Style/Examples/007/units.en.html http://www.w3.org/Style/Examples/007/units.en.html Turns out I'm wrong about that 1px is required to be 1 device pixel. But the 3/4 rule is not universal and only applies to print. I don't know how different implementations handle this.
  - err4nt 11y ago
    CSS 'pixels' are a dark, dark magic, come back to the light! CSS pixels are a measure of your viewing angle, the physical measurement of the device, and your screen's pixel density. Basically 15px should look like 15px should look like 15px, no matter what you're looking at, but because the actual pixel densities of screens differ it can be really weird to think about. You may need a 30px icon to display 15px wide on a retina screen, even though it sounds like a 15px image should be 100% large (and therefore crisp) at 15px in CSS.

Font sizes are even better if defined in PT instead of PX!

by err4nt 11y ago

Font sizes are even better if defined in PT instead of PX!

chrismorgan 11y ago

Eh, 16px = 12pt, simple 4:3 ratio, why bother with the pt unit at all?

theandrewbailey 11y ago
16px will always be 16px, unless you redefine CSS pixel size. pt is more scalable.
- err4nt 11y ago
  CSS 'px' units don't map directly 1:1 with pixels in your screen, it's weird. :/ In general, CSS 'PX' is great for spacing inside and outside containers. I often use 5px or 15px padding in places that don't directly touch or contain text. Where text is involved I like to define my spacing in 'em' units because those are relative to the 'font-size', so if I change the font size the spacing will still look great!
err4nt 11y ago
I come from a graphic design background with training in typography. While you _can_ specify font-size in any units CSS understands, typography as a field has traditionally used PT and EM units for sizing and spacing. - for container size I use % or PX - for margins, spacing, and padding I use EM or PX - for text sizes I use PT or % Here's a short, good primer for typography on the web: http://www.markboulton.co.uk/journal/five-simple-steps-to-better-typography http://www.markboulton.co.uk/journal/five-simple-steps-to-be...
leni536 11y ago
Yeah, on 96 DPI. Anywhere else you rely on browser scaling if you don't use pt. Edit: Ok, so I'm not a web developer, so I read after it: http://www.w3.org/Style/Examples/007/units.en.html http://www.w3.org/Style/Examples/007/units.en.html Turns out I'm wrong about that 1px is required to be 1 device pixel. But the 3/4 rule is not universal and only applies to print. I don't know how different implementations handle this.
- err4nt 11y ago
  CSS 'pixels' are a dark, dark magic, come back to the light! CSS pixels are a measure of your viewing angle, the physical measurement of the device, and your screen's pixel density. Basically 15px should look like 15px should look like 15px, no matter what you're looking at, but because the actual pixel densities of screens differ it can be really weird to think about. You may need a 30px icon to display 15px wide on a retina screen, even though it sounds like a 15px image should be 100% large (and therefore crisp) at 15px in CSS.