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.
Unfortunately, this does not go well with the diversity of platforms used to access Web pages, from portable devices with tiny screens to projection devices hooked to computers. And even within a specific platform, text settings may vary.
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.
Forget <font>, use CSS
The proper, modern way to set the size of the text displayed in a Web page is to use Cascading Style Sheets. This is strongly recommended over the use of <font> tags in HTML, because CSS is more flexible, easier to maintain and saves bandwidth. It is not the purpose of the Tip to discuss the interest of CSS versus <font> tags, readers wanting more details on this issue will ask their favorite Web search engine for related information... We will focus on good usage of the CSS technology to create legible Web pages.
Good usage of CSS's font properties
Here are a few basic rules that one should follow in order to create Web pages that are easy (enough) to read, using CSS's font properties.
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.
- Many users prefer that designers do this because it means that the text size will follow user preferences.
- However, because many sites do adjust the base font size, setting a base font size to 1em may result in text size that looks inconsistent from other sites. Note: after discussion in 2009, W3C adopted this approach for its own redesigned site.
- Avoid sizes in
em
smaller than1em
for text body, except maybe for copyright statements or other kinds of "fine print."
Units: avoid absolute length units for screen display
- Do not specify the
font-size
inpt
, or other absolute length units for screen stylesheets. 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 (e.g print). - 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 (see the section on font-size-adjust
in the CSS2 specification for an explanation of the aspect value),
which are more likely to be legible at such small sizes.
Further Reading
Some of the advice here differs from ours. "Corpus 1em, nihil minor" —Bert Bos after Cato.
- Fonts in the CSS2 W3C Specification
- What's wrong with the FONT element? by Warren Steel
- Size Matters by Todd Fahrner
- Big Type Campaign by Lighthouse International
- Making Text Legible: Designing for People with Partial Sight by Aries Arditi
About the "QA Tips"
The W3C QA Tips are short documents explaining useful bits of knowledge for Web developers or designers, hosted and produced by the Quality Assurance Interest Group at W3C.
While the tips are carefully reviewed by the participants of the group, they should not be seen as anything else than informative bits of wisdom, and especially, they are not normative W3C technical specifications.
Learn more about the Tips, how to submit your own pearls of wisdom, and find all the other QA tips in the Tips Index.