Repository files navigation

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:

<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><scriptsrc="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 is1.

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 andmaxFontSize. Great for situations when you want to preserve hierarchy.

jQuery("#responsive_headline").fitText(1.2,{minFontSize:'20px',maxFontSize:'40px'});

• ⚠️ 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.
• ⚠️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.
• 🆕 If your text is full width, you might want toNOT use FitText and just use CSSvw units instead. Supported in all major browsers.

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

• v 1.2 - Addedonorientationchange 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 Release

• Trent Walton

If you want more exact fitting text, there are plugins for that! We recommend checking outBigText by Zach Leatherman orSlabText by Brian McAllister.

If you think you can make this better, please Download, Fork, & Commit. We'd love to see your ideas.