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

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.