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>


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!

About Joshua Sortino

Issue - Mar-19-2012

Comments

  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 http://joshuasortino.com/projects/dolody 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:

Name:

Email:

Website: