jQuery plugin - Font Resizer

by John McGeechan

Want to change the font size of all elements on your site with a single mouse click ? Want it to be fully customizable ? ok, look no further....

nb this effect is not achieved with the use of smoke and mirrors or voodoo, just plain ol' jquery


Your website audience are a varied bunch, they come with a range of monitor sizes and different expectations as to what constitutes an ideal font size. Why not let them choose ?


Download the source ( zip , tar). The source contains 3 files...

jquery.fontResize.js (main plugin)
jquery.cookie.js (cookie functions)
style.css (some basic styling for the font resizer widget)


First thing to do, add the jquery.fontResize.js,jquery.cookie.js and if you like the default style.css to your site (it is assumed that jquery is already enabled on your site) ....

<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="jquery.fontResize.js"></script>

For the absolute simplest usage of this plugin, use the default options, add the following to the head section of your document
<script type="text/javascript">
$('document').ready(function() {$('#fontResize').fontResize();});

The line above calls the fontResize function once the document is loaded and passes through the id of the target node that will receive the font resize widget, in this case '#fontresize'. Of course it is assumed that you do have an element with an id of 'fontresize' in your page, or not very much will happen ! change this to the id,class,name of any element that you wished to see the widget appear in.


The widget is fully customizable through a series of abstracted options. Also, the defaults options method is outside of the plugin closure so that the overrides method itself can be completely overriden. The available overrides are as follows....

 default value  - body
 description    - The node that is the target of the increase/decrease action     
 example values - body,html,yournode,yourid
 default value  - 5
 description    - How much to increase/decrease the size by , per click
 example values - 5,10,12 etc
 default value  - 12px
 description    - What is our baseline font size for the site
 example values - 12px, 1em etc
 default value  -

<a href="" class="decreaseFont fontresize">A-</a>
<a href="" class="normalizeFont fontresize">A</a>
<a href="" class="increaseFont fontresize">A+</a>

 description    - Widget Html , holds the clickable links to shrink/grow the page
 example values - many and varied
 default value  - decreaseFont
 description    - The class of the clickable decrease element. Note this must be the class of the decrease element as held in the 'defaultLabels'' html
 example values - many and varied
 default value  - decreaseFont
 description    - The class of the clickable increase element. Note this must be the class of the increase element as held in the 'defaultLabels'' html
 example values - many and varied

 default value  - normalizeFont
 description    - The class of the clickable normalize element. Note this must be the class of the normalize element as held in the 'defaultLabels'' html
 example values - many and varied

 default value  - {expires :3,path :'/'}
 description    - Determine how cookie will be stored. Cookie is used to remember required font size from page to page and from session to session. For session only cookie set expires to -1. Full range of values are { expires: n, path: '/abc', domain: 'yourdomain', secure: boolean }, in most cases 'expires' and 'path' are sufficient
example values - many and varied 

Example Usages

1 - Set growth to 10%...

<script type="text/javascript">
$('document').ready(function() {
$('.myelement').fontResize({defaultChangePercent: '10'});});

2 - Set default font size to 15px..
<script type="text/javascript">
$('document').ready(function() {
$('.myelement').fontResize({defaultSize :"15px"});});

3 - Change widget html to use different text and classes..
<script type="text/javascript">
$('document').ready(function() {
defaultLabels : '<a href="" class="myDecreaseFont fontresize">smaller</a>
<a href="" class="myNormalizeFont fontresize">regular</a>
<a href="" class="myIncreaseFont fontresize">bigger</a>',
defaultDecreaseClass: "myDecreaseFont"
,defaultIncreaseClass: "myIncreaseFont"
,defaultNormalizeClass: 'myNormalizeFont'});});

As the last example shows, if you are going to make large changes to the defaults, it may be better to simply override the defaults method $.fn.fontResize.defaults

Trouble shooting

If the plugin works correctly all elements on a page should increase and decrease uniformly, the only time this will not happen is where the page contains hard-coded sizes for certain elements and not em's or pecentages (or defaultTargetNode is set to a very specific, lower level node). Ideally just the body tag should have a  hard-coded size eg 12px with all subordinate elements containing percentages/em's. The fontresizer therfore only has to resize this one element and as all others are expressed as relative sizes, they automatically grow or shrink uniformly.

If you do spot any bugs, feel free to post comments below, who knows if we have the time, we may even fix them  (alternatively use the contact link for this site)