Allowing a user to change font size

I'm posting this here because I thought this might be a css kinda thing - but please let me know if this is more of a javascript thing

I know I've seen a post about it somewhere on this site about offering a site's viewers the ability to change font size - I've seen in implemented on this site using the ctrl+wheel which adjusts the browser text size

on ABCnews.com they have clickable images that change the font size but it doesn't affect the browser text size - only that particular article's font size changes

I looked at the source for the article on abcnews.com and there was a CDATA render readability() line in there so I don't know how it's done

If anyone can point me in the direction of how abcnews.com does theirs I would be most appreciative...I also did a quick search on sites like dynamic drive thinking it might be a javascript but to no avail

I tried to do a search in this site for that thread and maybe I just didn't use the right keywords but I couldn't find it

Thanks!

.. a css kinda thing - but please let me know if this is more of a javascript thing

It's done with Javascript and CSS. There are some examples at dynweb: http://www.dyn-web.com/dhtml/sizefont/

A simple way is to create different stylesheets for different font sizes then use a javascript style switcher (http://www.alistapart.com/articles/alternate/) to switch stylesheets.

Edit, Beaten to it by two mins.

As long as you don't specify font sizes in pixels or points and use one of the other methods of specifying font size your visitors will be able to override it to make the fonts larger or smaller using the font size option built into their web browser and no Javascript is required.

As long as you don't specify font sizes in pixels or points and use one of the other methods of specifying font size
If the entire site is set to 10px I can use 1em to achieve the same size right? and then be able to employ one of the methods listed previously?

If you use a Javascript method you don't need ems… All browsers can resize text sized in pixels except (wait for it…) Internet Explorer, which is why ems are preferred for accessibility.

Personally, if resizing text was to be a priority in the design I would use the Javascript method over relying on the browser-based one (although I'd still use ems) as most users have no idea their browser can resize anything.

Here's a recently published intro to the land of em: http://24ways.org/advent/an-explanation-of-ems

Hope it helps...

If the entire site is set to 10px...

Not really a good idea to set the font size in pixels, IE does not allow the user to overide the size in their browser.

I'm not quite sure if 10px = 1em. I always thought 1em was relative to something? Normally I just play with the sizes until I'm happy with it.

I think I set the font size to 10 px in the body and yes em's are relative to the size of it's div or whatever

and thank you for the tip about ie and px - never thought of that - and now in a roundabout way I think you've offered me what may be a better solution

my site is designed for 800x600 and I think it looks just fine - but in 1024x768 the right column is just a lil small and I want my users to be able to adjust this

rmdedek - thanks for the article
mark - I will look into the js style switcher
span & felgar - thanks for your help too!

:) :thumbsup:

Take a look at this font resizing script

http://www.dyn-web.com/dhtml/sizefont/