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 Win

Answer 1

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.

What font faces are preferred? This is a tough question. There are three main computing platforms that each have their own set of base fonts. Then, some software like Adobe Creative Suite, the Microsoft Office suite, or even software as simple as the Powerpoint 2007 viewer for XP install fonts for the user. There's lot of charts on the web that list commonly used fonts.

For a website, you're going to want to use legible fonts. Most of the screen fonts commonly used on the web are pretty legible. The fonts you mention for instance are good examples. The most legible on screen font is Verdana, although it's generally considered to be ugly. Arial is always a safe choice.

Just be careful with that Segoe UI declaration though: if a Windows XP user has that font, it probably won't be legible with anti aliasing disabled.

For headings, you can go custom and use techniques like sIFR and Cufon to replace the text with non-native system fonts.

A quick note on size: most sites tend to set a really small font size. 13 pixels really is the minimum for long texts (see relative readibility). A font with a small x-height like Times should only be used for headings or in a large enough size (e.g. 15+ pixels).

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?

No, this is not possible. You can make assumptions about the browser and OS people are running via Javascript and thus make assumptions about the fonts they have installed, but it's a lot of work for a relatively small gain. I would advise against it.