Description
FitText makes font-sizes flexible. Use this plugin on your responsive design for ratio-based resizing of your headlines.
FitText.js alternatives and similar libraries
Based on the "Typography" category.
Alternatively, view FitText.js alternatives based on common mentions on social networks and blogs.
-
Lettering.js
A lightweight, easy to use Javascript <span> injector for radical Web Typography -
FlowType.JS
Web typography at its finest: font-size and line-height based on element width. -
slabText
A jQuery plugin for producing big, bold & responsive headlines -
BigText
jQuery plugin, calculates the font-size and word-spacing needed to match a line of text to a specific width. -
simple-text-rotator
Add a super simple rotating text to your website with little to no markup -
circletype
A JavaScript library that lets you curve type on the web. -
jquery-responsive-text
Make your text sizing responsive!
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of FitText.js or a related project?
README
FitText.js, a jQuery plugin for inflating web type
FitText makes font-sizes flexible. Use this plugin on your responsive design for ratio-based resizing of your headlines.
How it works
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.
The Compressor
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.
minFontSize & maxFontSize
FitText now allows you to specify two optional pixel values: minFontSize
and maxFontSize
. Great for situations when you want to preserve hierarchy.
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. 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.
- :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
- 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
In Use:
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.
Download, Fork, Commit.
If you think you can make this better, please Download, Fork, & Commit. We'd love to see your ideas.