Adjustable font sizes with CSS?

Have buttons on website to allow users to + or - font size

[peterdouglas]

Not sure if this can be done only with CSS, but I've seen some sites where there are three buttons to allow site visitors to increase or decrease the font size to three pre-specified sizes. They seem to use JavaScript to achieve this.

I can't seem to find a tutorial online for this either. Any ideas if this can be accomplished with CSS? My thought was to have three separate stylesheets, but that seems kind of cumbersome.

[DanA]

You can store the value in a cookie and use javascript to modify the css (a class for the body in the file for example), but I would use dynamic css or CSS/PHP to store the value in a session variable, variable or cookie and have only one stylesheet for all the pages.

[ytswy]

An alternative approach to scripting in the css file could be to add a second class description dynamically and have all 3 alternatives defined in your normal static css file - eg:

<div class="main_content,' . <?php echo $custom_text_class;?> . '">

Which would output: <div class="main_content,small_text">
or whatever. Obviously could be done in javascript as easilly.

And set $custom_text_class based on the user's cookie or session variable or whatever.

This would avoid any issues with caching css files, which I'm guessing could arrive with scripting css. <edit>although not when using javascript... I really should learn to read</edit>

[doodlebee]

I just did this for a client. They had a Windows server, though...so I had to use ASP. But you can use ASP *or* PHP to switch the stylesheets to show a larger font size quite easily.

The two tutorials I used were:

ASP:
[helical-library.net ]

PHP:
[sitepoint.com ]

Server-side would work better - if someone came along with javascript turned off, the switcher wouldn't function :)

Hope that helps you out!

[peterdouglas]

Thanks everyone! Some great ideas there - a few are a bit beyond my level of expertise, but I can get some help on that. If it comes to using php, that would be fine as this site is on a unix server.

It may take me a while to get the first one done, but any future sites I make using this should be faster and easier.

Thanks!

[swa66]

You could use relative font sizes instead of absolute ones and allow the visitor to set -depending on his/her needs- an appropriate font size as default.

Personally I think hat's how it was intended to be used.

[doodlebee]

You could use relative font sizes instead of absolute ones and allow the visitor to set -depending on his/her needs- an appropriate font size as default.

This is true, too. In the site I did, I made sure that that option was also available - however, the client *wanted* an "enlarge text" button. The client's (in my case) customer base were elderly, and apparently a lot of them (prior to redesign) had no idea you could change the font sizes within the browser - they would complain to the client about the "tiny font sizes". So they wanted the button.

Sure, there are people out there who know how to do it, but for the ones who don't, it's a nice option to have :)

[swa66]

I think chosing colors, fonts, avoiding italics, using a decent line spacing etc., all can enhance the readability as well.

W3C has a page about it (and has some great links to illustrate the arguments)
[w3.org...]

There is of course also their accessibility project and that lists a nice matrix you could use to tell your visitor how to change the font-size on the fly.

[w3.org...]

[Hope it's OK to reference w3c, I'm not associated with them at all]