Responsive web design has been the new hotness for awhile now. Mobile is growing, desktops are slowing, second screen, you’ve heard this part before. Learning the ins-and-outs of responsive design gives web developers a chance to grow their skill set. And today, we’re looking at how to calculate the text size for your responsive website.

% pt px em wtf mate?

As long as I’ve been using websites I’ve been using either points or pixels when defining the size of my fonts. It makes a lot of sense because our graphics programs – Photoshop, Illustrator, and the like – also use those same values in their programs. Responsive design calls for a reevaluation of this method. Are points or pixels still the best way to do things?

I’ll save you the drama and the well-thought out response to that question.

No. It’s not. The safest way to define your font size is by using “em”.

For a full explanation of why, see this article from CSS Tricks. In the article, the author points out that reality is a bit more complicated than that. You really need the 1-2 punch of defining your font size as a percent in the body tag and then using ems when styling individual elements.

Writing your code this way will allow you to scale your code gracefully when combined with a media query.

First Things First: Let’s Get Our EM Sizing Right

If you’re one of the kids that did math competitions in high school, maybe you find ems intuitive. But for the rest of us, doing proportional math in our heads can be a little overwhelming. The underlying math though, is simple.

An em is a proportional unit. It’s proportional to the current font size. So if a site (or a container) has a font size of 12pt, that would equal 1 em. 2 em would equal 24pt and .5 em would equal 6pt and so on.

In order to know what size em you should make your font, you need to know two things:

1. Consider where you’re placing the text on the page. What’s the default font for that space? If you’re in a div, and that div has an id, does the id define the font size? That’s what I’m talking about. What is it? Is it 12pt, 12px, 14pt, 14px, or something else? Whatever that number is, think of this as your base number.

2. Now think of the size you want the font to be in points or pixels, whichever you use. 16pt? 18px? 22px/pt? Something else? Whatever that number is, think of that as your goal.

For example, let’s say my body text is 12pt and that I want my <h1> tag to be 24pt. The first number – 14pt – is the base and the second number – 24pt – is the goal. Divide your goal by your base and you’ll get a proportional number. Since the goal is larger than the base, the number will be larger than 1. If I wanted smaller text than my base number, the number would be less than one.

Equation: Goal / Base = X em

Math for the example: 24 / 12 = 2 em

Scaling Text in Responsive Web Design

Where’s my Easy Button because that was easy. But defining your text as em instead of points or pixels isn’t enough to get your text to scale. That’s where media queries and defining your body text as a percentage come into play.

If you’re new to media queries, here’s a primer from Ethan Marcotte on A List Apart.

What you need to do is to define the size screens you where you want to change the size of the text, then just change the % of the body text.

Open up your CSS file and add something like this:

/* Large desktop */
@media (min-width: 980px) { body { font-size:100%; line-height: 100%;} }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { body { font-size:90%; line-height: 80%;} .navbar-fixed-top {margin-bottom: 0px;} }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { body { font-size:80%; } }

/* Landscape phones and down */
@media (max-width: 480px) { body { font-size:80%; line-height: 50%; } }

Now all you have to do is alter the percentage of the font-size and your fonts will both scale and transform depending on your need.