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.
For more information visit
fittextjs.com
From 1 October 2016 on, this plugin is no longer supported. Please use
Powerpack instead.
Implementation
Here is a simple FitText setup:
$("#responsive_headline").fitText();
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.