Serifs are the small cross-strokes added to the ends of letters in some fonts. The term sans-serif, which comes from the French word sans meaning without, refers to a font which doesn't have these. To illustrate the difference, the same letters are written below firstly in Times New Roman which is a serif font, and secondly in Verdana which is a sans-serif font.
Abcde Abcde
Generally, serif fonts are more widely used in printed material. Because the resolution of computer screens is much lower than printed paper however, sans-serif fonts are more widely used in websites as they're considered to be more readable.
Popular serif fonts include Times New Roman, Georgia and New York. Popular sans-serif fonts include Verdana, Arial and Microsoft Sans Serif.
Not all computers have the same fonts installed. If you design your site using a font that's available on your machine, there's no guarantee that the same font will be available for the person viewing it. If it's not, the browser will use a default font, which means that your pages will look different from the way that you intended.
When choosing a font, you should pick one that's widely available. You can use the font survey results on the Code Style site to see what percentage of Windows, Mac and Unix computers have various fonts installed. One thing you'll notice immediately is that there isn't a single font that is installed everywhere.
If you're using CSS on your site, then the best way to overcome this is to specify a font family:
h1 { font-family : Arial, Verdana, sans-serif; }
This example specifies that for h1 headings, the Arial font should be used if it's available, if it's not then Verdana should be used, and if that's not available to use a default sans-serif font which will be determined by the browser. If you're specifying a font name which has a space in it, then you need to enclose it in quotation marks (e.g. "Times New Roman").
You might be tempted to try to make your pages appear more unusual or artistic by using lots of different fonts. We recommend that you don't do this, because the changes in typeface can be distracting and off-putting.
We recommend choosing just one or two fonts (perhaps one for the body of the text and a second for headings), and sticking to those. We've never heard anyone say they particularly liked a site because of the fonts, but we have heard people say they were put off by poor choices. So, just pick something simple and stick to it. We use Verdana, because it's a simple sans-serif font that is widely available on all platforms (only ~54% for Unix, but well over 90% on both Windows and Mac).
Obviously the larger your font size, the less you'll be able to fit on each page, which will result in longer pages and visitors having to scroll more. On the other hand though, using too small a font size might be a problem for visitors with less than perfect vision. You'll need to experiment a little to find the right sizes for your headings and main text.
<-- Previous Page Choosing a Color Scheme |
Next Page --> Creating a Logo |