Font size

Truth

Browsers allow the user to set a default font size which will be applied to any font that is not given an explicit size by the displayed page.  It is easy for the user to change this size after a page is displayed.  Page designers can scale their fonts relative to this default size.  Depending on which units you use to specify a font size, the browser may leave the font size unchanged when the user changes the default size.  Browsers differ in this regard.

Some browsers also allow the user to set a minimum font size which will override any smaller explicit size set by the page.

Some browsers allow the user to define their own style sheet, which may override font sizes (or other properties) specified by the page.

Many users are unaware of these capabilities.

Consequences

If you do not specify any font size at all (as on the pages you are reading), text will appear in the default size that was selected by the user.  If the user does not know how to set the default size, it will be in the middle of the possible range (unless the neighborhood geek has tampered with it).

If you specify a font size using units of px, some browsers will not resize the text, even if the user changes the default size.  This may result in text which is too small for the user to read or (less likely) too large to fit in the width of the user's window.  To see what your browser does when fonts are resized, see the Font size samples page.

If you use 100% for most of your content, the user will be able to read it with ease, since the size matches the user's default.  If you specify larger sizes, say 120-140%, for things like headings, it will attract the user's attention to these things and they will always be larger than the body text since they will scale with the text size set by the browser.  (Note that browsers will scale headings larger by default, so you may need to do nothing).  If you specify a smaller size, say 85%, for secondary text, such as a legal disclaimer, the user should still be able to read it, but will readily see that it is deemed to be less important.  If you specify a size smaller than 85%, some users will be unable to read the text without increasing their default size, which may irritate them.

CAUTION: In CSS, when you establish a new font size, that new size becomes the base for any additional changes within the changed element.  For example: If you set the font for a particular paragraph to 80%, then set the font for a sentence within that paragraph to 80%, the sentence will actually appear at 80% of 80% of the user's default size or 64%, which will be difficult or impossible to read.

Recommendations

Respect the user's default font size.

Tips

  1. Learn how to set the default text size on your browser.  Set it to something you can read easily.  Be aware that, if web pages specify font-size in px, your browser may not honor your request.
  2. When you first build a page, do not specify any font size, i.e. let the browser use the default for body text and its own default increases for headers.  You may like it.  (These pages use that approach).
  3. Don't set a font size less than 85% of the user's preference.
  4. If you have selected Verdana as your font-family, you may be tempted to reduce the font size, since Verdana is larger than most fonts at any given size.  Do not yield to temptation; if you reduce the font size and the user does not have Verdana installed, they may have difficulty reading the resulting text.
  5. Use % when setting font sizes.  It's easier for your brain to comprehend 120% than 1.2em or other units and helps to remind you that you are sizing your fonts relative to an unknown user preference.
  6. Consider specifying things other than text in terms of font size.  Example 1: you might want to specify the margin between two blocks of text as 1em, so it grows and shrinks in proportion to the user's font size.  Note that you should not use %, since % for margins does not refer to font size, but rather to the size of the containing block.  Example 2: If you use images to replace text, consider dynamically sizing the image width in ems.  (But expect loss of image quality.  See Image size.)
  7. As part of your testing, increase and decrease the displayed font size, using your browser's controls, and verify that all text remains readable.
  8. Whenever you are looking over someone's shoulder and notice that they are having trouble reading a page because of the font size, make sure they know how to set the default size on their browser.  They will appreciate it.

Index

Last revised 25 Jan 2007