Textfit.js

How it Works

Reduces the font size of an element until it is smaller than the height of the parent.

<div class="parent_box">
	<h2 class="textfit">Resized Text</h2>
</div>

How to Use

Step 1 - Load the Javascript and CSS

Look inside the js folder to find textfit.min.js and load both of these files. Load jQuery first.

<script src="js/jquery.min.js"></script>
<script src="js/textfit.min.js"></script>

Look inside the css folder to find textfit.css and load it.

<link href="css/textfit.css" rel="stylesheet" type="text/css" />	

Step 2 - Call Textfit

Make sure you set a height for the parent element.

.parent_box{
    height:150px;
}	

Step 3 - Call Functions

//Element class that you would like to resize.
$('.textfit').textfit(options);

Step 4 - Enjoy!

Default Options

var options = {
    fontstep: 2, //font will decrease by 2 until it fits.
    minfont: 14, //font will not get smaller than this.
    lineheight: 1 
};
$('.textfit').textfit(options);