JavaScript: Text FitText.js

jquery.fittext.code.html

		<h1 id="fittext1">Squeeze with FitText</h1>
		<h1 id="fittext2">Squeeze with FitText</h1>
		<h1 id="fittext3">Squeeze with FitText</h1>

jquery.fittext.js

/*global jQuery */
/*!	
* FitText.js 1.0
*
* Copyright 2011, Dave Rupert http://daverupert.com
* Released under the WTFPL license 
* http://sam.zoy.org/wtfpl/
*
* Date: Thu May 05 14:23:00 2011 -0600
*/

(function( $ ){

  $.fn.fitText = function( kompressor, options ) {

    // Setup options
    var compressor = kompressor || 1,
        settings = $.extend({
          'minFontSize' : Number.NEGATIVE_INFINITY,
          'maxFontSize' : Number.POSITIVE_INFINITY
        }, options);

    return this.each(function(){

      // Store the object
      var $this = $(this); 
        
      // Resizer() resizes items based on the object width divided by the compressor * 10
      var resizer = function () {
        $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
      };

      // Call once to set.
      resizer();

      // Call on resize. Opera debounces their resize by default. 
      $(window).on('resize', resizer);
      	
    });

  };

})( jQuery );

jquery.fittext.script.js

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 	<script src="jquery.fittext.js"></script>
	<script type="text/javascript">
		$("#fittext1").fitText();
		$("#fittext2").fitText(1.2);
		$("#fittext3").fitText(1.1, { minFontSize: 50, maxFontSize: '75px' });
	</script>

FitText.js, a jQuery plugin for inflating web type
FitText makes font-sizes flexible. Use this plugin on your responsive design to achieve scalable headlines that fill the width of the parent element.

How it works
Here is a simple FitText setup:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="jquery.fittext.js"></script> <script> $("#responsive_headline").fitText(); </script>

Pretty Cool. Your text should now resize based on the width of the parent element. By default: Font-size = 1/10th of the parent element's width.

The Compressor

If your text is resizing poorly, you'll want to turn tweak up/down "The Compressor". It works a little like a guitar amp. The default is 1.

$("#responsive_headline").fitText(1.2); // Turn the compressor up (text shrinks more aggressively)
$("#responsive_headline").fitText(0.8); // Turn the compressor down (text shrinks less aggressively)
This will hopefully give you a level of "control" that might not be pixel perfect, but scales smoothly & nicely.

new: minFontSize & maxFontSize

FitText now allows you to specify two optional pixel values: minFontSize and maxFontSize. Great for situations when you want responsive text but also need to preserve hierarchy.

$("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' })
CSS Tips
Make sure your headline is display: block; or display: inline-block; with a specified width, i.e. width: 100%.
Be ready to tweak till everything balances out.
FitText now ignores your CSS file's font-size, but be sure to set one as a non-javascript fallback.
Make sure your element is appended to document before setting fitText. e.g. $('

').fitText() will NOT work