Charles A Upsdell: Website DesignBrowser NewsCharles A Upsdell: Website Design

ResourcesFonts ⮞ Fluid Design & 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.

Note : the correct fonts will not appear when the operating system performs font substitution; for example, Helvetica will not appear in Windows because Windows substitutes Arial for Helvetica.

Note : characters in very small sizes will not appear in the proper sizes if the browser has been configured to set a minimum font size.

Note : unlike most 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.

See also : other pages in this site which are closely related include Resources ⮞ Fonts, Resources ⮞ Fonts ⮞ Metrics (very slow page), Resources ⮞ Fonts ⮞ Samples (slow page), Resources ⮞ Fonts ⮞ Sets (slow page), Resources ⮞ Fonts ⮞ Possible Weights (slow page), and Resources ⮞ Fonts ⮞ Verified Weights (very, very slow page).

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 — SeaMonkey and Vivaldi — let the user configure generic CSS fonts. Greater customizability enables the browser to better support people who are visually disabled, and to better support people whose browsers choose poor fonts.

Firefox and SeasMonkey let the user select font sizes from a long list, with font sizes measured in pixels; but other browsers let the user select only from a list of (at most) 4 or 5 choices, none measured in pixels. 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 small, 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 and SeaMonkey offer 17px as a choice, but no other browser offers this choice.

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 heights can dramatically affect text readability.

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 characters, or have wider characters. 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):

A quick brown fox jumps over the lazy dog - Verdana
A quick brown fox jumps over the lazy dog - Lucida Sans
A quick brown fox jumps over the lazy dog - Tahoma
A quick brown fox jumps over the lazy dog - Arial
A quick brown fox jumps over the lazy 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 Font 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 Font 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 medium 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 medium text, and italicized and grey to make them distinct.

Note : <font> doesn’t 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:75%. Examples are:

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

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

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

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

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

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

<p style="font-size:60%;">A quick brown fox jumps over the lazy 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 81% of the current size could become 81% of (say) 81% — i.e. the much smaller 66% —, 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.75em. Examples are:

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

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

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

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

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

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

<p style="font-size:0.60em;">A quick brown fox jumps over the lazy 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.

In principle one could use rem units instead, as this helps avoid nesting problems: however, rem units are not supported by older versions of IE — versions older than IE 9.

If you use ems, the obvious question would be “what values of em units should you use?” This author recommends that you consider the values exemplified above, which are recommended in the CSS4 proposal as of July 2017:

Header SizesCSS SizesRecommended Sizes
H1xx-large2.0em
H2x-large1.5em
H3large1.2em
H4medium1.0em
H5small0.89em
 x-small0.75em
H6xx-small0.6em

Note : the small sizes shown above are larger than browsers have traditionally used. For example, small shown above is 0.89em, but in most browsers in July 2017 it is about 0.81em, which experience shows is significantly harder to read. For example, in your browser:

<span style="font-size:0.89em;">ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789</span>

is usually more legible than:

<span style="font-size:small;">ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789</span>

Note : different browsers may produce different results, even on the same PC. For example, the size of font-size:0.81em 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.81em could become 0.81 of (say) 0.81em — i.e. the much smaller 0.66em — 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;">A quick brown fox jumps over the lazy dog</p>

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

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

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

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

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

<p style="font-size:xx-small;">A quick brown fox jumps over the lazy 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.