How can I make fonts on my website bigger and easier to read for some users?

Question

I have a few users who complain that the font size on my web application is too small to read. They aren't happy with trying to resize the font setting on the browser because when they make the font larger the dimensions and layout of the application change. Are there any existing tools that give me a good way to let the end user pick a small/medium/large font size and have that change the .css of the site to a larger font size without affecting the layout of the page?

Answer 1

Here's code I use on some of my sites. Apply your HTML accordingly:

HTML:

<span>Font Size: </span>
<a href="#" onclick="decreaseFontSize();">
    <img src="/images/minus.png" alt="Decrease Font Size" />
</a>

<a href="#" onclick="increaseFontSize();">
    <img src="/images/plus.png" alt="Increase Font Size" />
</a>

Javascript:

var min=8;
var max=18;
function increaseFontSize() {
 p = document.getElementById("[the id of container w/font you want to size]");
 if(p.style.fontSize) {
 var s = parseInt(p.style.fontSize.replace("px",""));
 } else {
  var s = 12;
 }
 if(s!=max) {
  s += 1;
 }
 p.style.fontSize = s+"px"
}
function decreaseFontSize() {
 p = document.getElementById("[the id of container w/font you want to size]");
      if(p.style.fontSize) {
         var s = parseInt(p.style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=min) {
         s -= 1;
      }
      p.style.fontSize = s+"px" 
}

Answer 2

Tell them to type Ctrl +

Answer 3

If the layout of your application changes in such a way that your users find it unusable there must be some problem with your CSS. Perhaps you have assumed a specific font size when designing the application, or only tested with one font size. I would suggest that you try using your own site with a different font size for a while to find out where the problems with the layout are, and then try to fix them so that it looks good regardless of the font size.

Answer 4

var min=8;
var max=30;
var reset=14;

function increase(tag) {    
    var p = document.getElementsByTagName(tag);
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s1 = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s1 = reset;
      }
      if(s1!=max) {
         s1 += 2;
      }
      p[i].style.fontSize = s1+"px"
   }
}

function decrease(tag) {
    var p = document.getElementsByTagName(tag);
       for(i=0;i<p.length;i++) {
          if(p[i].style.fontSize) {
             var s = parseInt(p[i].style.fontSize.replace("px",""));
          } else {
             var s = reset;
          }
          if(s!=min) {
             s -= 2;
          }
          p[i].style.fontSize = s+"px"
       } 
}


function reset(tag) {
     var p = document.getElementsByTagName(tag);
       for(i=0;i<p.length;i++) {
          p[i].style.fontSize = reset+"px"
       } 
}

I changed this script so it decreases by tags and added reset function.