FlowType.JS without jQuery

A simple port of FlowType.JS to native JS.

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: 100%;
}

JavaScript

/*jshint laxcomma:true */
/*
* FlowType.JS without jQuery.
* Ported by Christian Dannie Storgaard. 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;
    if ( document.addEventListener ) {
        addEvent = function(element, eventName, callback) {
            return element.addEventListener( eventName, callback, false );
        };
    } else if ( document.attachEvent ) {
        addEvent = function(element, eventName, callback) {
            element.attachEvent( 'on'+eventName, callback );
        };
    } else {
        addEvent = function(element, eventName, callback) {
            element['on'+eventName] = callback;
        };
    }
    
    global.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   || 1;
        options.fontRatio = options.fontRatio || 35;
        options.lineRatio = options.lineRatio || 1.45;
            
        // Do the magic math
        // =================
        changes = function(el) {
            var  elw = el.clientWidth
                ,width = elw > options.maximum ? options.maximum : elw < options.minimum ? options.minimum : elw
                ,fontBase = width / options.fontRatio
                ,fontSize = fontBase > options.maxFont ? options.maxFont : fontBase < options.minFont ? options.minFont : fontBase
            ;
                
            el.style.fontSize   = fontSize +...