First, set a default font size on your CSS body rule. By default, most browsers will set all your text to be medium sized. This is roughly like setting your font size to about 16px, which I find quite big.
You'll get around this by setting your initial font size in the body tag to a percentage less than 100% (which again, is about 16px). It turns out that the "atypical" visual designer in me prefers those layouts with tiny type as well (but I try to stop at 10px, not 8px), so I find setting the body tag to about 62.5% works well. (If it's too small, they can resize it; that's the whole point!) Many sample tutorials on the Web like to start you off at 76%, but in reality, you can set it to any percentage you like so long as your basic font size is sensible. (If you like the big type, then go ahead and set it
to 100%).
body { font-size:62.5%; }

Next, you will need to stop referencing your font sizes in pixels (or points or anything absolute) from here on out and use the em size unit. By setting your initial size using the relative percentage, you will then be able to accurately size your text up and down from that percentage using the em size unit.
div { font-size: .8 em; }

Last, you need to ensure that your layout grows and shrinks with your sized text. You've removed the absolute sizes from your fonts, so be sure not to have any absolute fixed heights on your content div containers. The easiest way to check for this is to view your layout in the browser and using the browser's controls, make the text size bigger and smaller and ensure that your divs grow and shrink with the new text size. You can also do a "Find and Replace" in your joomla CSS files for px and pt to make sure that you didn't accidentally leave anything as a fixed font or div height.
Once your template is accommodating all of the above, you will need some graphics indicating that you can make text larger and smaller i.e.: "A+" and "A-", and a "Reset" graphic. You will then need to download the following script. (I'll tell you what to do with it in a second.)
http://forum.joomla.org/Themes/joomla/md_stylechanger.js
You will need to place that file in the joomla templates directory you are using. (As it's a JavaScript file you should have a js directory in your template folder. Also, make sure to update your templateDetails.xml file.)
Then, place your A+, A-, and Reset images in your template's image directory.

Next, paste this bit of code (based on r0tt3n's Joomla! forum FAQ: http://forum.joomla.org/index.php/topic,36474.0.html) in your template's index.php file in the location where you want the sizers to be visible.
This code will display your new text-sizing graphics and when they are clicked, execute the JavaScript code, which resizes the text and makes it smaller and bigger.
Be sure to update the bold areas with the correct path and file names:
<script type="text/javascript" language="javascript"
xsrc="<?php echo $mosConfig_live_site;?>/templates/
<?php echo $mainframe->getTemplate();?>
/js/md_stylechanger.js">
</script>
<a xhref="index.php" title="Increase size"
onclick="changeFontSize(1);return false;">
<img xsrc="<?php echo $mosConfig_live_site;?>/templates/
<?php echo $mainframe->getTemplate(); ?> /images/
name of your A+ image here" alt="" border="0" />
</a>
<a xhref="index.php" title="Decrease size"
onclick="changeFontSize(-1);return false;">
<img xsrc="<?php echo $mosConfig_live_site;?>/templates/
<?php echo $mainframe->getTemplate(); ?> /images/
name of your A- image here" alt="" border="0" />
</a>
<a xhref="index.php" title="Revert styles to default"
onclick="revertStyles(); return false;">
<img xsrc="<?php echo $mosConfig_live_site;?>/templates/
<?php echo $mainframe->getTemplate(); ?> /images/
name of your Reset image here" alt="" border="0" />
</a>