Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I notice no one has touched on how <code>em</code> works as a font size unit, so I'll try to clear that up for you.</p> <p>There are two ways to tell the browser how large your fonts should be rendered. </p> <ol> <li>setting an <em>absolute</em> size<br> For <em>absolute</em> sizes, like <code>px</code> or <code>pt</code>, you're telling the browser exactly what size you want the text to be. If you write <code>12px</code>, it's going to come out as exactly 12 pixels tall.</li> <li>setting a <strong>relative</strong> size — <code>em</code> is a <strong>relative</strong> size.<br> For <strong>relative</strong> sizes, like <strong><code>em</code></strong>, you're telling the browser how big to make the text with respect to other text on the page. This works sort of like a percentage, so if your footer text is sized at <strong><code>0.8em</code></strong>, it will be rendered 80% as tall as the main text on the page.</li> </ol> <p>This explains why you're getting different sizes on different pages. If the font size of the body is set explicitly on one page, but not set at all on another (or set explicitly to a different size) that will make your <code>em</code>-sized fonts render at different sizes.</p> <p>This is also why it's really bad to use <code>&lt;font&gt;</code> tags. It's going to be a serious pain to dig around those tags and figure out what explicit sizes are being set that might be throwing off your <code>em</code>s.<br> When you set your font sizes using CSS, this is not only an information which is easy to find, but also a property which is easy to modify.</p>
 

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