title: Inconsistency paragraphs textsize
body: <p>I have the following html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt; Lorem Ipsum &lt;/title&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/util.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/styles.css"&gt;
      &lt;link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="frameT"&gt;
          &lt;div class="frameTC"&gt;
              &lt;div class="clearfix quote"&gt;
                  &lt;p id="quote"&gt;
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus arcu leo, viverra vel sodales vitae, ornare eget sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent a orci at nisi pellentesque pharetra. Vivamus in interdum ex, sed accumsan mi. Etiam auctor ante dui, vel ornare diam sollicitudin non.
                  &lt;/p&gt;
                  &lt;p id="name"&gt; - Lorem Ipsum&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And the following CSS</p>
  
  <pre><code>html {
      font-size: 62.5%;
  }
  
  body {
      font-family: 'Open Sans', sans-serif;
  }
  
  .frameT {
      display: table;
      position: absolute;
      height: 100%;
      width: 100%;
  }
  
  .frameTC {
      display: table-cell;
      vertical-align: middle;
  }
  
  .quote {
      margin: 0 auto;
      padding: 1rem;
      max-width: 69.5rem;
      width: 65%;
  }
  
  #quote {
      float: left;
  
      font-size: 1.8rem;
      font-weight: 600;
      line-height: 2.2rem;
      color: #777;
  }
  
  #name {
      float: right;
      font-size: 1.6rem;
      font-weight: 600;
      line-height: 3.2rem;
      color: #2ac;
  }
  </code></pre>
  
  <p>On desktop it looks fine and the bottom text is the size it should be. On mobile however the bottom paragraph is tiny. At first I had it in a span, but that didn't seem to cause it. When inspecting the paragraph on mobile using Developer Tools the css is normal but the visual isn't.</p>
  
  <p>EDIT: Here's how it looks on mobile for me <a href="http://puu.sh/mpTsJ/927670b8e7.jpg" rel="nofollow">http://puu.sh/mpTsJ/927670b8e7.jpg</a></p>
  
  <p>EDIT2: Found out that it has to do with the amount of text in the paragraph. Seems like around 140 characters the text becomes big on mobile even though the real font-size doesn't change.</p>