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

To me this is a three part question so let me break down my answer into those three sections:

1. Readability: A tried and proven font combination for readability is Georgia for headings and Verdana for body text. You can go the other direction as well with Verdana which is a sans-serif font for headers and Georgia, a serif font for body text. I think The New York Times still uses 'Times New Roman' for everything. After all, it is a newspaper...
   • Both fonts are 'web safe' and available on 90+ percent of devices so you are fairly safe in using them. What is web safe and NOT recommended? Comic Sans MS, Papyrus, Chalkboard, basically any 'usual suspect', any overused and difficult to read font...
2. It is highly recommended to set your body element text-size to 100% and trust it will render your body text at about 16px. You can force it to 16px if you like as well. It is recommended to not go less than 14px and not exceed 18px for the sake of readability. Setting with rem's or em's is supposed to help the end user adjust the size using their browser settings.
   • As a rule of thumb, H1 should be double what p is. If you go with 16px for p, set h1 to 32+px. I use a factor of 0.87 for the changes from h1 ~ h6 so I end up with 36, 32, 28, 24, 21, & 18 all in pixels or rem units. Set p to 16, menus, ul, ol, dl,li, dt, dd, td, th, etc. to 14. Set line-height for headers to 1.25, for lists and tables to 1.5 and for paragraphs to 1.7. Set margins and padding for lists and set margin-bottom for paragraphs to separate them.
   • It is best to not exceed 60 characters per line of text which works out to approx 960 px for your content width. That is fairly balanced and readable.
3. Another thing you can do is load a font of choice through Google Fonts. That way you are providing the desired font to the visitor. You can also design your website with a pretty good idea of how it will render on their screen and not be so concerned about what built in font they will use. Google Fonts is now assisting with pairing fonts as well which helps.

Answer 2

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.

Answer 3

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 4

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 5

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 6

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 7

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 8

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