title: Google Font Letter Height Not Consistent
body: <p>I am having a weird issue in Chrome where a Google Font is showing inconsistent letter heights.  It only happens when I use <code>text-transform: uppercase</code> and it is fixed if I use <code>font-weight:bold</code>.  I have some example code, where you can see the <code>S</code> is too tall in the word <code>TESTING</code>:</p>
  
  <p><img src="https://i.stack.imgur.com/M18N8.jpg" alt="enter image description here"></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      font-family: 'Exo 2' !important;
      line-height:1.42857143;
  }
  div {
      width:40px;
  }
  span.upper {
      display:block;
      margin-top:20px;
      font-size:18px;
      text-transform:uppercase;
  }
  span {text-transform:uppercase; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="//fonts.googleapis.com/css?family=Exo+2:200,300,400,700,300italic,400italic,700italic|Raleway:200,300,400,600" rel="stylesheet" type="text/css"&gt;
      &lt;div&gt;
          Broken:&lt;br&gt;
          &lt;a href="#"&gt;
              &lt;span class="upper"&gt;Testing 123&lt;/span&gt; &lt;/a&gt;
          
          &lt;br&gt;Normal:&lt;br&gt;&lt;br&gt;
          &lt;span&gt;Testing 123&lt;/span&gt;
          
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If I change the font to <code>arial</code>, it's fixed. Is there some CSS property I need to reset so that the font will render correctly?</p>