Font resizing with jQuery

Posted on Thursday August 11, 2011 / by Eric Potvin

Many older or visually impaired users will appreciate you leaving them the ability to change font sizes as they wish without ruining the layout of your site.This Web standard compliance can be easily made using jQuery with minimal coding.

Here's the jQuery Code:

$(document).ready(function() { 
    var size = $('#container').css('font-size'); 
    $("#resetFont").click(function(){ 
        $('#container').css('font-size', size);
        return false; 
    });
    $("#increaseFont").click(function() { 
        var size = $('#container').css('font-size');
        $('#container').css('font-size', parseInt(size)+2); 
        return false;
    });
    $("#decreaseFont").click(function() { 
        var size = $('#container').css('font-size');
        $('#container').css('font-size', parseInt(size)-2); 
        return false;
    }); 
}); 

HTML Code:

<a id="increaseFont">Increase Font</a>
<a id="decreaseFont">Decrease Font</a>
<a id="resetFont"> Reset </a>

<div id="container">
   Here's some text
</div>