FitText dynamically sizes text to fit the container (UMD version)

Downloads in past


1811.0.07 years ago7 years agoMinified + gzip package size for FitText-UMD in KB


FitText-UMD, a standalone library for inflating web type
FitText makes font sizing flexible. Use this library on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element. Now supporting UMD, and of course no jQuery requirement.

How to use

FitText-UMD supports UMD and may be loaded as a module. In this example, "responsiveheadline" is the id of an element that we want the text to dynamically size to. ```javascript
var fitText = require("FitText-UMD");
fitText( document.getElementById("responsive_headline") );
``` FitText-UMD may optionally be loaded globally in the HEAD, making it accessible via the window object.

See it in action

npm install
npm run example
Open http://localhost:8080 in the browser.

The Compressor

The default setting works pretty well, but when it doesn't FitText has one setting you can adjust. If your text resizes poorly or is resizing all hurdy gurdy, you'll want to turn tweak up/down the compressor. It works a little like a guitar amp. ```javascript fitText( document.getElementById("responsive
headline"), 1.2 ); // turn the compressor up (font will shrink a bit more aggressively) fitText( document.getElementById("responsiveheadline"), 0.8 ); // turn the compressor down (font will shrink less aggressively) ``` This will hopefully give you a level of "control" that might not be pixel perfect, but scales smoothly & nicely.

To Do

With the removal of jQuery, element resize events are no longer available. jQuery uses an inefficient polling method to detect element resizing so a better solution is needed anyway. One potential candidate:


Thanks to adactio for eliminating the need for jQuery: Thanks to Trent, Dave and Reagan for original FitText.js: