FitText

About Fit Text

Fit Text is a jQuery plugin to make font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element. Fit Text is a perfect choice while developing cross-platform websites (scalable for all those nifty devices and displays).

A jQuery plugin for inflating web type

Need for Fit Text

Imagine, how your design layout would appear to users on a nifty handheld device and to the person viewing it on a hi-resolution wide screen. With so many browsing options (iPad, Tablets, Mobile Phones, Wide Screen Monitors etc.), you can limit your design to pre-defined scales. It has to be fluid and scalable – not just the layout but the entire text in your website/web application so users can read contents easily. Challenging? Not actually, at least not with Fit Text.

Note

Before using this module, make sure that

  • Use responsive theme (such as Omega).
  • The text should be larger.

Configuration

You can enter a list of jQuery selectors. They will be output in the format:

jQuery("#site-name").fitText(0.8);

The second configuration of the Fit Text is 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)

Further info

There is an explanatory blog post at https://github.com/davatron5000/FitText.js


Like this? Have a look at our Other Modules.


Corporate Contributors

Help and Support Us

Please consider Cash Contribution through Paypal or Contribute through Chipin for our free Drupal Modules, Themes & Projects which helps us creating new and free quality drupal modules, themes & projects in the future.

Project Information

Downloads