px vs rem in font-size

Quick notes for future reference. Recomended reading: Josh Comeau article.

  • whatever font size is set on html is what rem is relative to
  • percentages in font-size are equivalent to using em/100
  • except on html, because there’s no parent, so it refers to the browser font scaling, which is 16px by default on major browsers, but can be scaled to be 9 <= x <= 72 in settings
  • browser zooming additively scales everything, on top of browser font scaling
  • scaling (browser settings) and zooming (⌘+/-) are different things
  • almost all websites do not respect browser scaling, because they set a hard-coded font-size on html, or use px which opts out of scaling entirely
    • Only cnn.com did this well, by scaling the main content (using rem) and leaving supplemental and navigation text unaffected
  • when browser scaling is ignored, there’s no a11y reason to use rem over px