Improving text readability with CSS

Question

I am trying to style this pen and I can't quite get the right CSS for the text to make it more readable and not looking overcrowded.

Core CSS:

p{
    color: #000;
    font-size: 16px;
    line-height: 1.25em;
    padding: 0 0 1em 0;
    text-align: justify;
}

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.

Solution

line-height, font-size, color are all good. I usually use color: #333 or color: #777 to create less contrast between a white background and black letters.

You may also want to consider letter-spacing, which creates a more "airy" sense with more whitespace between text characters:

h1 {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 5px;
    letter-spacing: .05em
}

p {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased !important;
  -moz-font-smoothing: antialiased !important;
  text-rendering: optimizelegibility !important;
  letter-spacing: .03em;
}

DEMO: http://codepen.io/anon/pen/ojaMEy

Comments

[RockMyAlgorithm]

I've tweaked it a little bit, the letter-spacing and color greatly helped. Plus, a thumbs-up from co-developers.

[hering]

You could add a width to the p element, as each line of text should contains 45 to 75 chars (35 to 50 on mobile devices): width: 30em; would fit this. You should also add a margin, so the text has no distractors - but this is rarely possible.