Font Resizer

HTML

<div id='controls'>
    <a class='up' href='#'>A</a>
    <a class='down' href='#'>-</a>
</div>

<div id='content'>
    Lorem shizznit dolizzle sit fo shizzle, its fo rizzle fizzle elit. Check out this dizzle velit, volutpizzle, suscipit quizzle, gravida vizzle, you son of a bizzle. Pellentesque ma nizzle tortizzle. Sizzle erizzle. Its fo rizzle fizzle go to hizzle dawg ma nizzle tempizzle dawg. Maurizzle pellentesque sure izzle brizzle. I saw beyonces tizzles and my pizzle went crizzle izzle tortor. Pellentesque eleifend rhoncizzle nisi. In hac phat shut the shizzle up dictumst. Donec dapibus. Curabitizzle tellus fo shizzle, pretizzle eu, mattizzle ac, eleifend vitae, nunc. Mah nizzle suscipit. Uhuh ... yih! daahng dawg velizzle yo mamma purizzle.
</div>

CSS

#controls a
{
    text-decoration: none;
    display: block;
    float: left;
    border: 1px solid #ccc;
    width: 20px;
    text-align: center;
    margin-right: 5px;
}

#controls
{
    height: 40px;   
}

#content
{
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
}

JavaScript

$(function() {
    $content = $('#content');
    $('#controls a').click( function(e) {
        var $this = $(this);
        $content.css('font-size', function(i, size) {
            size = parseInt(size);
            return $this.hasClass('up') ? ++size : --size;
        });
    });
});