How do you choose a font for a website?

Question

I am not web-designer, more of a web app server side developer. Like tone deaf, guess I am font blind…Perhaps I dont know what I need.

When you look at Facebook its

font-family:"lucida grande",tahoma,verdana,arial,sans-serif;

stackoverflow

font-family:Arial,Helvetica,sans-serif;

gmail

font-family:arial,sans-serif;

nytimes.com

font-family:georgia,"times new roman",times,serif;

Wikipedia

font-family:sans-serif;

How do people arrive at a decision? Is it a factor of the rest of the page design? Why are there so many variations in these websites? Is there a standard for readability?

Answer 1

Well, the first and most important decision you should make is whether you want a font with serifs or sans-serif. In print media, serif is prefered for long texts, but most people prefer sans-serif fonts at the computer. As it was explained to me, the serifs are kind of anchors the eye can hold on to so it's easier to read large texts with serif fonts. Sans-serif fonts tend to tire the eye faster for large texts.

Concerning the actual font, I guess it's more up to personal taste.

Most important, it is recommended to stick with at most 2 or 3 different fonts for a website. Otherwise, it disturbs the consistency and ease of the site. Less is more, in this case.

Answer 2

Here on SO:

• Font Typeface selection for the web
• What is the most readable/appealing font

Otherwise it's important to say that for the web there is only a very limited range of fonts because in order to make sure people see what you want them to see, you have to chose a font that everybody has on their system.

[edit] As this answer was made the accepted answer I figure I should improve it.

I recently found blog entry that has a very helpful overview concerning web fonts and the different operating systems.

Furthermore a very good explanation of the anatomy of web fonts.

Cool&new: Dynamic text replacement

One really cool new technology for sites where it is important to implement a non-standard font for e.g. h1 or even h2 tags is sIFR. This blog post shows how it is implemented.

Answer 3

Whatever font you choose, your declaration should end in ,sans-serif; ,serif; or ,monospace; as those are the only 3 that user agents are guaranteed to render.

Arial, verdana, times, and courier have rendered on every commercial browser I have ever used. I know open source browsers on Linux will often not have verdana though.

Georgia, tahoma, etc. are a total gamble which I would stay away from or have more common back ups. I am sure you are aware that the browser picks the first font it can render in the list.

Answer 4

Facebook's font declaration seems a little excessive, except that Lucide Grande is usually found on the Mac OS and Tahoma on Windows. If you want to play it safe, a single font that is found on most OS's like Arial, Verdana or Times New Roman is fine, followed by a generic (serif, sans-serif, monospace), which tells the browser to choose an appropriate font to render if the specified font can't be found. A good resource for learning about web fonts and CSS in general is w3schools.com - http://www.w3schools.com/css/css_font.asp.

As far as readability - serif fonts have little details at the ends of the letterforms, called serifs, that help fill in the space between letters, making it easier for the eye to track text horizontally. Traditionally, sans-serif fonts have been considered easier to read on the screen, but this was due to the poor rendering of serifs by older web browsers. Modern web browsers use OS-level anti-aliasing (smoothing) to render fonts more accurately.

Whatever choice you make, you should consider using a combination of serif and sans-serif fonts to help establish a strong hierarchy of information on your web page. For example, you may choose a serif font for your headline and a sans-serif font for your body copy.