Charles A Upsdell: Website DesignBrowser News

Resources > Fluid Design and Font Sizes

Synopsis : this page discusses aspects of fluid design related to font sizes, listing methods for selecting sizes which honour the user’s preferences, with each method’s advantages and disadvantages. Unlike other Browser News pages, this page is starkly plain, with minimal styling, partly to illustrate the points more clearly, but mainly to make it easier to compare browsers: viewing this page with several browsers and/or configurations at the same time makes the browsers’ basic differences clearer.

See also : other major pages in this site are Home, Find Browsers, Resources, Stats, and Store.

Introduction

Font sizes in fluid design are based on the user’s preferred sizes. For example, this paragraph — and most body text in this page — uses your actual configured browser font and font size.

Most browsers let the user configure the preferred fonts and sizes for proportional and monospace text. Some browsers let the user configure much more: Opera, for example, also lets the user configure the generic CSS fonts, as well as the fonts and sizes of <h1>-<h6> headers, <pre> text, <button> labels, form input fields, and much more. Greater customizability enables the browser to better support people who are visually disabled.

Most browsers let the user select sizes from a long list, with font sizes measured in pixels: Firefox on this author’s PC, for example, lets the user choose one of 25 sizes from 9-72 pixels, and Opera one of 16 sizes from 10-96 pixels. Safari likewise lets the user choose from a list of 16 sizes, but — even better — also lets the user enter any size, whether it is in its list or not. Internet Explorer is much more limited: it lets the user choose from a list of only five sizes, none in pixels: smallest, smaller, medium, larger, and largest. Being able to choose from larger lists enables the user to pick the size that is ideal for them, and also enables the browser to better support people who are visually disabled. Note : one problem with browsers which force the user to choose a size from a fixed list is that it can be difficult or impossible to set the same size in several browsers, e.g. to make testing pages with several browsers easier; for example, Firefox offers 17px as a choice, but Opera and Safari do not; to get around this problem, it is possible to make Firefox use an unlisted size using its about:config page, to make Opera use an unlisted size using its opera:config page, and to make Safari use an unlisted size simply by entering the size; Internet Explorer offers no solution for this problem.

There are four techniques for honouring the preferred font sizes which the user has configured:

Most problems with the last three techniques are (surprise!) due to defects in older versions of Internet Explorer. Standards compliant browsers will size fonts in much the same way, so choosing a technique may depend on how easy it is to overcome Internet Explorer oddities. Most designers doing fluid design prefer the second or third techniques, using percentages or ems.

Note : the causes of some Internet Explorer problems are complex, and may not be clear. For example, this author has found that identical CSS for sizing normal text with IE 5 can produce different results on different sites. Solving such problems require ad hoc solutions.

Note : readability can depend on subtle factors such as line length and line height: lines which are too long, too short, or too close together, can be harder to read; adjusting line lengths or heghts can dramatically affect text readability.

Caution : a browser must ultimately translate a font size to an integer number of pixels, and conversion to integers can cause unexpected differences in screen font sizes, especially at low resolutions. Depending on the browser, the user’s preferred font size, and the resolution, two sizes which should look different could look the same, or more different than expected, or less different, with this problem being more extreme for smaller fonts. To minimize this problem there should be only one font size smaller than the normal size: this should make it possible to pick a smaller size which is distinctly smaller, but never too small to read.

Caution : readability can depend on the font. Fonts can be easier to read if they are optimized for displays, are sans-serif, have higher x-heights, have taller glyphs, or have wider glyphs. For example, Verdana has a higher x-height and is taller and wider than Arial: this makes Verdana easier to read; but Verdana may also make text look too big for users used to more typical fonts, like Arial. Text may therefore look fine for one person, but too large or small for those with different fonts . The actual font size in the following example is 12px (you must have all of these common Windows fonts to see the example properly; your default serif font is used for any missing font):

the quick red fox jumps over the lazy brown dog - Verdana
the quick red fox jumps over the lazy brown dog - Lucida Sans
the quick red fox jumps over the lazy brown dog - Tahoma
the quick red fox jumps over the lazy brown dog - Arial
the quick red fox jumps over the lazy brown dog - Calibri

Note : examples on this page have a background grid with pale lines 10px apart and darker lines 100px apart.

Caution : readability can also depend on the display technology. Text is easier to read on higher resolution displays, and technologies such as Microsoft’s ClearType make text easier to read on LCD displays.

Using HTML to Affect Font Sizes

The designer can set the font size indirectly, using HTML only, with no CSS: the browser associates default font sizes with various tags, the major ones being <p>, <li>, <th>, and <td> for normal text, and <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <big>, <small>, <sub>, and <sup> for other text. This page, for example, uses this technique almost exclusively, except for examples of other techniques.

