Getting headings inflating with fittext


We all as web-designers have had this problem. We wanted to have some awesome, responsive headings. But get a sad face. Enter fittext.js . The solution to your headings.Let me introduce you to fittext.js. This is a jquery plugin by paravel, again. But, it’s awesome for headings. Not only that, fittext also makes the headings gigantic and responsive as well !

Well, enough jibber-jabber. Let’s get to work, buddy [and fun, as well].

When, you go to the site, you get a link to the github page. Go ahead and download the minified .js file. After you’ve downloaded the file, create an basic HTML document and link up the file :

HTML & JS linking

<div class="container"><header>
<h1 id="fittext1">Web-Designer Arsenal
</header>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
<script type="text/<span class=">// <![CDATA[
// <![<span class="hiddenSpellError" pre="">CDATA</span>[
// ]]></script>
// <![<span class="hiddenSpellError" pre="">CDATA</span>[
// ]]></script>
javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
// ]]><script type="text/<span class=">// <![CDATA[
// <![<span class="hiddenSpellError" pre="">CDATA</span>[
// ]]></script>
javascript</span>" src="jquery.fittext.js">
// ]]></script>

As you can see above, we’ve made a div class of container. This is important. Then, we go and make and tag with the id of fittext1. [name it whatever you like]. And the regulars are there, paragraphs, divs, etc. I’ve included some dummy text for the demo.

Related read:-

CSS STYLING

<style type="text/css">
body {
background: #233a40;
color: #fff;
font: 16px/1.8 sans-serif;
}
.container {
width: 84%;
margin:0 auto;
max-width:1140px;
}
header {
width: 100%;
margin:0px auto;
}
h1 {
background: rgba(0,0,0,0.2);
text-align: center;
color:#fff;
font: 95px/1 "Impact";
text-transform: uppercase;
display: block;
text-shadow:#253e45 -1px 1px 0,
#253e45 -2px 2px 0,
#d45848 -3px 3px 0,
#d45848 -4px 4px 0;
margin: 5% auto 5%;
}
</style>

Stated above, we make the container div of width 84% and max-width of 1140px and give the

tag some awesomeness to go together with fittext.js. And, now, presenting, the javascript part.

JAVSCRIPT (JQUERY)

And, finally, we have arrived at the destination, using the fittext library for the inflating headings. Since we’ve linked up the .js files, it’s easy work here. Here it is:

<script type="text/javascript">// <![CDATA[
// <![<span class="hiddenSpellError" pre="">CDATA</span>[
// ]]></script>
// <![<span class="hiddenSpellError" pre="">CDATA</span>[
// ]]></script>
// <![<span class="hiddenSpellError" pre="">CDATA</span>[
// ]]></script>
$("#fittext1").fitText();
// ]]></script>

The function is simple, it selects the id of fittext1 and appends its functions onto it. And, what you get, is awesome inflating, responsive headlines.

WRAP UP

I’ve include a screenshot of the demo above.

fittext headings screenshot example | WDA

So, you can see above, how awesome the text looks on the screen above.

I think about fittext.js is an amazing and superb jquery library for great headings. Might use it in the my next web-project !

So, what do you think of the tutorial and the jquery library ? Tell me in the comments below.

Liked what you read? Here’s whats next:- Subscribe !!!

Enter your email address to follow this blog and receive notifications of new posts by email.

3 thoughts on “Getting headings inflating with fittext

Add your Awesome voice. Let's have a meaningful conversation. And remember, don't be a spammer (We hate 'em).

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s