Power To The People: Relative Font Sizes
by Bojan Mihelac
- Published in: Browsers, CSS, HTML and XHTML, Scripting, Typography, Accessibility
- | Share this article »
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" » type="text/css" /> <link rel="alternate stylesheet" » type="text/css" href="large.css" title="A++" /> <link rel="alternate stylesheet" » type="text/css" href="medium.css" title="A+" /> <link rel="alternate stylesheet" » type="text/css" href="small.css" title="A" /> <link rel="alternate stylesheet" » type="text/css" href="x-small.css" title="A-" /> <link rel="alternate stylesheet" » 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:
<script language="JavaScript1.2" src="styleswitcher.js" type="text/javascript"> </script>The buttons themselves get implemented like this:
<form name="font_select" action="GET">
<input
type="button"
onclick="javascript:fontsizedown();"
value=" font - "
/>
<input
type="button"
onclick="javascript:fontsizeup()"
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.
Learn More
Related Topics: Browsers, CSS, HTML and XHTML, Scripting, Typography, Accessibility
About the Author
Bojan Mihelac is a web developer and director for Informatika Mihelac in Slovenija. His primary love is for programming languages (particularly PHP, Java, XML, and HTML), and he is currently working on a tool that will ease the creation of web forms.
