a jquery plugin for inflating web type
npm install fittextjs``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
- :warning: Run FitText before anything that hides the element you're trying to size (e.g. before Carousels, Scrollers, Accordions, Tabs, etc). Hiding an element's container removes its width. It can't resize without a width.
- :warning: 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.
- :new: If your text is full width, you might want to NOT use FitText and just use CSS vw units instead. Supported in all major browsers.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
- AMP-HTML FitText
- FitText UMD by @peacechen
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.