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:
<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>
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({ minFontSize: '20px', maxFontSize: '40px' })
- 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.
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
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
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.
If you think you can make this better, please Download, Fork, & Commit. We'd love to see your ideas.