Scaling Font Sizes & Icons

Typefaces play an important role in responsive web design. UX designer Joshua Sortino covers how using a little snazzy jQuery plugin (FitText) and a special typeface can get our fonts and images scale easily. Let’s jump right in!

1. FitText is a lightweight and simple yet very functional jQuery plugin to achieve scalable headlines that fill the width of a parent element.

Today we are going to use FitText to scale fonts and icons the way it should. First, download Fittext.js and include the script in your markup:

	<script> src="jquery.fittext.js"></script>


2. Download your web-font from: Font Squirrel, Typekit, Fontdeck or your favorite font library. Install it in your design by using the @font-face include. For example, for Typekit we use the @font-face include like this:

<script> src=""></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

3. Now download or find a hosted icon font such as Pictos and add the font-face and class just like you did for the web font.

	@font-face: "Your favorite font";
	.scaling-font {
		font-family: "Your favorite font";
		width: 100%;
	@font-face: "Icon Font";
	.icon-font {
		font-family: "Icon Font";
		width: 100%;

4. Wrap all of your font headlines and icons in DIVs or containing elements that separate them from the rest of your content. Make sure your content areas have fluid percentage-based widths (I defined the width in step 2 for an example). If you’re using an icon font, find out what letter represents the icon you want to include.

	<div class="scaling-font";
	This is my text.
	<div class="scaling-icon";

5. Include triggers for the Fittext.js Javascript. For each headline and icon you want to scale, add a new class. You’ll need to play around with the number value to get your headlines pixel-perfect. Tip: All of the icons can usually use the same class if they’ll be displaying at the same size.

	<script type="text/javascript">

6. Now your fonts and icons will scale as the parent DIVs or containers get larger or smaller. This is extremely helpful if you’re building a responsive web site!

About Joshua Sortino

Issue - Mar-19-2012


  1. Baron, March 23, 2012

    Hi Joshua, thanks for sharing :)
    just wondering, if you could write a tutorial about integrating ajax and wordpress? like ajax on this website… thanks though.

  2. Nikhil, March 28, 2012

    That’s a good tutorial. Simple and short but to the point. It would be great if you show us a demo.

  3. Joshua Sortino, March 31, 2012

    Hey Baron, I didn’t handle the development side of this website. You can check out to see the extent of my involvement with the project.

  4. Marco Berrocal, April 19, 2012

    Thanks, but n00b question. You can squeeze them without this, right?

    I am making my first RWD design as you can tell :D

  5. hamid, January 14, 2013

    Thanks a lot !
    This is wonderful!

Leave A Comment: