jQuery flexible font size plugin – FitText.js

Dynamic font resizing? Try FitText.js – a jQuery flexible font size plugin for responsive web design web projects.

jQuery flexible font size plugin for inflating web type

This plugins is created for inflating web type. FitText.js makes font-sizes flexible. We can successfully use this plugin in our responsive design projects, for ratio-based resizing of headlines and other texts.

FitText.js - jQuery flexible font size plugin for our responsive projects
FitText.js – jQuery flexible font size plugin for our responsive projects

Usage

It’s very simple. Just add libraries and apply the plugin for particular text elements:

<script src="jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
  jQuery("#my_responsive_txt1").fitText();
</script>

Now our text should fluidly resize. By default the font size = 1/10 of the element’s width.

We can adjust:

// Turn the compressor up (resizes more aggressively)
jQuery("#responsive_headline").fitText(1.2);

// Turn the compressor down (resizes less aggressively)
jQuery("#responsive_headline").fitText(0.8);

Bonus

There are additional versions of this plugin:

– non-jQuery FitText

Angular.js FitText.js

You will find the details at GitHub page.

Homepage with demo:

http://fittextjs.com

Get jQuery flexible font size plugin from GitHub:

https://github.com/Goldinteractive/FitText.js

You may also like:

Responsive text resize plugin – WideText

Fit images in container with jQuery – imgLiquid plugin

Responsive, toggle sidebar menu in jQuery

Arctext.js – Curving Text with CSS3 and jQuery

jQuery typewriter effect

jQuery Text Resizer Plugin

Textition – smooth jQuery text transition effects

Enjoy!

Share:Share on Facebook1Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1