All about choosing the right font for a website
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.
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.
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.