FitText makes font-sizes flexible. Use this plugin on your responsive design for ratio-based resizing of your headlines.
npm install fittext.js``html`
Your text should now fluidly resize, by default: Font-size = 1/10th of the element's width.
.`javascript
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.`javascript
jQuery("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' });
`CSS FAQ
- Make sure your container has a width!
-
display: inline elements don't have a width. Use display: block OR display: 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.Don't use jQuery?
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
Changelog
* v 1.2 - Added onorientationchange event
* v 1.1 - FitText now ignores font-size and has minFontSize & maxFontSize options
* v 1.0.1 - Fix for broken font-size.
* v 1.0` - Initial ReleaseIf you want more exact fitting text, there are plugins for that! We recommend checking out BigText by Zach Leatherman or SlabText by Brian McAllister.