What Is the Best Font Size for Web Design?

In the process of surfing the web, I have come to the conclusion that many web designers feel the smallest possible font size is what they should use. WHY?? According to W3C in their article Care With Font Size:

A certain trend among designers, believing that small text gives a Web page a sleek appearance and provides more space per "page" for actual content, sometimes results in the use of unreasonably small font sizes.

The problem here is a basic usability and accessibility issue: a good design should look good without requiring the user to enlarge or reduce the text size.

Obviously, these designers do not have my eyes that find it almost impossible to read this tiny, tiny text. Most of the time I can easily get around this by holding down Ctrl and at the same time press + to increase the size large enough for me to comfortably read. Since my default browser is Firefox, increasing the font-size is easy. Do you know how to increase the text size in your browser?

Cheryl Wise recently posted an article on her blog On Fonts and High Resolution Displays that is well worth reading.

Setting Font Size

I still see lots of web designers using the <font size="small"></font> tags to set the font size on their pages. The <font> tag is deprecated in HTML 4, and removed from HTML5.

In HTML 4, style sheets (CSS) should be used to define the layout and display properties for many HTML elements. 

To set the overall font-size for your site, use the body selector. For example:

body {font-size: 1em;}

or

body {font-size: 100%;}

WARNING: If you are still using the formatting toolbar in Expression Web to style the font-size, you are going to end up with something like what is shown below:

<span class="auto-style1">For example:</span>

and the following will be added to the head section of your page:

<style type="text/css">
.auto-style1 {
font-size: xx-small; }
</style>

Instead of allowing this to happen, create a set of style rules that you can use if you MUST use small text

.smltxt { font-size: xx-small;}

Good usage of CSS's font properties

The Care With Font Size article continues with a few basic rules that you should follow in order to create web pages that are easily readable:

Size: respect the users' preferences, avoid small size for content.

• As a base font size for a document, 1em (or 100%) is equivalent to setting the font size to the user's preference. The default font size of most browsers is equal to 16px.
• Avoid sizes in em smaller than 1em for text body, except maybe for copyright statements or other kinds of "fine print." 
  EXAMPLE: Site Design & Maintenance : Expression Web Tutorials & Templates on the bottom of the footer is styled using xx-small font size.

Units: Use relative font sizing, not absolute units for screen display.

• Absolute units are pt (point), px (pixels), cm (centimeters) as they render inconsistently across platforms and can't be resized by the User Agent (e.g browser). Keep the usage of such units for styling on media with fixed and known physical properties such as print documents.
• Use relative length units such as percent or (better) em.
• even better, if a base font-size is set for the document, use absolute size ([ xx-small | x-small | small | medium | large | x-large | xx-large ]) or relative size ([ larger | smaller ]) when defining the font size for a particular element within the document.

legible font-family

If using a small font-size, prefer a legible font-family with a high aspect value  which are more likely to be legible at such small sizes.

Adjusting Font Size in Browsers

If the font size of a web page has been set using an adjustable font size, you can increase or decrease it depending on your needs. If you have older versions of these browsers, you may need to search for the instructions for increasing the font size.

WARNING: You may find that some web pages break as the font size increases.

If you are using Internet Explorer, click on 'View' from the toolbar > Select 'Text Size.'  > Click on the text size that you want.

If you are using Firefox, press and hold Ctrl while pressing + to increase the font-size. the size, Press and hold Ctrl while pressing - to decrease the font-size.  

If you are using Opera, press and hold Ctrl while pressing + to increase the font-size. the size, Press and hold Ctrl while pressing - to decrease the font-size.  

If you are using Safari, press and hold Ctrl while pressing + to increase the font-size. the size, Press and hold Ctrl while pressing - to decrease the font-size.  

If you are using Chrome, press and hold Ctrl while pressing + to increase the font-size. the size, Press and hold Ctrl while pressing - to decrease the font-size.  

Adjusting your text size

Resources:

• Best Font Size for Web Design
• Care With Font Size
• 5 Simple Ways to Improve Web Typography
• 16 Pixels For Body Copy. Anything Less Is A Costly Mistake
• PXtoEM.com PX to EM conversion made simple
• A Reference Guide For Typography In Mobile Web Design

Written April 2012