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>

FitText

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="http://use.typekit.com/hsk3wfp.js"></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>
	<div class="scaling-icon";
	d
	</div>
        

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">
		$("#scaling-font").fitText(0.6);
	</script>

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!

Joshua Sortino is a UX designer and front-end engineer who specializes in crafting responsive websites. For over a decade, Joshua has been pushing the boundaries of the browser with his mischievous experiments with CSS3 and SVG. You can follow him on Twitter.