Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Improving text readability with CSS

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.

BBC mobile version

like image 374
RockMyAlgorithm Avatar asked Nov 09 '15 02:11

RockMyAlgorithm


People also ask

What is text rendering in CSS?

The text-rendering property in CSS allows you to choose quality of text over speed (or vice versa) allowing you to fine tune optimization by suggesting to the browser as to how it should render text on the screen.


1 Answers

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

like image 167
Michael Benjamin Avatar answered Oct 13 '22 15:10

Michael Benjamin