A word on Font Size

  • Users can also change the size on their browsers Cmd/Ctl + or -
  • Options:
    • Relative values (larger - smaller) specifies a font-size one degree different than the parent element
    • Absolute values (xx-small - xx-large)
      • 36 is between x-large and xx-large
      • (9-36) pixels, points, ems, etc (pixels tend to translate better from browser to browser over points but ems and pecentages are best)
      • The default font size on an html page is 16px
    • Note that specifying size in absolute values such as points and pixels is very problematic. 9pt text on a Windows computer might look acceptable, but may be illegible on a Macintosh
    • Ems are based the root value of the outer container. Rems are the based on the root value of the page:
      • If the font size of the page is 16px and words are typed in a div set to 24px then 1em would be 24px
      • If the font size of the page is 16px and words are typed in a div set to 24px then 1rem would be 16px