FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
If you're working on a responsive design, take whatever headline you'd like to scale and set the item to FitText. Oh. and you'll want to include jQuery n' all that too.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
$("#responsive_headline").fitText();
</script>
Pretty Cool. Your text will now resize based on the width and height of the item.
- Add all the Javascripts (jQuery, FitText and
$(element).fitText();block) as described above. - Squeeze your browser.
- Set your target headline to
white-space: nowrap; width: auto; - So far, FitText seems to work with other fun properties like text-shadow
- It also works with Lettering.js #synergy!
This is the part of the show where we cover our butts.
We built this to satisfy a need for fluid resizing text on responsive designs. Mostly for use on Trent Walton's blog, which he's using it all over. If you're not going fluid and/or want exact fitting text, we recommend checking out BigText by Zach Leatherman.
If you oppose window.resize(), it's worth mentioning that @chriscoyier created a fork of FitText using a debounced resize method.
As always, use JavaScript with caution: plan for no-js fallbacks that you are comfortable with.
If you think you can make this better, please Download, Fork, & Commit. We'd love your see your ideas.