FitText – A Simple jQuery Plugin for Inflating Web Type

Dilawar

July 21, 2013

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. Eventually, you can build completely responsive layouts by using Skel.js which one of best jQuery plugins for responsive layouts.Super simple, super nice effect, super practical jQuery plugin by Dave Rupert. You need to attach an event to the window resize event, which can fire fifty zillion times in IE & Web Kit as you resize a browser window.By the way, you can also use Lettering.js for modern web typography and then using FitText you can make those typography flexible and viewable in mobile devices.

How Doest it work

To use this jQuery plugin, just load the following line of codes in the section of your website:

<script src="https://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.

If you feel that your text is resizing very poorly, then you can turn tweak up and down. The default is 1. See the following codes to understand more about it.

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.

Dilawar

Chief of all operations at Softstribe