Question

I need to put some icons for font size up and font size down on a website. It has been a while since I have done this and didn’t know what was the score these days. Is JQuery the preferred method to deal with this or pure CSS. Also, do I need to do anything special with my font sizes i.e use em instead of px?

Thanks in advance.

Answer 1

I would go about it, by setting up all units in ems. Then, it’s a simple matter to scale all of it at once using a simple javascript, like so:

    $(function () {
        var fontSize = 1.1;
        $("#larger").click( 
            function () { 
                console.log("click");
                fontSize += .1;
                $("body").css("font-size", fontSize + "em"); 
            } 
        );

        $("#smaller").click( 
            function () { 
                console.log("click");
                fontSize -= .1;
                $("body").css("font-size", fontSize + "em"); 
            } 
        );
    });