Making Web Text Easier to Read
I do a lot of reading online, and the disregard for readability that’s out there is killing me. While some designers intentionally make bad websites (yellow text on blue backgrounds, anyone?), the default settings can be just as tiring. Without touching anything, your site is probably going to end up with a 12-pixel Times New Roman font with black text on a white background:
This looks okay, but when you have to scroll throw twenty paragraphs of that, you really start to feel the strain. The text is too small. The contrast is too bright. But you’re told not to play too much with these values in the name of accessibility. When it comes to web design, though, even small changes make big differences. Look what happens when we up the font size by three pixels and give the background a very subtle tint of gray (hash code #FAFAFA):
This is much easier on the eyes, but there are still some small tweaks we can add to the text. The following example has a letter spacing of 1/2 pixel and a line height of 120%:
We’re getting more readable text but are now reaching a point where it doesn’t look professional anymore. Times New Roman is an ugly font, and yet there aren’t a lot of “web safe” alternatives to choose from. I personally prefer Trebuchet MS, but we could still stick with Times and use one last trick to make it look nice: toning down the darkness of the text itself (with color hash #1C1C1C).
Compared to what we started with, the text is very readable and nice-looking, and all we had to do was adjust a few values by minor increments. Here’s the complete CSS code:
background-color: #FAFAFA;
color: #1C1C1C;
font-size: 17px;
letter-spacing: 0.5px;
line-height: 120%;
Comment: