<html>
<head><title> Changing font sizes with Javascript </title>
<script language="javascript" type="text/javascript">

 function adjustFont(increment){
	var bspan = document.getElementById("b");
	var size = parseInt(bspan.style.fontSize);
	bspan.style.fontSize = (size + increment);
	document.f.tf.value = bspan.style.fontSize;
}
</script>
</head>
<body>
<form name="f">
<input type="button" onclick="adjustFont(10)"  value="Increase fontSize">
<input type="button" onclick="adjustFont(-10)" value="Decrease fontSize">
<input type="text" name="tf">
</form>
<span id="b" name="b" style="font-size: 22px; font-family: Courier New, Courier, monospace">
Floober doober doo.
</span>
</body>
</html>

Notes: Font families differ from system to system, so you have to be careful with setting fonts.  Especially since people have their own preferences.  But with respect to size, it is possible to adjust the pixel size as shown above.  This is a demonstration of interacting with the CSS defined characteristics of an HTML element. In this case we manipulate the "fontSize" property of the style object for the span block named "b."  This naming convention is unfortunate, since in Javascript it is called "fontSize" (case sensitive) whereas in CSS it is called "font-size".  Thank Microsoft again for this, since they were the lead player in adopting CSS despite these unequal naming conventions.