TIP 55

What's The Best Font Size To Use In Website Design?

Well, there is no 'best font size'! Just don't 'fix' your font size absolutely.

Because of the wide range of settings and equipment that people might be using to access the World Wide Web, there is no "best font size". Font sizes should be specified using relative units like percentage or EM, (in external CSS files) since these will allow the user to adjust font sizes up or down to suit their own requirements. Avoid using graphics of text, as this locks the text size, and makes it impossible for users to change it.

Web Design; Best Font Sizes To Use In 2008

Unless you're a web designer, of course, a Windows, Macintosh, or other system will have only a handful of fonts installed. There is little overlap between the default installed fonts on these various systems. Already with many browsers, and increasingly in the future, readers will be able to decide on the fonts they want to view web pages with. With CSS, you can suggest a number of fonts, and cover as many bases as possible. But don’t rely on a font being available regardless of how common it is.

More important still is font size. You may be aware that the same font, at the same point size on a Macintosh “looks smaller” than on most Windows machines. In a nutshell, this is because the “logical resolution” of a Macintosh is 72dpi, while the Windows default is 96dpi. The implications of this are significant. Firstly, it guarantees that it is essentially impossible to have text look identical on Macintoshes and Windows based systems. But if you embrace the adaptability philosophy it doesn’t matter.

If you are concerned about exactly how a web page appears this is a sign that you are still aren’t thinking about adaptive pages. One of the most significant accessibility issues is font size. Small fonts are more difficult to read. For those of us with good eyesight, it can come as a shock that a significant percentage of the population has trouble reading anything below 14 point times on paper. Screens are less readable than paper, because of their lower resolution.

Does that mean the minimum point size we should use is 14 pts? That doesn’t help those whose sight is even less strong. So what is the minimum point size we should use? None. Don’t use points. This allows readers to choose the font size which suits them. The same goes even for pixels. Because of logical resolution differences, a pixel on one platform is not a pixel on another.

You can still suggest larger font sizes for headings and other elements. CSS provides several ways of suggesting the size of text in such a way as to aid adaptability. We’ll look at just one to get an idea.

With CSS you can specify font size as a percentage of the font size of a parent element. For example, headings are inside the BODY of the page. If you don’t set a size for the text in the BODY, then the text of the BODY will be the size that the reader has chosen as their default size. Already we are aiding adaptability of our page, simply by doing nothing!

You might say “but the text looks too big” if I just leave it like that. Make it smaller then. But in your browser. And your readers will then have the option to make it bigger or smaller in their browsers too, depending on their tastes, or their needs.

We can make headings and other elements stand out using font size by specifying that headings of level 1 should be say 30% larger than the body text, level 2 should be 25% larger, and so on. Now, regardless of the size that the user chooses for their main text, headings will be scaled to be proportionally bigger than the main text. Similarly text can be scaled to be smaller than the body text, however, this can give rise to situations where the text can be illegibly small, so use with caution.

We’ve done very little really, just avoided using absolute font sizes, and used proportional sizes for headings, and we’ve already made our pages much more adaptable and accessible.

What's The Best Font To Use In My Website Design?

Survey statistics

These figures are the cumulative total of about 8 survey submissions per week since January 2003, 2633 total. The Windows applet-based survey was introduced on 21 April and is currently recording the frequency of 281 of the most common Windows fonts.

. Info sourced by Codestyle.

Font name	Installed (%)
Microsoft Sans Serif	99.40%
Arial Black	96.85%
Franklin Gothic Medium	96.79%
Palatino Linotype	96.33%
Verdana	95.97%
Comic Sans MS	95.44%
Arial	95.40%
Lucida Console	95.29%
Courier New	95.14%
Impact	95.02%
Tahoma	94.95%
Sylfaen	94.19%
Trebuchet MS	93.66%
Lucida Sans Unicode	91.57%
Georgia	89.18%
Arial Narrow	86.02%
Century Gothic	83.63%
Bookman Old Style	83.06%
Times New Roman	82.80%
Vrinda	82.57%
Kartika	82.36%
Book Antiqua	82.07%
Monotype Corsiva	81.14%
Garamond	76.72%
Lucida Sans	75.65%
Haettenschweiler	70.15%
MS Reference Sans Serif	67.74%
Bradley Hand ITC	59.12%
Papyrus	58.92%
French Script MT	58.32%
Tempus Sans ITC	58.12%
Edwardian Script ITC	57.11%
Franklin Gothic Book	57.11%
Franklin Gothic Medium Cond	56.91%
Perpetua	56.91%
Copperplate Gothic Light	56.71%
Lucida Bright	56.71%
Curlz MT	56.51%
Engravers MT	56.31%
Franklin Gothic Demi	56.31%

These are only the top forty fonts, see the full Windows font survey results (about 100 KB) for a complete listing.

Several of the lowest rank fonts have been removed from the current survey of best fonts, but their reported frequency is recorded here for reference.

UK Government recommendations on best fonts to use:

Use only clear, commonly used fonts. Avoid the use of small text. Users should have the ability to scale fonts.

Guidelines for UK Government websites
Illustrated handbook for Web management teams

Jakob Nielsen's Readability Guidelines for Website Font Size

• Do not use absolute font sizes in your style sheets. Code font sizes in relative terms, typically using percentages such as 120% for big text and 90% for small text.
• Make your default font size reasonably big (at least 10 point) so that very few users have to resort to manual overrides.
• If your site targets senior citizens, use bigger default font sizes (at least 12 point).
• If possible, avoid text that's embedded within a graphic, since style sheets and font size buttons don't have any effect on graphics. If you must use pictures of text, make sure the font size is especially large (at least 12 point) and that you use high-contrast colors.
• Consider adding a button that loads an alternate style sheet with really big font sizes if most of your site's visitors are senior citizens or low-vision users. Few users know how to find or use the built-in font size feature in current browsers, and adding such a button within your pages will help users easily increase text size. However, because every extra feature takes away from the rest of the page, I don't recommend such a button for mainstream websites.
• Maximize the color contrast between the text and the background (and do not use busy or watermarked background patterns). Despite the fact that low-contrast text further reduces readability, the Web is plagued by gray text these days.'

Jakob Nielsen's Alertbox, August 19, 2002

Jakob Nielsen's Top Ten Web Design Mistakes of 2005

• #1 - Legibility Problems
  Bad fonts won the vote by a landslide, getting almost twice as many votes as the #2 mistake. About two-thirds of the voters complained about small font sizes or frozen font sizes; about one-third complained about low contrast between text and background.

Jakob Nielsen's Alertbox, October 3, 2005:

NEXT > .< BACK