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

Did you know when you link to a Hobo SEO post we have search engine friendly links back to your site if approved? Our comments are also search engine friendly you know (once you've commented on a few posts)! Do you need any more encouragement to get involved in the conversation ;)