FlowType.JS with/without jQuery

A simple port of FlowType.JS to native JS, including the option of integrating with jQuery / Zepto if available.

HTML

<input id="demo-control" type="range" min=0 max=100 />

<div id="demo-article">
    <h3>What does FlowType.JS do?</h3>
    <p>Ideally, the most legible typography contains between 45 and 75 characters per line. This is difficult to accomplish for all screen widths with only CSS media-queries. FlowType.JS eases this difficulty by changing the font-size—and subsequently the line-height—based on a specific element's width. This allows for a perfect character count per line at any screen width.</p>
    <p>Additional options, reviewed below, allow you to configure FlowType.JS to fit your needs. These options include element size thresholds, font-size thresholds and font-size/line-height ratios. The element size thresholds will stop FlowType.JS from performing its magic once the element reaches beyond specific pixel dimensions. The font-size thresholds will stop FlowType.JS from resizing the text beyond certain font-sizes. Lastly, you have full control over the base font-size and line-height ratios, so that you can set your typography perfectly.</p>
    <p>FlowType.JS is extremely easy to use. Visit the getting started section, follow the four easy steps and you will be on well on your way to performing magic.</p>
</div>

CSS

body {
 font-size: 18px;
 line-height: 26px;
}
h1,h2,h3,h4,h5,h6,p {
 font-family: inherit;
 font-size: inherit;
}
h3 {
 font-size: 2em;
 line-height: 1em;
}
#demo-article {
 width: 60%;
}

JavaScript

/*
* FlowType.JS with/without jQuery.
* Ported by Christian Dannie Storgaard (Cybolic). Based on:
*
* FlowType.JS 1.0
* Copyright (c) 2013, Simple Focus http://simplefocus.com/
*
* FlowType.JS by Simple Focus (http://simplefocus.com/)
* is licensed under the MIT License. Read a copy of the
* license in the LICENSE.txt file or at
* http://choosealicense.com/licenses/mit
*
* Thanks to Giovanni Difeterici (http://www.gdifeterici.com/)
*/

(function(global) {

    var addEvent = null,
        getWidth = null,
        setFontSize = null,
        setLineHeight = null,
        flowtype = null
    ;
    if ( global.$ && global.$.css ) {
        addEvent = function(element, eventName, callback) { $( element ).bind( eventName, callback ); };
        getWidth = function(element) { return $(element).width(); };
        setFontSize = function(element, size) { $(element).css('font-size', size); };
        setLineHeight = function(element, height) { $(element).css('line-height', height); };
    } else {
        addEvent = function(element, eventName, callback) {
            if ( element.addEventListener ) {
                element.addEventListener( eventName, callback, false );
            } else if ( element.attachEvent ) {
                element.attachEvent( 'on'+eventName, callback );
            } else {
                element['on'+eventName] = callback;
            }
        };
        getWidth = function(element) { return element.clientWidth; };
        setFontSize = function(element, size) { element.style.fontSize = size; };
        setLineHeight = function(element, height) { element.style.lineHeight = height; };
    }


    flowtype = function(element, options) {

        // Establish default settings/variables
        // ====================================
        options.maximum   = options.maximum   || 9999;
        options.minimum   = options.minimum   || 1;
        options.maxFont   = options.maxFont   || 9999;
        options.minFont   = options.minFont   ||...