Which web-safe fonts are more readable to eyes as a body text? Which web-safe fonts should not be used?

Question

Which web-safe fonts are more readable to eyes as a body text? Which web-safe fonts should not be used?

What should be the minimum font size of <p>body text</p> for better readability?

What font size should we use for <H1/2/3/4/5/6>, <p> <ul>, <ol>? Should we use same font-size for <p>, <ul>, <ol> and <th> <td>?

What would be the balanced typography font sizing scheme?

Answer 1

IMO: avoid Comic Sans, use font size 10+ pt.

Answer 2

I've found Verdana to be very easy on the eyes for large blocks of text. However the font-family alone won't bring major improvements.

You should be careful with the width of your text block. Popular usage shows that anywhere between 12 to 16 words per line is comfortable for the eye.

Also be sure to have a balanced line-height so the vertical distance between rows gives enough whitespace. Breaking large blocks of text into paragraphs that have a bottom padding/margin that's at least twice the size of the line height makes them stand out better.

I don't believe there's a silver bullet for sizing fonts on headings. I do recommend you go with elastic sizing (em not px) for fonts. This makes the content more easily adaptable on various screen sizes and resolutions.

Whatever you pick you should pay attention to a clear distinction between heading sizes as well as font-weight or coloring. It's generally a bad idea to make differences between headings very subtle.

I'd recommend the h6, last heading, to be at least a bit larger than the generic text block and in bold font-weight. It would be confusing to make it look the same as an element that wrapped in a STRONG tag.

Making the font-size for P, OL, TH and TD the same I believe is partly a matter of taste but more importantly a matter of scope.

If your TABLE shows pricing options, I'd most definitely go with larger fonts for TH and TD elements in order to focus the user's attention.

Answer 3

Try making different versions of your site with different fonts and ask your users to choose one, that is most easy to read.

Good practices about fonts:

• Don't use too much different fonts on one page
• Use relative font sizes, so that user can enlarge font size in the browser settings
• Make buttons "enlarge font" and
  "reduce font" in your interface and
  save user settings in cookie

The font choice it self is an aesthetic one, you can't get a correct answer here - the one you like your self will do.

As for web safe fonts, try this link: http://en.wikipedia.org/wiki/Web_typography

Answer 4

Re readable body text: today, the answer most tend to give is to use a sans-serif font (see e.g. these readability guidelines). The guidelines also seem to answer most of your other questions.

In five to ten years' time, the answer will probably be a serif font, provided display capacities keep increasing.

Answer 5

Found a very good tool http://www.jan-quickels.de/tools-web-typography/

Answer 6

Wichita State’s Software Usability Research Lab has done a series of studies on font whose results can be used to select the right font and size for your purposes. For raw readability of paragraphs of text, 12 point Tahoma appears to consistently perform the best. Cambria may be better at reading individual characters (they didn’t test it for reading paragraphs, and didn’t test it directly against Tahoma).

In general, 12 point is better than 10, but 14 is not better than 12, unless you’re talking elderly users.

If size is the only way you distinguish headers, then, according to MIL-STD 1472, each level should be at least 25% larger than the next lower level. So, if you use H1 through H3 and 12 point paragraphs, then H3 = 15 pt, H2 = 19 pt, and H1 = 24 pt (minimums). However, if you’re using other means to indicate the hierarchy, such as indenting, bold font, or a section number scheme (like #.#.#), then some levels may be the same size as others.

Number and unnumbered lists should use 12 point since they are typically sentences. You might be able to get away with a smaller font for table content or data fields, maybe as small as 9 point, since the user is generally scanning and reading only one word or number at a time, but I don’t know of any study that actually compared the scan/scroll vs. readability tradeoff.

Answer 7

Have you tried this?

@font-face {font-family:Tahoma;src:url(/path/to/tahoma.eot);}
@font-face {font-family:Tahoma;src:url(/path/to/tahoma.otf) format("opentype");}
@font-face {font-family:Tahoma;src:url(/path/to/tahoma.ttf) format("truetype");}

This will force browsers to use your own typeface.

Answer 8

http://bigital.com/english/files/2008/04/web_legibility_readability.pdf

According to this study, Verdana gives better speed, confort and comprehension. Also, it suggests the optimal line length is around 60-80 characters.