title: Pixel density, retina display and font-size in CSS
body: <p>I don't have a Retina MacBook myself to test these things out, and there seems to be a lot of confusion on the internet about web design on high pixel density displays.</p>
  
  <p>Now, I assume that WebKit on a MacBook with Retina display scales the page about twice it's size as most web pages are not built to adapt to the higher pixel density?</p>
  
  <p>In my view the ideal case when designing for these, or actually any type of display is to use ems instead of pixels as you could just do;</p>
  
  <pre><code>@media
  only screen and (-webkit-min-device-pixel-ratio : 1.5),
  only screen and (min-device-pixel-ratio : 1.5) {
      body { font-size: 150%; }
  }
  
  @media
  only screen and (-webkit-min-device-pixel-ratio : 2),
  only screen and (min-device-pixel-ratio : 2) {
      body { font-size: 200%; }
  }
  </code></pre>
  
  <p>and the whole page would scale accordingly. Or would it? Is the default font-size on browsers running on Retina MacBooks still 16px or is it higher? Because if it's higher, the scaling effect would multiply.</p>
  
  <p>I guess my question is; if I use ems consistently, the only thing I should need to do is to change the font-size for every device-pixel-ratio?</p>