Ask Nik: User selectable font sizes for web page
How do you create a page that allows a user to select the font size?
Nik’s answer:
You can do this using CSS or Javascript or a combination of the two. Here is some sample HTML code with embedded CSS that demonstrates how it is done:
This code demonstrates how to make a web page with user selectable font sizes. The trick is to use CSS with relative point sizes.
You can set the “font-size” CSS attribute to an “em” value. This is the value of the character box for a given font (i.e. the “M” character). Using an em value sets the font size to a relative value. For example, 1.3em is the same as 130%.
x-small |
medium |
large |
x-large
As you can see, it is very easy to accomplish this. However, this is only half the solution. Presumably the user wants the size selection to persist so it’s a good idea to use a cookie to store their preference. Then, no matter which page they visit on your site, text will be displayed at their preferred size. Furthermore, when they return to your site at a later date, depending on the duration of the cookie, the site will automatically adjust the size.
For DotNetNuke, I created a component that does this for you (by allowing the user to select a stylesheet for the page and remembering it for future visits). This is part of the Speerio SkinWidgets suite. You can see a demo here.
