FitText makes font-sizes flexible. Use this plugin on your responsive design for ratio-based resizing of your headlines.
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.
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.
FitText now allows you to specify two optional pixel values: minFontSize
and maxFontSize
. Great for situations when you want to preserve hierarchy.
You can specify two optional values for the LineHeight: minLineHeight
and minLineHeight
and last parameter is default false, it measure by html element, when you set it on true, then would be measure from browser window
jQuery("#responsive_headline").fitText(1.2, { minFontSize: '20', maxFontSize: '40' })
jQuery("#responsive_headline").fitText(1.2, { minFontSize: '20', maxFontSize: '40', minLineHeight: '20', minLineHeight: '32', windowSize: true })
- Make sure your container has a width!
display: inline
elements don't have a width. Usedisplay: block
ORdisplay: inline-block
+ a specified width (i.e.width: 100%
).position:absolute
elements need a specified width as well.
- Tweak until you like it.
- Set a No-JS fallback font-size in your CSS.
That's okay. Check out these handy non-jQuery versions maintained by other people.
- non-jQuery FitText from @adactio
- Angular.js FitText.js from @patrickmarabeas
v 1.2.1
- Added GruntJS and check if Browser supoort the REM Unitv 1.2
- Addedonorientationchange
eventv 1.1
- FitText now ignores font-size and has minFontSize & maxFontSize optionsv 1.0.1
- Fix for broken font-size.v 1.0
- Initial Release
If you want more exact fitting text, there are plugins for that! We recommend checking out BigText by Zach Leatherman or SlabText by Brian McAllister.
If you think you can make this better, please Download, Fork, & Commit. We'd love to see your ideas.
Install Bower at the first time when you never used it before.
$ npm install -g bower
Install via Bower
$ bower install RWD-FitText.js
Install GruntJS command line interface at the first time when you never used it before.
$ npm install -g grunt-cli
Install all NodeJS Modules from Project
$ npm install
Create a Release
$ grunt