title: CSS: 100% font size - 100% of what?
body: <p>There are <a href="http://www.alistapart.com/articles/howtosizetextincss" rel="noreferrer">many</a> <a href="http://www.w3.org/TR/CSS2/fonts.html#font-size-props" rel="noreferrer">articles</a> and <a href="https://stackoverflow.com/questions/132685/font-size-in-css-or-em">questions</a> about <a href="http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/" rel="noreferrer">percentage-sized vs other-sized</a> fonts. However, I can not find out WHAT the reference of the percent-value is supposed to be. I understand this is 'the same size in all browsers'. I also read this, for instance:</p>
  
  <blockquote>
    <p>Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.</p>
  </blockquote>
  
  <p>Source: <a href="http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/" rel="noreferrer">http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/</a></p>
  
  <p>But if you say "ie 12 pt = 100%", then it means you first have to define <code>font-size: 12pt</code>. Is that how it works? You first define a size in an absolute measure, and then refer to this as '100%'? Does not make a lot of sense, as many samples say it is useful to put:</p>
  
  <pre><code>body {
    font-size: 100%;
  }
  </code></pre>
  
  <p>So by doing this, <em>WHAT</em> is the font size relative to? I notice that the size I see on my screen differs for every font. Arial looks way bigger than Times New Roman, for instance. Also, if I would just do this, body size = 100%, would <em>that</em> mean that it will be the same on all browsers? Or only if I first define an absolute value? </p>
  
  <p><strong>UPDATE, SAT JUL 23</strong></p>
  
  <p>I am getting there, but please bear with me. </p>
  
  <p>So, the % value relates to the default browser font size, if I understand correctly. Well, that is nice but gives me again several other questions:</p>
  
  <ol>
  <li>Is this standard size always the same for every browser version, or do they vary between versions?</li>
  <li>I ! found (see image below) the settings for Google Chrome (never looked at this before!), and I see standard "serif", "sans-serif" and "monospace" settings. But how do I interpret this for other fonts? Say I define <code>font: 100% Georgia;</code>, what size will the browser take? Will it look up the standard size for serif, or has the "Georgia" font a standard size for the browser</li>
  <li>On several websites I <a href="http://www.alistapart.com/articles/howtosizetextincss" rel="noreferrer">read</a> things like <code>Sizing text and line-height in ems, with a percentage specified on the body [..], was shown to provide **accurate, resizable text across all browsers** in common use today</code>. But from what I am learning now I believe that you should actually choose between either resizable text (using % or em, like what they recommend in this quote), or having 'accurate, consistent font-sizes across browsers' (by using px or pt as a base). Is this correct? </li>
  </ol>
  
  <p>Google Settings:</p>
  
  <p><img src="https://i.stack.imgur.com/9dR1N.png" alt="Google Chrome Settinsg"></p>
  
  <p>This is how I <em>think</em> things <em>could</em> look like if you do not define the size in absolute values. </p>
  
  <p><img src="https://i.stack.imgur.com/GomGD.gif" alt="enter image description here"></p>