All about choosing the right font for a website

Question

I actually have right now two questions:

1) What font faces are preferred for a website? Right now I really like 'Segoe UI', but it's only available on newest Windows systems like Vista and 2008 Server. So I have defined a sequence:

font-family: 'Segoe UI', Tahoma, Arial, Helvetica, Sans-Serif;

I do not really like the look of all of them except for 'Segoe UI'. Any suggestions on what nice font could be used in addition to that? I also tried 'Trebuchet MS', it looks great on documents, but not really on a page.

2) Any way to specify with CSS different font sizes for each particular font-familiy? Like 'Segoe UI - 9px', Tahoma - 8px etc. This is probably not possible, but maybe there are some tricks?

I also know I will get lots of comments now to use relative font sizes, but I don't want that. I have some graphics in my design which are not stretchable. If the user or browser default lead to the font rendered with a varying size the design will quite soon fall apart. I prefer having design with font size limitations to not having design at all.

Answer 1

1) What font faces are preferred for a website?

See this page concerning safe web fonts.

2) Any way to specify different font sizes for each particular font-family through CSS?

Nope.

Soon, @font-face will be supported by all major browsers, and you'll be able to use any font you want on your website.

Until then, have a look at Cufón or sIFR.

Answer 2

Use the right typeface for your site. It's not as simple as saying "this is the best font for websites". Here are two quotes (read principles) from Robert Bringhurst's "The Elements of Typographic Style":

• "Typography exists to honor content."
• "Choose faces that suit the task as well as the subject."

On another note, unless a serif face really suits the website, sans-serif faces are more appropriate for digital media.

With regards to your second point, Phil Oye has recently released FontUnstack, a jQuery plugin which will tell you what font is being used for a given element. The element will be given a class (i.e. "set_in_gill_sans") through which you can apply specific styles for different typefaces.

Also, check out the font matrix (1.5 years old) and these well thought-out font-stacks.