How to Use jQuery to Let Visitors Resize Your Site’s Font

You can use jQuery to give your website visitors the ability to resize your site’s font. This is a useful interface to have, since your visitors can enlarge or reduce the size of the font at their leisure, giving them the best reading experience.  If you are not familiar with jQuery, check out our jQuery Basics article for an explanation of how jQuery works.

This is an interactive code display that shows you the HTML, CSS, jQuery, and a demo of the output.

Setting Up HTML for Resizing

The first thing you have to do is set up your HTML so the jQuery can determine what to resize. If you are unfamiliar with equipping your HTML document to reference jQuery, see our Getting Your HTML Ready for jQuery article.

First, you need to add a resizing interface. Don’t worry, this sounds more complicated than it actually is. This is just something your website users can interact with to resize your webpage’s font. As you can see in the example above, we used links that were represented as plus, minus, and the word, “reset.”

<a class="increase">+</a>
<a class="decrease">-</a>
<a class="reset">reset</a>

Each link should have a class that represents the action, like “increase” or “decrease.” When we add the jQuery, we’re going to use these classes to indicate which link should increase, decrease, or reset the font size.

Now, assess what elements or sections you want to be resizable. If it’s a section, you may want to create a <div> with a class so that you can specify a unique area to be resized.

See the Pen jQuery: Resizing Webpage Font Class Example by Pair Networks (@pairdocs) on CodePen.

In the example above, you can see that the <div> with the class=”resizable” is marked to be resized. However, the rest of your paragraphs will be unaffected, unless you specify that all <p> elements should also be resized.

jQuery for Resizing

jQuery handles the heavy lifting of resizing. If you are unfamiliar with jQuery, check out our jQuery Basics article to get a grasp of the common concepts.

The first step is to create a $(document).ready function that will encase all your jQuery statements.

$(document).ready(function(){

//jQuery statements
//jQuery statements

});

Next, we’re going to add the first jQuery statement to go within this function.

var resize = new Array('element','.class');
  resize = resize.join(',');

This statement establishes which elements or classes should be included in the resizing. These elements/classes are stored in the variable “resize.” If you look at the resizing font example, you will see that the <p> element and the “resizable” class were chosen for resizing.

After establishing which elements or classes will be affected, you need to set up the code to actually change the font size when a visitor interacts with your resizing interface.

Reset the Font Size

Under our “var resize” statement, we’re going to add a statement that will reset the font to its original size.

 var resetFont = $(resize).css('font-size');
    $(".reset").click(function(){
      $(resize).css('font-size', resetFont);
    });

This statement calls the elements or classes you stored in the “resize” variable and, when the link with the “reset” class is clicked, the font-size attribute in CSS will return to its original size.

The $(".reset").click(function() calls the “reset” class from the HTML. This enables the jQuery to reset the font size when the user interacts with the text associated with the “reset” class. In our example, this text is simply the “reset” link.

Increase the Font Size

Next, we need to add a statement that will increase the font size. In our example, we added the “increase” class to the “+” link, so we need to tie the jQuery action of increasing the size to the “+”.

This example does just that.

//specifies that this will affect the “increase” class
 $(".increase").click(function(){

//creates a variable that holds the current font size
     var originalFontSize = $(resize).css('font-size');

//creates a variable that parses the number
     var originalFontNumber = parseFloat(originalFontSize, 10);

//creates a variable that holds the increased font size
var newFontSize = originalFontNumber*1.2;

//changes the font-size in the CSS document

    $(resize).css('font-size', newFontSize);
    return false;

  });

The example starts off by establishing that this statement is dependent on a user clicking the text associated with the “increase” class. This is a “+” in our example. The next three lines add new variables: originalFontSize, originalFontNumber, and newFontSize.

originalFontSize collects the current font size from the CSS and stores it. originaFontNumber parses this number so that jQuery can read it. Then, newFontSize takes the number stored in originalFontNumber and multiplies it by 1.2.

Then, the last line goes into the CSS and changes the font size to match newFontSize.

This sequence will execute every time the “+” is clicked.

Decrease the Font Size

The decrease statement is very similar to the previous statement. However, instead of multiplying the font size by a number that will increase the original font number, the decrease statement multiplies the original font number by a decimal, which reduces it.

//specifies that this will affect the “decrease” class
  $(".decrease").click(function(){

//creates a variable that holds the current font size
    var originalFontSize = $(resize).css('font-size');

//creates a variable that parses the number
    var originalFontNumber = parseFloat(originalFontSize, 10);

//creates a variable that holds the decreased font size
    var newFontSize = originalFontNumber*0.8;

//changes the font-size in the CSS document
 $(resize).css('font-size', newFontSize);
    return false;

  });
});

This sequence will execute every time the “-” is clicked. This will reduce font size with each click.