The Clearest Fonts

Hi all,

Just about time to redesign my site. My question is, what are the best, clearest, and nicest looking fonts for the following?

[list][]Page headers[]Article headers[]Article body text[]Navigation links[/list]Also, what size fonts do you feel most comfortable reading for the above categories? As for colours, it will mainly be black on either a white or very light grey background in most cases.

I look forward to hearing your comments and ideas on this matter :slight_smile:

-Sam

Serif or sans-serif? The choice, as they say, is yours.

For serif, I’d go for:


body {
font-family:Georgia,"Times New Roman",serif;
}

for sans-serif:


body {
font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
}

Sizes? Well, try and size in relative units if you can (ems or percentages). As for actual sizes, experiment and see what looks best in your design.

Are there any style guide pages that show different fonts and sizes and styles so you can quickly go to said page to see what looks good?

<echo>What Zopester said</echo>

Always use relative font sizes because then if your fon’t isn’t clear because it is too small then the user can just up the font size and make it clear.

If you will use relative font sizes, and the fonts Verdana, Arial, Sans-Serif or Times New Roman , you will be Cross-Opearting System, Cross-Browser and with best Readability.

Some links for further reading:

Font sizes: 1. http://diveintoaccessibility.org/day_26_using_relative_font_sizes.html

  1. http://webdesign.about.com/cs/typemeasurements/a/aa042803a.htm

Font families:

  1. http://psychology.wichita.edu/optimalweb/text.htm

If you are really interested in making your web site accessible, you have a look here:

  1. http://www.sitepointforums.com/showthread.php?threadid=113590

How about this:

I’d had enough.

Being unhappy with the current wisdom and distrustful of our browsers, I wanted to have the font sizing options laid out so i could see where they did and didn’t work. So I made 264 screenshots.

This collection is posted for anyone else who is unhappy and distrustful.

Thank Mr Briggs for this:

scooby [URL=scooby]scooby

Times New Roman is not guaranteed to work cross OS or browser. I believe on the Mac it’s called “Times” or “New York”. You will run into problems on various linux distros also. If you are going for a serif font, you will need to include a specific “serif” declaration toward the end of your font-family. Granted, some sort of serif font may be a system default…but that can be changed…

You are right! Times New Roman is very good for readabilty but not cross-OS.
I’d checked again. Sorry Folks.

No worries. Can you confirm the Mac fonts? I think I have the names right (“Times” and “New York”), but am working from memory (I tend to use mainly sans-serif), so I could be wrong… :frowning:

:yawn: Times

verdana is designed to be read well onscreen :slight_smile: I find it looks good in sizes 11/12

Times new roman is more a font for print rather than screen :slight_smile:

georgia is another font that was designed specifically for on screen presentation, just like verdana…

Aren’t fonts 12 px = 100% the default size of the major browsers?

If I remember well, I have read a study, were is mentioned, that the major browsers are getting more and more accessible, and all? browsers have the option to make the fonts smaller or greater, and if using the browsers default size, the user could make the fonts great enough to be accessible. Bellow that value, it is not guaranteed that it will be accessible to every kind of visually impaired persons.

Any comments?

IE/Win is still one of the major current browsers which does not allow resizing of absolutely specified font sizes (px, pt, etc).
as for 12px = 100% being the default size…well, in recent years all browsers (both Win/Mac) settled on adopting a standard size and the same interpretation of pixels per inch (ppi)…but safari is now breaking with that again, opting for a slightly different size. (there’s an interesting bit about this issue in Zeldman’s latest book…i’ll dig it out tonight and see if i can be a bit more specific)

If a Mac has MS Office installed it gets all of the Windows fonts as well (Arial, Verdana, Times New Roman, etc.).

I have discovered today, that Verdana is also the best font for UNIX.

Recommended is:

font-family: ‘Lucida Grande’, Verdana, Geneva, Lucida,
Arial, Helvetica, sans-serif;

More: [color=#800080]http://www.realworldstyle.com/fonts.html[/color]

Just try it yourself! Good luck!

Safari final’s decided to go with the flow. :slight_smile:

There is a survey of fonts installed on various OSs at Codestyle, which might be worth a look-see. Also, I’ve read that some prefer the [url=http://www.bitstream.com/categories/products/fonts/vera/]Bitstream Vera fonts on Linux, and some don’t like Georgia (Verdana too?) when they have smooth font rendering like on OSX, but I can’t find where I read either so I’ll keep looking.

~~Ian

Are Bistream Vera cross OS and Browser Fonts?

They’re True Type Format, so I guess they’ll work on any computer that support it–I have them on my Windows 2000 machine, now. They’re pretty nice, but they seem to always be anti-aisled, which I don’t particularly like at normal screen reading sizes. It may show up differently on Linux? :slight_smile:

http://www.benmeadowcroft.com/me/archive/2003/aprilfiles/verafonts.shtml

~~Ian

If you guess they’ll work on any computer, your proposal is irrelevant. I thought the topic here is concerning “READABILITY”, or?