title: responsive typography
body: <p>i have read different articles about responsive typography but have not found a good practice to adopt. If I have to optimize my webapp for these resolutions with a font-size for everyone in graphic source:</p>
  
  <p>320x480 -> 12px</p>
  
  <p>480x800 -> 20px</p>
  
  <p>540x960 -> 26px</p>
  
  <p>720x1280 -> 26px</p>
  
  <p>after my reading I have put in css file this:</p>
  
  <pre><code>html { font-size: 100%; -webkit-text-size-adjust: 100%; 
                            -ms-text-size-adjust: 100%; }
  </code></pre>
  
  <p>then with the Ethan Marcotte's formula I have calculated my first font-size:</p>
  
  <pre><code>body{font-size: 0.75em;/*12px/16px */}
  </code></pre>
  
  <p>then with the mediaqueries I have augmented the font-size for the html attribute:</p>
  
  <pre><code>/* ===== == = === 30em (480px) === = == ===== */
  @media only screen and (min-width : 30em) {
     body{font-size: 125%;}/*20px*/
  }
  /* ===== == = === 37.5em (600px) === = == ===== */
  @media only screen and (min-width: 37.5em) {
      body{font-size: 163%;}/*26px*/
  }
  </code></pre>
  
  <p>Is this a good practice to adapt my font to different resolutions?
  Do you have good practical examples where can I find this information?</p>
  
  <p>Thanks in advance!!!</p>