Whatever you do in styling your text, make sure that readability is right at the top of your considerations. Some fonts are just easier to read than others, and the more text you will have on your page, the more this matters.
Just because something is legible doesn’t mean it’s readable. Legibility means that text can be interpreted, but that’s like saying tree bark is edible. We’re aiming higher. Readability combines the emotional impact of a design (or lack thereof ) with the amount of effort it presumably takes to read. You’ve heard of TL;DR (too long; didn’t read)? Length isn’t the only detractor to reading; poor typography is one too.
Jason Santa Maria, How We Read, excerpt at A List Apart
A page that displays a long article should be styled carefully to make it easy on the eyes - and easy to read. Don't muck up your page design with lots of different fonts: a few is good! And contrast between the body font and the headline font is another good practice.
While you'll find recommendations that serif fonts are for print and sans-serif fonts are for screens, both categories of fonts are used today for print and screens, which have improved resolution compared to not so long ago. Serifs are the little "feet" or "flags" on letters that seem to help in reading, as they serve to connect the letters in a word. A sans-serif font has simpler letter forms with out the serifs.
Common serif fonts:
Common sans-serif fonts:
Even though the fonts listed above share the same font-size declaration, their appearance, and even the size of the bullets varies! It can be tricky to mix fonts on a page!
All Caps, and even Small Caps, are harder for some people to read because all words present as rectangles with no ascenders or descenders to give the words unique shapes. I prefer to use Uppercase and Small Caps sparingly -- perhaps for headings, but certainly not for body text. Likewise, italic fonts (real or synthesized) may be more difficult to read and should probably be reserved for adding emphasis or indicating a title, scientific name, or other special notation.
White space is important for readability as well. Line-height is the property that corresponds to "leading" in print layout. Back in the typesetting days, a thin strip of the metal lead was placed between rows of type. The typesetter could use more than one strip or a thicker strip to control the vertical spacing of the type. On typewriters we had only single, double, and maybe one-and-a-half line-spacing. With css this is a property with infinite possible settings, but we must discover the right amount for a particular font and font-size.
The length of each line of type affects the optimal vertical spacing. In a narrow column of type, the lines can be closer together. When the lines of type run the full width of a larger screen, we appreciate more white space to guide our eyes back to the start of the next line. There is a limit to how wide a block of text should be. Sometimes text is formatted in two or more columns to increase it's readability. A value of 40-60 characters per line is said to be optimal, depending on audience, content and font.
Justifying both left and right edges of text can make the text harder to read as distracting "rivers of white" may appear where the extra space inserted between words lines up with extra space above and below. This can be an accessibility issue as well as the extra white space can make reading more difficult for dyslexic and partially sighted users who use screen magnification can be confused or distracted by the extra white space.
Accessibility and usability are very important factors in modern website development. Doing anything that excludes or hinders certain users, reduces the audience and therefore the overall success of a website.
Andy Reading on Castlegate IT News