Add Text Size Options

Is there an easy way to add an option to a website so someone can select which text size they want to view the site in?   I have seen samples of this where there is a small "A", medium "A" and large "A".  CLicking on any of these will automaticallly adjust the size of the site fonts.  I assume it is somehow related to a ccs file.  FYI,  I use dreamweaver.
Who is Participating?
GaryConnect With a Mentor Commented:
Using jQuery
    <img id="larger" alt="Increase">
    <img id="smaller" alt="Decrease">

Open in new window

var fontSize = parseInt($("body").css("font-size"));
    fontSize = fontSize + 1 + "px";

var fontSize = parseInt($("body").css("font-size"));
    fontSize = fontSize - 1 + "px";

Open in new window

COBOLdinosaurConnect With a Mentor Commented:
Actually it is much simpler than that.  Set the font size in a css rule for the html tag.

html {font-size: 15px;}

then set all other font sizes relative it using rem units which the same as em but instead of referring to the local font they refer to the root font.

So if you set the body font-size using rem and everything else uses percentages, and change in the body rule will cascade.

so if: body {font-size;1em;}
then you can increase the size of everything cascading from it with an onclick event like:
onclick="'1.5em'; and increase the fonts by 50%.

rem is support in all modern browsers.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.