Block-Level Sizes:

<p>Paragraph</p>

<th>Table Header</th>
<td>Table Cell</td>

<h1>Header</h1>

<h2>Header</h2>

<h3>Header</h3>

<h4>Header</h4>

<h5>Header</h5>
<h6>Header</h6>
In-Line Sizes:

<p>Lorem ipsum dolor sit amet, <big>consectetur adipisicing</big> elit</p>

<p>Lorem ipsum dolor sit amet, <small>consectetur adipisicing</small> elit</p>

<p>Lorem ipsum dolor sit amet, <sup>consectetur adipisicing</sup> elit</p>

<p>Lorem ipsum dolor sit amet, <sub>consectetur adipisicing</sub> elit</p>

Few designers would use this technique, since it lacks flexibility and the advantages of CSS styling. Still, it will do in some cases.

Note : different browsers may produce different results, even on the same PC with the same configuration. For example, the size of <h1> text may be different for Firefox and Opera, or different for IE 5 and IE 6.

Note : <h5> and <h6> text is commonly smaller than normal text, which is counter-intuitive. It may make sense to use a little CSS to tweak their appearance. For example, this page has <h5> headings styled by CSS to make them the same size as normal text, and italicized and grey to make them distinct.

Note : <font> does not appear above because it is deprecated, and because it is unwise to use it.

Using Percentages to Set Font Sizes

The designer can set the font size using CSS and percentages, for example, using font-size:80%. Examples are:

<p style="font-size:140%;">the quick red fox jumps over the lazy brown dog</p>

<p style="font-size:120%;">the quick red fox jumps over the lazy brown dog</p>

<p style="font-size:100%;">the quick red fox jumps over the lazy brown dog</p>

<p style="font-size:80%;">the quick red fox jumps over the lazy brown dog</p>

<p style="font-size:60%;">the quick red fox jumps over the lazy brown dog</p>

Note : different browsers may produce slightly different results, even on the same PC.

Note : a potential problem is CSS inheritance: e.g. text which should be 80% of the current size could become 80% of (say) 80%, depending on the CSS, which will require more specific CSS to avoid.

Using Ems to Set Font Sizes

The designer can set the font size using using CSS and em units, for example, using font-size:0.8em. Examples are:

<p style="font-size:1.4em;">the quick red fox jumps over the lazy brown dog</p>

<p style="font-size:1.2em;">the quick red fox jumps over the lazy brown dog</p>

<p style="font-size:1.0em;">the quick red fox jumps over the lazy brown dog</p>

<p style="font-size:0.8em;">the quick red fox jumps over the lazy brown dog</p>

<p style="font-size:0.6em;">the quick red fox jumps over the lazy brown dog</p>

In principle one could use ex units instead, and there is good reason to use ex units instead of em units, but in practice this is rarely done.

Note : different browsers may produce different results, even on the same PC. For example, the size of font-size:0.8em text is very different for IE 5 and IE 6. Indeed, using ems can result in very serious differences with IE 5: doing font-size:1.0em should produce text the same size as normal text, but instead IE 5 produces text which is about 20% larger. To avoid this problem requires some method of providing different CSS for different versions of Internet Explorer, e.g. using CSS tricks or conditional comments.

Note : a potential problem is CSS inheritance: e.g. text which should be 0.80em could become 0.80 of (say) 0.80em, depending on the CSS, which will require more specific CSS to avoid.

Using Standard CSS Sizes

It is possible to set the font size using built-in CSS keywords: xx-small, x-small, small, medium, large, x-large, xx-large. For example, p { font-size:small; }. Examples are:

<p style="font-size:xx-large;">the quick red fox jumps over the lazy brown dog</p>

<p style="font-size:x-large;">the quick red fox jumps over the lazy brown dog</p>

<p style="font-size:large;">the quick red fox jumps over the lazy brown dog</p>

<p style="font-size:medium;">the quick red fox jumps over the lazy brown dog</p>

<p style="font-size:small;">the quick red fox jumps over the lazy brown dog</p>

<p style="font-size:x-small;">the quick red fox jumps over the lazy brown dog</p>

<p style="font-size:xx-small;">the quick red fox jumps over the lazy brown dog</p>

One problem with this approach is that, although the CSS standards say that medium should match the default normal font size, old versions of Internet Explorer make medium one step larger: to produce text the same size as normal text, one normally does font-size:medium, but for IE 5 one must instead do font-size:small. To avoid this problem requires some method of providing different CSS for different versions of Internet Explorer, e.g. using CSS tricks or conditional comments.

Note : different browsers usually produce different results, even on the same PC. For example, the size of font-size:xx-large text is typically a bit different for Firefox and Opera, and very different for IE.