Q:

jQuery Font Switcher

I have some code here that changes the font size depending on what link you clicked and it works perfectly, I now want to add another feature but need some help. I want to add current font size which changes as you press bigger or smaller.
jQuery:
$(document).ready(function() {

    function change_size(element, size) {

        var current = parseInt(element.css('font-size'));

        if (size == 'smaller') {
            var new_size = current - 4;
        } else if (size == 'bigger') {
            var new_size = current + 4;
        }

        element.css('font-size', new_size + 'px');  
    }

    $('#smaller').click(function() {
        change_size($('p'), 'smaller');
    });

    $('#bigger').click(function() {
        change_size($('p'), 'bigger');
    });
});

HTML:
<body>

Font size: <a href="#" id="smaller">Smaller</a> | <a href="#" id="bigger">Bigger</a> Current Font Size:<span class="current_size"></span>

<p>This is some text</p>
<p>This is some more text</p>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="external.js"></script>
</body>

A:

I felt that this code would be good as a jQuery plugin, so I went ahead and altered your code until I was satisfied. I left in some comments that are applicable to your code, but I would encourage someone else (and may do it myself still, I don't know yet) to give an actual review.
(function ($, console) {
    'use strict';

    var defaultOptions = {
        //markup is what will be used to create the font sizer widget; you can do this a million better ways, but I felt this was easy to understand.
        //I'd consider enhancing it to take a jQuery object or a function that returns a string or a jQuery object, but all of that would make this more complex.
        //At the very least, this way makes for progressive enhancement as opposed to breakage when JS is disabled.
        markup: 'Font size: <a href="#smaller" data-make="smaller">Smaller</a> | <a href="#bigger" data-make="bigger">Bigger</a> Current Font Size:<span data-id="current_size"></span>',
        markupClickFilter: 'a', //if you change the markup of this widget to something where you use elements other than A tags for buttons, you may wish to change this
        affects: null, //required: this is a jQuery object representing the elements that this widget affects
        size: null, //override for initial size of affected elements
        increment: 4
    };
    $.fn.fontSizer = function (options) {
        //initialize / preconditions
        var opts = $.extend({}, defaultOptions, options),
            $currentSize, //$ for element in markup if it exists
            sizeChange = function () {}; //noop to avoid null check when using this, meh...
        if (!opts.affects || !opts.affects.length) {
            //should always UI test in a modern browser that provides console
            console.error('failed to initialize fontSizer: must provide affects property');
            return this; //jQuery plugins are expected to follow this convention
        }

        //widget setup
        this.html(opts.markup); //again, this setup functionality could be done better in many ways
        $currentSize = this.find('[data-id=current_size]'); //for example to not use magic strings like this
        if ($currentSize.length) {
            sizeChange = function () { //this could also be a trigger
                $currentSize.html(opts.affects.css('font-size'));
            };
        }

        //set initial size and update $currentSize
        if (opts.size !== null) {
            opts.affects.css({
                'font-size': opts.size
            });
        }
        sizeChange();

        return this.on('click', opts.markupClickFilter, function (e) {
            var size = parseFloat(opts.affects.css('font-size')), //parseFloat is more correct than parseInt
                make = $(this).data('make'),
                fixed = parseFloat(make); //minor enhancement: allow fixed sizing

            if (make === 'smaller') { //preference: always use ===
                size -= opts.increment; //a new variable was unnecessary, if you feel you must, you should at least declare it at the top of the function
            } else if (make === 'bigger') {
                size += opts.increment;
            } else if (fixed !== 0) {
                size = make; //using make instead of fixed here allows things like make === '1.5em'
            }

            //update size (and set $currentSize)
            opts.affects.css({
                'font-size': size
            });
            sizeChange();

            //this prevents the annoying hashchange and extra history step that isn't doing anything useful
            e.preventDefault();
        });
    };
}(jQuery, console || {error: function () {}}));

Usage:
(function ($) {
    'use strict';
    $(function () {
        $('#sizer').fontSizer({
            affects: $('p.basic')
        });
        $('#sizer2').fontSizer({
            affects: $('p.custom'),
            markup: 'Font size: <a href="#small" data-make="12px">Small</a> | <a href="#lg" data-make="24px">Large</a> | <a href="#xl" data-make="36px">XL</a> Current Font Size:<span data-id="current_size"></span>'
        });
    });
}(jQuery));

Html for usage example:
<div id="sizer">Enable Javascript for a font resizer</div>

<p class='basic'>some text</p>
<p class='basic'>some text</p>
<p class='basic'>some text</p>

<div id="sizer2">Enable Javascript for a font resizer</div>

<p class='custom'>some text</p>
<p class='custom'>some text</p>
<p class='custom'>some text</p>

JsFiddle

