Generally, if you want three font sizes I'd recommend not using buttons to increase and decrease the font size. I'd suggest instead you provide the user with examples of the font sizes and they can click on the one they'd like. As an example, look at how the Kindle does it on the Android ( I can't seem to find a good public html example right now): http://www.techsavys.info/2011/09/review-on-kindle-for-android-an-ereader-which-beats-all.html
However, if you want buttons, you can do something like this:
<button id="largerFont">Larger Font</button>
<button id="smallerFont">Smaller Font</button>
<p id="container">Change the font size of this.</p>
And for the javascript, here's an alternative that allows you to set the number of increments (set to 1 below, since that's what you wanted) as well as the size of an increment (note that you'll likely want to clean this up a bit):
$(document).ready(function() {
var size = parseInt($('#container').css('font-size').replace("px", ""), 10);
var incrementAmount = 4;
var increments = 1;
$("#largerFont").click(function(){
var curSize = parseInt($('#container').css('font-size').replace("px", ""), 10);
$('#container').css('font-size', curSize + incrementAmount);
if ((curSize + incrementAmount) >= (size + (incrementAmount * increments))) {
$("#largerFont").prop("disabled", true);
}
$("#smallerFont").prop("disabled", false);
return false;
});
$("#smallerFont").click(function(){
var curSize = parseInt($('#container').css('font-size').replace("px", ""), 10);
$('#container').css('font-size', curSize - incrementAmount);
if ((curSize - incrementAmount) <= (size - (incrementAmount * increments))) {
$("#smallerFont").prop("disabled", true);
}
$("#largerFont").prop("disabled", false);
return false;
});
});
Here's a fiddle of it for you: http://jsfiddle.net/fordlover49/jbXmE/1/