Dynamic Increase / Decrease Font Size Box with Javascript

Web Accessibility is important aspect of the modern websites and including functionality for increasing / decreasing the font-size of the body text is a good step for achieving it. With all recent A grade browsers this is kind of unneeded since they have build in zoom functionality (ctrl + / ctrl -) but still there are couple of advantages for using custom solution:

  1. Preventing broken design due to resizing displacements
  2. Easier for less experienced users who don’t know how to zoom from the browser
  3. Looks kind of cool 🙂

The script I’ve written has the following features:

  1. Stores settings (increase/decrease value) in cookie
  2. Uses style switching (overwriting) so there is no font resizing after page load
  3. Limits the resizing to three steps in each way

Here is the code and example. Note that I’m changing only the body font-size because all paragraphs are using relative units (em). If you prefer to use absolute units (px) you will need to declare all CSS selectors you are using.

dynamic font resizing

Of course there are couple of things which can be improved but I wanted a simple script working under all major browsers : IE 6+, FF, Opera, Safari.

Be Sociable, Share!

Tags: , , ,

41 Responses to “Dynamic Increase / Decrease Font Size Box with Javascript”

  1. Todd Says:

    Heya, this is really cool, can you lend a guy a hand on how to implement this into my website?

  2. Peter Says:

    sure drop me a line (mail, skype, whatever)

  3. Erin Says:

    Great script, Peter! Just having one small issue while integrating this into my site with it defaulting to the largest size?

  4. Peter Says:

    it stores the last value in cookie, delete your cookie and check again

  5. Nuria Says:

    Thanks for this script.

  6. Aby P Rajan Says:

    Hi, I was searching for this for a long. Would you please mail me the script and how to add this to a website. Thanks in advance.

  7. Peter Says:

    @Aby check the example – it is all there

  8. Adrian Kalbarczyk Says:

    As a visual impaired person, I don’t like an idea of increase/decrease font size. I never used the buttons “+” and “-“. There are much better options available – most of them are external to browser. In Linux there is a screen magnifier derived as plug-in for Compiz available just after installation. I use it on the daily basis. For Windows there are (crappy and expensive but still…) other magnification options and screen readers, which could read text that we point on (it’s especially good when eyes are tired).

    There also internal good solutions for resizing fonts with layout (I think it works only on FF) described somewhere on yahoo – it doesn’t need JS. As far as there are better solutions for disabled peoples we, programmers, don’t need to do extra work writing code you posted here. However it’s extremely important to tell disabled people that there are these solutions and teach how to use them. As far as I’m concerned you are from Bulgaria, and there are problems with money for specialized computer systems for disabled people. In that case you should take this into your own hands and spread a word about abilities of free Linux. I’m sure this is valuable activity.

    Feel free to contact me if you have any questions. I have big experience in the field of researching web usability for disabled people, and own experience as one of disabled web programmers.

  9. Stephen Says:

    Hey man i have been trying to use ur javascript font size script in my cms made simple content management site.

    I have created a seperate javascript file here


    i have placed this code into the content area div on my index page.

    A+ a-

    i have attached the javascript link to the template here


    {* This is how all the stylesheets attached to this template are linked to *}

    but nothing seems to be happening, can you see any reason why?

  10. Peter Says:

    you have forgotten the id of your body tag, currently in the JS it is named #your-body

  11. stephen Says:

    cool man cheers 🙂

  12. Black Max Says:

    Hi Peter,

    Nice script, both modifiable and unobtrusive. I like it and am trying to work it into my current design. However, I keep running into a small problem. When I rename the body ID from “your-body” to anything else, the script does not function. I’m making the changes in the CSS, the HTML, and this line in the JS:

    #your-body {font-size:’ + (10+x) +’px;}\

    I would think I could rename it anything I wanted to, i.e.

    #foo {font-size:’ + (10+x) +’px;}\

    as long as I made the corresponding changes in the CSS here:


    and in the HTML here:

    (Sorry to be pedantic, but I want to make sure I’m saying everything straight.)

    Any thoughts? Thanks, Peter.

  13. Peter Says:

    @Black Max – it should be working, at least I don’t see a reason why. Can you put the code somewhere so I can give it a look?

  14. Black Max Says:

    Peter, now it seems to work, at least in a demo page. Go figure. 🙂 Maybe it was a cookie or cache issue…?

  15. Mithra Says:

    It will be good if the code gets uniformly re-sized. If the syle code is applied to the parent tags like div’s etc, instead of p tags it would be great. There is id=”decrease” defined in the <a>, however the syle definition for the same is missing, oe am i missing something?. Then it would have been great. Also a Reset option will be very very useful. However the script is great thanks.

  16. Peter Says:

    Generally it is best to use relative size fonts (em, %) this way you can adjust only the size of the body tag. The decrease id is not used (i think) and reset option is easy to implement, just store the initial value in some var.

  17. emre Says:

    good job peter thanks for the code.
    I’m using it.
    but I’m also interested in Adrian Kalbarczyk comment.
    I think I will google it in my spare time.

    I wanna ask you something if it’s ok with you.
    In realized your web site identifies that I’m using adblock how can you do that?
    Can you show us how to do that?
    And after that I won’t use adblock plus in your site and I will happily click your ads.
    Thanks in advance

  18. Peter Says:

    @emre – For the ads basicly i check the size of the iframe. Here is the code:

    if ($$(“.google-sense468”)[0] && $$(“.google-sense468”)[0].clientHeight == 0 && $(‘block-warning’)) $(‘block-warning’).setStyle(‘display’,’block’);

  19. Apparatus Says:


    Nice script, works very well!

    What if I want to use the same script at two or more places? For example at #your-body and #your-body2 etc.

    So how should I add #your-body2 at the code?

  20. Peter Says:

    @Apparatus – if you use relative font sizing all fonts on your page will resize

  21. sangeetha Says:

    Nice code
    i want the code something like which has radio buttons having options like small, larger, largest, medium
    and when user clicks on radio button and apply the changes must get applied
    Plz can u help me out

  22. Peter Says:

    @sangeetha – well create three radio buttons and attach click/selected events to them, then call the increase/decrease function

  23. Cloud Says:

    Friend, where should I paste into?
    my Blog XHTML?
    please teach me, thanks.

  24. Yasin Says:

    Hi., Peter Nice work., It works fine., ..,
    i had gone thru all u r post…..
    I had a question..,
    Similar to this work., is it possible to change the background color(not only the color., but also font color as per the bgcolor ets) as per the user choice… it similar to theme creation’s… Do u have any idea doing this in css & javasript….

  25. Peter Says:

    @Yasin – Best is to replace the whole css, there are examples, google it

  26. Darko Says:

    Hi, Peter great work 😉
    Thanks for the great script.
    I was able to integrate in HTML code, but I have a problem that certain elements do not work in IE.
    Is there a solution to this problem??
    Thanks in advance.

  27. oko Says:

    Usefull tutorial, thx

  28. Bill Says:


    This is certainly the best font resizer I have seen. How can it be changed to apply only to a with a specified id instead of the entire ?


  29. Bill Says:

    Peter – resending. My div and body words did not appear in the original text

    This is certainly the best font resizer I have seen. How can it be changed to apply only to a div with a specified id instead of the entire body?


  30. Laura Says:

    Works like a charm – and easy customisable, even for a JS rookie like me. Thanks!

  31. khadeer Says:

    can u tell how to use this code in our website

  32. Andy Says:

    We have implemented your javascript and given the body an id of “school”. I have altered the style accordingly, yet the buttons seem not to make a difference. Can you advise ?

    thanks !

  33. John Tom Says:


    Thanks so much for this article. I guess I am one of those hundreds searching for something like this.

    I use macromedia dreamweaver in developing my sites. Can you mail me an example of how i can incorporate this in a web page? Will be glad if I can get it.


  34. Janet Says:

    Thanks for your great script. It works like a charm, wondering whether you can add another function to return to default size.


  35. Erin Says:

    Thanks again for this great font-resize tool. I used it a few years ago and am now implementing it again. The darn cookie issue is really messing with me again, though. Is there a way to remove it from the javascript or at least have it not remember the largest size? It’s really throwing me (and the client) for a loop to continually erase our cookies during this testing phase.

  36. Indra Chakrabarty,Richmond, BC Canada Says:

    I was interested to know how to incorporate your code , like where, and how of it. Please let us know. Where to find the info on how to put it in my firefox browser

  37. Vertex Says:

    Thanks for your great script.

  38. Antonio Says:

    Thanks for a great script! I have a question, the script does not erase the memory in Internet Explorer 9. Open your example by increasing the IE9 IE9 letter close and reopen, it will be the size that you left. Do you have any idea to solve this error? Thanks again and sorry for my bad English.

  39. Peter Says:

    @Antonio – uncomment eraseCookie function call

  40. Puja Says:

    Do you have some script for dynamically displaying content on click of a button?

  41. Neha Khetan Says:

    My site contains many elements like textbox,dropdown.
    CSS file contains many classes like
    FONT-FAMILY: Arial;
    FONT-SIZE: 16pt;
    font-weight: bold;
    color: #FFFFFF
    FONT-FAMILY: Verdana;
    FONT-SIZE: 13pt;
    font-weight: bold;
    color: #FFFFFF
    I want to increase the font size of each elements on the clicking A+ image.Can you provide any solution.

Leave a Reply