A List Apart

Menu
Issue № 176

Power To The People: Relative Font Sizes

by Published in Browsers, CSS, HTML, JavaScript, Typography & Web Fonts, Accessibility · 72 Comments

Relative font sizes make websites more accessible and easier to read — but they’re not much help unless the person using the site can find a way to actually change text size. Internet Explorer, the most widely used browser, buries the option for selecting text size in a second-level menu, which makes text resizing a hassle and is too complicated for some users. On-site buttons that let people increase and decrease text size can make it easier for them to find and use the option.

Unfortunately, most existing methods for using resizing buttons ignore the user’s default settings. Here’s a simple solution for text resizing that respects users’ choices and also gives them an additional option for resizing.

The CSS

The first step is to create a basic CSS file that uses relative font sizes in conjunction with default size. We can use percentages or em units.

/* default font size*/
@import url(small.css);/* Netscape 4 safe font sizes */
body, div, p, th, td, li, dd {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
}h1 {
  font-size: 130%;
  font-weight: bold;
}h2 {
  font-size: 110%;
  font-weight: bold;
}

Then we create five alternative style sheets using the absolute sizes that are defined in the CSS specification: xx-small, x-small, small, medium, and large. The scaling factor between the individual indexes should be 1.2, as suggested by the CSS2 specification. We should also consider and compensate for the size problems in IE5 and Opera (for details and explanation, have a look at Todd Fahrner’s great article, “CSS Design: Size Matters”).

/* xx-small.css*/
body,
body div,
body p,
body th,
body td,
body li,
body dd {
  font-size: xx-small;
  voice-family: ""}"";
  voice-family: inherit;
  font-size: x-small
}html>body,
html>body div,
html>body p,
html>body th,
html>body td,
html>body li,
html>body dd {
  font-size: x-small
}

The created files are: xx-small.css, x-small.css, small.css, medium.css, large.css.

The HTML

Next, we create the HTML document and connect the basic and alternative CSS   documents, giving the alternative style sheets names from the smallest, “A—”, through “A-”, “A”, “A+”, and “A++”. These names will be displayed in Firebird’s “Switch to alternate stylesheet” menu and Mozilla’s “View > Use style” menu.

<link rel="stylesheet" href="style.css" <span class="linewrap">»
type="text/css" />
<link rel="alternate stylesheet" <span class="linewrap">»
type="text/css" href="large.css" title="A++" />
<link rel="alternate stylesheet" <span class="linewrap">»
type="text/css" href="medium.css" title="A+" />
<link rel="alternate stylesheet" <span class="linewrap">»
type="text/css" href="small.css" title="A" />
<link rel="alternate stylesheet" <span class="linewrap">»
type="text/css" href="x-small.css" title="A-" />
<link rel="alternate stylesheet" <span class="linewrap">»
type="text/css" href="xx-small.css" title="A--" />

The JavaScript

Then we add the style-sheet switcher from “Alternative Style: Working With Alternate Style Sheets” to our HTML page:

[removed]
[removed]   

The buttons themselves get implemented like this:

<form name="font_select" acti>
    <input
      type="button"       
      value=" font - "
    />
    <input
      type="button"       
      value=" font + "
    />
</form>

Here’s the style switcher source code, and here’s a complete working example, tested in Mozilla 1.6, Mozilla Firebird 0.7, Opera 7.11, IE 6 Windows, IE 5.2 Mac, and Safari 1.2. That’s it!

A warning

Beware of the bug in IE which turns on quirks mode when the XML declaration is positioned above the document type.

About the Author

72 Reader Comments

Load Comments