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.
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.
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.
font-size in pt, or
other absolute length
units. They render inconsistently across platforms and can't be
resized by the User Agent (e.g browser).em, or, even better,
set a base font-size for the document and 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.em smaller than 1em for
text body, except maybe for copyright statements or other kinds of
"fine print."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.font-family
property (in order to let the system choose the best available font out
of a list), you can use the font-size-adjust
property to force a specific aspect value.Some of the advice here differs from ours. "Corpus 1em, nihil minor" —Bert Bos after Cato.
Created Date: 2003-07-30 by Olivier
Thereaux and Susan Lesch