Controlling Font Size With Javascript

The following script can be used to allow visitors to increase or decrease the size of text on your page. This can be useful for visitors who have trouble reading smaller text and allows them to increase it to something they can view more easily.

This script will change the font size of any text within a paragraph (<p> tag). If you wish to change text within other tags edit the getElementsByTagName('p'); part.

In order for this code to work your page must be using pixel sized fonts (px) rather than relative sized fonts using 'em' or '%'. Of course if you do use other font units the code can be easily adapted for these. If the script cannot find the font size of a paragraph it will default it to 12px.

If you find this script useful then please consider making a donation to the developer

<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> width="468" scrolling="no" height="60" frameborder="0" allowtransparency="" src="http://pagead2.googlesyndication.com/pagead/ads?client=ca-pub-7790596295547222&dt=1207856772203&lmt=1207856772&output=html&slotname=0781836016&correlator=1207856772203&url=http%3A%2F%2Fwww.white-hat-web-design.co.uk%2Farticles%2Fjs-fontsize.php&frm=0&cc=100&ga_vid=600689931.1207856772&ga_sid=1207856772&ga_hid=1991655679&flash=9.0.115.0&u_h=1024&u_w=1280&u_ah=964&u_aw=1280&u_cd=32&u_tz=480&u_his=2&u_java=true" marginheight="0" marginwidth="0" name="google_ads_frame">

The code

var min=8;
var max=18;
function increaseFontSize() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=max) {
         s += 1;
      }
      p[i].style.fontSize = s+"px"
   }
}
function decreaseFontSize() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=min) {
         s -= 1;
      }
      p[i].style.fontSize = s+"px"
   }   
}

Usage

Include the above code in your page (either by placing it within the head section or placing it in an external js file and importing it). You can then call the increase and decrease font size functions like below.

<a href="javascript:decreaseFontSize();">-</a>