Are You Using Ems with Your Media Queries?

Are You Using Ems with Your Media Queries

This post will take 3 minutes to read.

Remember the days before mobile phones? Nope, me either. It’s a safety switch in my brain to prevent terrible memories surfacing. I digress.

Back before handheld devices, before lounge-room media centre’s, before ordering dinner online—I know you do it, you’re probably eating that pizza right now—we used to sit at our 15 inch CRT monitors and play Counter-Strike 1.6. My point is that your average viewport was fairly well defined. Sites were designed to fit on an 800x600px screen and that was that.

Not any more. The way we view the internet is very different these days; devices are getting smaller, and larger. Screen resolutions vary an incredible amount. Yep, the resolution of an iPhone might be greater than those good ol’ CRT monitors, but imagine how long it would take to count the pixels on a 24 inch flat-screen!

I’m sure you have heard the term ‘responsive web design’, Ethan Marcotte recently wrote a book with that exact title. What it comes down to is designing websites that are device friendly. It doesn’t matter if you view a responsive site on a mobile, a laptop, or a 50 inch home entertainment system, the site will adjust accordingly and never look ‘broken’.

Imagine trying to view an 800x600px site on a 2560x1440px display. Wouldn’t look great would it? There are many things one could do to improve how a website dynamically responds to different viewing environments, I am only here to talk about one; responsive font-sizing. We all know that using ems allows the user to manually change the font-size of a site (great for the vision impaired), but there is another great reason to be using ems in your next project.

If you are unsure what media queries are I recommend doing what I did 3 months ago; Google until your eyes start to water. I will wait. For those of you that have neither the time or inclination (or already know what I’m talking about), please read on.

I would like you to take a moment, shut your eyes and imagine yourself on a beautiful beach. You can hear the sound of the waves crashing as you try desperately to prevent sand getting in between the keys of your laptop. What were you thinking working in these conditions!? You soldier on anyway, you are not going to let any force of nature stop you from completing this project before the deadline is due. But it sure is taking a long time changing all of your fixed font-sizes for each media query…

STOP!

Hammer time.

Whoops, my fingers are typing faster than my brain is working. Back to our beach.

Why are you using pixels? Why is it that you can’t find yourself giving them up? What excuses are you creating so that you can continue to use them guilt free? Let us now take a moment to imagine that you have finished coding the basic structure of the site you are currently working on. It is now time to dive into the incredibly fun world of media queries.

Now I would like you to imagine re-sizing ALL of your font-size declarations with one line of code. Wouldn’t that be something? Let’s take the following as a baseline:

body {
    font-size: 100%; /* Base font-size of 16px */
}
h1 {
  font-size: 3em; /* 48 / 16 */
  line-height: 1em; /* 48 / 48 */
  margin-bottom: .5em; /* 24 / 48 */
}
h2 {
  font-size: 2.25em; /* 36 / 16 */
  line-height: 1.333333333333333em; /* 48 / 36 */
  margin-bottom: .6666666666666667em; /* 24 / 36 */
}
h3 {
  font-size: 1.5em; /* 24 / 16 */
  line-height: 1em; /* 24 / 24 */
  margin-bottom: 1em; /* 24 / 24 */
}
h4 {
  font-size: 1.3125em; /* 21 / 16 */
  line-height: 1.142857142857143em; /* 24 / 21 */
  margin-bottom: 1.142857142857143em; /* 24 / 21 */
}
h5 {
  font-size: 1.125em; /* 18 / 16 */
  line-height: 1.333333333333333em; /* 24 / 18 */
  margin-bottom: 1.333333333333333em; /* 24 / 18 */
}
h6 {
  font-size: 1em; /* 16 / 16 */
  line-height: 1.5em; /* 24 / 16 */
  margin-bottom: 1.5em; /* 24 / 16 */
}
p {
  font-size: 1em; /* 16 / 16 */
  line-height: 1.5em; /* 24 / 16 */
  margin-bottom: 1.5em; /* 24 / 16 */
}

Now all you would have to do for a large screen is the following:

@media screen and (min-width: 1920px) {
    body {
        font-size: 200%; /* Base font-size of 32px */
    }
}

Whoa! It can’t be that easy? It sure is my friend. You too can save hours of your valuable time by refusing to work with pixels anymore (unless you are bribed with pizza, I can understand that). I know that I sound like an em-extremist, but there is a good reason for that; I have a huge man crush on ems. Yes they will take a little while to get used to, but once you understand the fundamentals they are a breeze to work with. If you aren’t already using them I highly recommend giving them a shot on your next project.

Tweet this