WordPress.org

Ready to get started?Download WordPress

Plugin Directory

!This plugin hasn't been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

FitText.js, a jQuery plugin for inflating web type

FitText makes font-sizes flexible. Use this plugin on your responsive design to achieve scalable headlines that fill the width of the parent element.

  1. Upload fixtext/ to the /wp-content/plugins/ directory
  2. Activate the plugin through the 'Plugins' menu in WordPress

Implementation

Here is a simple FitText setup:

<script>
  $("#responsive_headline").fitText();
</script>

Pretty Cool. Your text should now resize based on the width of the parent element. By default: Font-size = 1/10th of the parent 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.

$("#responsive_headline").fitText(1.2); // Turn the compressor up   (text shrinks more aggressively)
$("#responsive_headline").fitText(0.8); // Turn the compressor down (text shrinks less aggressively)

This will hopefully give you a level of "control" that might not be pixel perfect, but scales smoothly & nicely.

=new: minFontSize & maxFontSize = FitText now allows you to specify two optional pixel values: minFontSize and maxFontSize. Great for situations when you want responsive text but also need to preserve hierarchy.

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

CSS Tips

  • Make sure your headline is display: block; or display: inline-block; with a specified width, i.e. width: 100%.
  • Be ready to tweak till everything balances out.
  • FitText now ignores your CSS file's font-size, but be sure to set one as a non-javascript fallback.

Requires: 3.0.0 or higher
Compatible up to: 3.3.2
Last Updated: 2011-6-22
Downloads: 1,938

Ratings

4 stars
4.5 out of 5 stars

Support

Got something to say? Need help?

Compatibility

+
=
Not enough data

0 people say it works.
0 people say it's broken.

100,1,1