In this article I will explain how to allow website visitors to change i.e. increase or decrease font size of text using JavaScript and jQuery.
Here I have shown how to change i.e. increase or decrease the font size of text of whole page or particular section or part of page using JavaScript or jQuery
There are multiple monitor dimensions and resolutions, thus sometimes users find it difficult to read the information and hence they can use this feature to increase or decrease font size of the text for improved readability.
 
Change (Increase or Decrease) Font Size of Whole Page
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 16px;
        }
        .font-button
        {
            background-color: #0090CB;
            height: 50px;
            width: 50px;
            display: inline-block;
            color: #fff;
            text-align: center;
            line-height: 50px;
            font-size: 25pt;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div>
        I am the founder of this site, and also work as an Independent Consultant.
        <br />
        I completed my graduation from Mumbai University with Bachelor’s Degree in Computer
        Engineering.
        <br />
        I am active member on the ASP.Net forums with "All Star" level ranking. Click here
        to view my profile.
        <br />
        I also wrote articles on SQLServerCentral and ASPAlliance as a guest columnist.
        I started this site to answer all the questions that are most frequently asked on
        the asp.net forums.
        <br />
        I was awarded Most Valuable Professional Award (MVP - ASP.Net/IIS) 2009 - 2013 and
        Microsoft Community Contributor (MCC) 2011 by Microsoft.
    </div>
    <hr />
    <a class="font-button plus">A+</a> <a class="font-button minus">A-</a>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".font-button").bind("click", function () {
                var size = parseInt($('body').css("font-size"));
                if ($(this).hasClass("plus")) {
                    size = size + 2;
                } else {
                    size = size - 2;
                    if (size <= 10) {
                        size = 10;
                    }
                }
                $('body').css("font-size", size);
            });
        });
    </script>
</body>
</html>
 
Explanation
In the above code snippet, I have placed two HTML HyperLinks or Anchor tags which will be used to increase or decrease the font size of the page.
For both the HTML HyperLinks I have attached jQuery Click event handler within which I have first determined the font size of the page BODY and based on whether increment or decrement button was clicked I am increasing or decreasing the font size respectively.
 
 
Change (Increase or Decrease) Font Size of particular section or part of Page
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 16px;
        }
        .font-button
        {
            background-color: #0090CB;
            height: 50px;
            width: 50px;
            display: inline-block;
            color: #fff;
            text-align: center;
            line-height: 50px;
            font-size: 25pt;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <b>Mudassar Khan</b>
    <hr />
    <div id = "content">
        I am the founder of this site, and also work as an Independent Consultant.
        <br />
        I completed my graduation from Mumbai University with Bachelor’s Degree in Computer
        Engineering.
        <br />
        I am active member on the ASP.Net forums with "All Star" level ranking. Click here
        to view my profile.
        <br />
        I also wrote articles on SQLServerCentral and ASPAlliance as a guest columnist.
        I started this site to answer all the questions that are most frequently asked on
        the asp.net forums.
        <br />
        I was awarded Most Valuable Professional Award (MVP - ASP.Net/IIS) 2009 - 2013 and
        Microsoft Community Contributor (MCC) 2011 by Microsoft.
    </div>
    <hr />
    <a class="font-button plus">A+</a> <a class="font-button minus">A-</a>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".font-button").bind("click", function () {
                var size = parseInt($('#content').css("font-size"));
                if ($(this).hasClass("plus")) {
                    size = size + 2;
                } else {
                    size = size - 2;
                    if (size <= 10) {
                        size = 10;
                    }
                }
                $('#content').css("font-size", size);
            });
        });
    </script>
</body>
</html>
 
Explanation
It is very similar to first snippet, the only difference here is that instead using BODY tag in jQuery selector I am a using the ID of the DIV, so that only font size the text inside the that DIV is changed.
 
Allow site visitors to change (Increase and decrease) font size using JavaScript or jQuery


Demo
View Demo
 
Downloads
Download Code