title: Improving text readability with CSS
body: <p>I am trying to style <a href="http://codepen.io/anon/pen/pjxZRj" rel="noreferrer">this pen</a> and I can't quite get the right CSS for the text to make it more readable and not looking overcrowded. </p>
  
  <p>Core CSS:</p>
  
  <pre><code>p{
      color: #000;
      font-size: 16px;
      line-height: 1.25em;
      padding: 0 0 1em 0;
      text-align: justify;
  }
  </code></pre>
  
  <p>I plan to use the improved CSS both for the normal, desktop version and for mobile. Here's a screen of what I think is a great example of readability for mobile.</p>
  
  <p><a href="https://i.stack.imgur.com/hukEu.png" rel="noreferrer"><img src="https://i.stack.imgur.com/hukEu.png" alt="BBC mobile version"></a></p>