font scaling

by Deepak Kumar

HTML

<div id="box">Ideally, the most legible typography contains between 45 and 75 characters per line.This script 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.</div>

CSS

#box {
    background: #ccc;
    padding:10px;
    font-size:16px;
    width:76%;
    line-height: 26px;
    text-wrap:none;
}

JavaScript

$box = $('#box');
orgwidth = $box.width();
$(window).resize(function () {
    var scaleFactor = $box.width() / orgwidth;
    $box.css('font-size', scaleFactor * 16 + 'px');
    $box.css('padding', scaleFactor * 10 + 'px');
    $box.css('line-height', scaleFactor * 26 + 'px');
});