Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>John B's answer above is the best and most accurate. I just wanted to point out a possible confusion created by the answer above his. An "em" in typography is the width of the letter "m" in the font that you've chosen. To specify height for a font, printers/typesetters used the "x height", which is the height of the lower case x for a font.</p> <p>As John points out, pt's are a fixed unit of measure equal to 1/72nd of an inch. Since monitors have varying pixel densities (72/inch, 96/inch...) it isn't generally a good way to size things in HTML docs.</p> <p>The em relates directly to the old typography unit and makes an excellent relative measure. As your screen size is scaled, the font sizes scale with it. If you use em's for margins, they scale relative to your font sizes, which is generally a good thing. </p> <p>But, for margins, padding and all things not directly font related, it's best to use rem's, or "relative ems". The best way to do this is declare a default font size for your body or html tag initially. Something like body font-size = 16px is a good place to start. Then everywhere else in the document use em's for text, and rem's for everything else. Or, use percentages. Either will work fine. Like em's and rem's, your % is relative to that original 16px = 100% font size.</p> <p>Everything in the document will scale relative to your initial setting for your 100% font size at 16px. That way you only use a pixel measurement once in the document. This comes in handy if you later want to set media queries to adjust your sizes and margins to accommodate different pixel densities across different device displays. You only have to have queries for that one initial declaration in the body tag. Everything else will adjust relative to that and won't need to be changed.</p> <p>just a thought, maxw3st</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload