Relative Font Sizes Stylesheet Switcher

Relative Font Sizes Stylesheets Switcher helps creating usable web pages that give readers simple solution for resizing text on the web page respecting their default settings. This is based on my article Power To The People: Relative Font Sizes on a A List Apart. I created switcher as most existing methods ignore the user’s default settings.

Download the styleswitcher and examples (.zip, 7 KB).

Examples can be seen online as well:

• Example 1: Five available font sizes
• Example 2: Two available font sizes and contrast 

Few notes:

• be aware of the bug in IE which turns rending in quirk mode when the XML declaration is positioned above the document type (which will result in different font sizes)
• Simon Willison suggests enhancing this technique by writing out the form and buttons used to control text sizing using Javascript. That way users without Javascript won’t see a widget that doesn’t work.
• this technique could be easiliy enchanced to control change contrast or brightness as well (see Example 2)