Download
User Rating: 0.3/5 ( 1 votes)
FitText.js - a jQuery plugin for inflating web type.
FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a 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>
jQuery("#responsive_headline").fitText();
</script>
Your text should now fluidly resize, by default: Font-size = 1/10th of the 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.
jQuery("#responsive_headline").fitText(1.2); // Turn the compressor up (resizes more aggressively)
jQuery("#responsive_headline").fitText(0.8); // Turn the compressor down (resizes less aggressively)
This will hopefully give you a level of "control" that might not be pixel perfect, but resizes smoothly & nicely.
minFontSize & maxFontSize
FitText now allows you to specify two optional pixel values: minFontSize and maxFontSize. Great for situations when you want to preserve hierarchy.
jQuery("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' })
JS Tutorial
