 <p>EDIT: Updated with <code>resize</code> event listener. Updated <a href="http://jsfiddle.net/flowstoneknight/2xt9t8pg/" rel="nofollow">fiddle</a>.</p> <p>As I understand it, you want the text to be as large as possible while still fitting inside the containing <code>&lt;div&gt;</code>, correct? My solution is to put a <code>&lt;span&gt;</code> around the text, which conforms to the text's normal size. Then calculate the ratios between the container's dimensions and the <code>&lt;span&gt;</code>'s dimensions. Whichever is the smaller ratio (either width or height), use that ratio to enlarge the text.</p> <p>HTML:</p> <pre><code>&lt;div class="container"&gt; &lt;span class="text-fitter"&gt; text here &lt;/span&gt; &lt;/div&gt; </code></pre> <p>JS (jQuery):</p> <pre><code>textfit(); $(window).on('resize', textfit); function textfit() { $('.text-fitter').css('font-size', 'medium'); var w1 = $('.container').width()-10; var w2 = $('.text-fitter').width(); var wRatio = Math.round(w1 / w2 * 10) / 10; var h1 = $('.container').height()-10; var h2 = $('.text-fitter').height(); var hRatio = Math.round(h1 / h2 * 10) / 10; var constraint = Math.min(wRatio, hRatio); $('.text-fitter').css('font-size', constraint + 'em'); } </code></pre> <p>Here's a <a href="http://jsfiddle.net/flowstoneknight/2xt9t8pg/" rel="nofollow">fiddle</a>. Adjust the <code>.container</code> dimensions in the CSS to see it in action.</p>