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

Re. your font choice, I would consider usability to be a key requirement (unless you're going for a deliberately styled format).

Neilson made a study and found Verdana or Arial to be optimal choices in terms of legibility.

Answer 3

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.

Answer 4

CSS3 will natively support downloadable fonts (you won't be promted to download, they will just work on the fly), so you will be able to use whatever typeface you want. We just have to wait for it a but since it will be available only in Firefox 3.5 and Opera 10.

You can also use classic fonts like: Arial/Helvetica, Verdana, Georgia, or even Times Roman for great visual impact. You just need to find the right font-size and contrast with other elements on the page.

Answer 5

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.

Answer 6

Just personally, I like Verdana and Georgia, though they are only Mac/Windows-"safe". In your case perhaps it's best to select second-choice font which has the same metrics as your first choice.