Allow users to change font size in a webpage

Question

I would like to be able to change the size of text in a web page, I guess jQuery can be used, but I have no experience in javascript.

Another problem is that the webpage is a phtml file, and multiple php echo commands are used. And the page is made up of multiple phtml files.

EDIT: I would like to give users 3 choices for different font sizes.

Answer 1

The approach I would take is to apply a font-size percentage to the body tag of the html

body
{
    font-size: 62.5%;
}

Then for all other elements specify font-size in ems, which generates the size as a scaled up percentage of the inherited font-size

h1
{
    font-size: 1.8em;
}

p
{
    font-size: 1.2em;
}

I use 62.5% on the body because it is easy to translate this to pixel sizes when specifying other font sizes e.g. 1.2em = 12px, 1.8em = 18px and so on

To then change the font size in the page programatically you just need to change the value of the font-size on the body and the rest of the page will scale up or down accordingly

You can test this by having three divs

<div id="sizeUp">bigger text</div>
<div id="normal">normal text</div>
<div id="sizeDown">smaller text</div>

In JQuery I believe you can do

$(document).ready(function() {

    $("#sizeUp").click(function() {

        $("body").css("font-size","70%");

    });

    $("#normal").click(function() {

        $("body").css("font-size","62.5%");

    })

    $("#sizeDown").click(function() {

        $("body").css("font-size","55%");

    })
});