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

Fonts Fluid Design & Font Sizes

Error: JavaScript is needed to render this site: please enable it.

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.

NB​: the correct fonts will not appear when the operating system performs font substitution; for example, Helvetica and Times will not appear in Windows because Windows substitutes Arial for Helvetica and Times New Roman for Times.

NB​: characters in tiny sizes will not appear in the proper sizes if the browser has been configured to set a minimum font size.

NB​: 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, News, Find Browsers, Fonts, Resources, Stats, and Store.

See also: other pages in this site which are closely related include Fonts Ampersands (very, very slow), Fonts Choices, Fonts Classics, Fonts Coding, Fonts Free Fonts, Fonts Icon Fonts, Fonts News, Fonts Metrics (very slow page), Fonts Samples (slow page), Fonts Font Sets (slow page), Fonts Possible Weights (slow page), Fonts Richest Fonts (slow page), Fonts True Weights (very, very slow page), Fonts Weights, and News Font News Archive.

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 generic fonts.

Firefox and SeaMonkey 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, && enables the browser to better support people who are visually disabled. NB​: 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’s to overcome Internet Explorer oddities. Most designers doing fluid design prefer the second or third techniques, using percentages or ems.

NB​: 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.

NB​: 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 be 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

NB​: 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.

NB​: 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.

NB​: <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.

NB​: <font> doesn’t appear above because it’s deprecated, and because it’s 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>

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

NB​: 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. To minimize this problem, you should specify the font size in both em units and rem units; the former, for old browsers, will set the font size as traditional browsers would do; the later, for modern browsers, will set the font size without the CSS inheritence problem.

Using Ems to Set Font Sizes

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

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

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

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

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

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

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

<p style="font-size:0.60em; font-size:0.60rem;">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; for this reason it’s best to specify both, e.g. font-size:0.89em; font-size:0.89rem;.

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 CSS 4 proposal as of August 2018:

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

NB​: 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 August 2018 it’s about 0.81em, which experience shows is significantly harder to read. For example, in your browser:

<span style="font-size:0.89em;">ABCDEFGHIJKLM​NOPQRSTUVWXYZ abcdefghijklm​nopqrstuvwxyz 01234​56789</span>

is usually more legible than:

<span style="font-size:small;">ABCDEFGHIJKLM​NOPQRSTUVWXYZ abcdefghijklm​nopqrstuvwxyz 01234​56789</span>

NB​: 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.

NB​: 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. To minimize this problem, you should specify the font size in both em units and rem units; the former, for old browsers, will set the font size as traditional browsers would do; the later, for modern browsers, will set the font size without the CSS inheritence problem.

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.

NB​: 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.

 

Logo