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.

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

  1. 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.

  2. 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?

  3. 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.

  4. @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?

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

  6. 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.

  7. 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.

  8. 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

  9. @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’);

  10. Hi,

    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?

  11. 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

  12. 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….

  13. 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.

  14. Peter,

    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 ?


  15. 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?


  16. 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 !

  17. Hi,

    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.


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


  19. 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.

  20. 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

  21. 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.

  22. Hi,
    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.

Comments are closed.