Font-size adapter

by volpeo

HTML

<script src="https://raw.github.com/davatron5000/FitText.js/master/jquery.fittext.js"></script>

<div id="content">
    <span id="responsive">Hello&nbsp;Sylvainzrg&nbsp;azdazdazd&nbsp;azdazad</span>
</div>

SCSS

body {
    font-family: Arial;
}

#content {
    background: rgba(0,0,0,0.1);
    width: 200px;
    height: 300px;
    text-align: center;
}

CoffeeScript

$(document).ready ->
    maximum = 34
    originalFontSize = 15
    sectionWidth = $('#content').width()

    $('span').each ->
        spanWidth = $(this).width()
        newFontSize = (sectionWidth / spanWidth) * originalFontSize
        if newFontSize > maximum
            newFontSize = maximum
        $(this).css({
            "font-size": newFontSize
        })