Relative Font Sizes Stylesheet Switcher

July 14 2005 accessibility | css | usability

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)

comments feed

3 comments

# On October 25, 2005 at 09:10 AM, Marko said:
I like this I think I'll use it on mcville
# On November 23, 2005 at 08:11 AM, Marko said:
LOL I said was : MIslim da ?�u to upotrijebiti za svoj site :)
# On June 28, 2007 at 21:06 PM, Matt said:

Thank you. That is exactly what I was looking for in a script. Small and easy to understand.

Greatly appreciated.