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 pre­vent ter­rible memor­ies sur­fa­cing. I digress.

Back before hand­held devices, before lounge-room media centre’s, before order­ing din­ner online—I know you do it, you’re prob­ably eat­ing that pizza right now—we used to sit at our 15 inch CRT mon­it­ors and play Counter-Strike 1.6. My point is that your aver­age view­port 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 inter­net is very dif­fer­ent these days; devices are get­ting smal­ler, and lar­ger. Screen res­ol­u­tions vary an incred­ible amount. Yep, the res­ol­u­tion of an iPhone might be great­er than those good ol’ CRT mon­it­ors, but ima­gine how long it would take to count the pixels on a 24 inch flat-screen!

I’m sure you have heard the term ‘respons­ive web design’, Ethan Marcotte recently wrote a book with that exact title. What it comes down to is design­ing web­sites that are device friendly. It doesn’t mat­ter if you view a respons­ive site on a mobile, a laptop, or a 50 inch home enter­tain­ment sys­tem, the site will adjust accord­ingly and nev­er look ‘broken’.

Imagine try­ing to view an 800x600px site on a 2560x1440px dis­play. Wouldn’t look great would it? There are many things one could do to improve how a web­site dynam­ic­ally responds to dif­fer­ent view­ing envir­on­ments, I am only here to talk about one; respons­ive font-siz­ing. We all know that using ems allows the user to manu­ally change the font-size of a site (great for the vis­ion impaired), but there is anoth­er great reas­on to be using ems in your next pro­ject.

If you are unsure what media quer­ies are I recom­mend 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 inclin­a­tion (or already know what I’m talk­ing about), please read on.

I would like you to take a moment, shut your eyes and ima­gine your­self on a beau­ti­ful beach. You can hear the sound of the waves crash­ing as you try des­per­ately to pre­vent sand get­ting in between the keys of your laptop. What were you think­ing work­ing in these con­di­tions!? You sol­dier on any­way, you are not going to let any force of nature stop you from com­plet­ing this pro­ject before the dead­line is due. But it sure is tak­ing a long time chan­ging all of your fixed font-sizes for each media query…

STOP!

Hammer time.

Whoops, my fin­gers are typ­ing faster than my brain is work­ing. Back to our beach.

Why are you using pixels? Why is it that you can’t find your­self giv­ing them up? What excuses are you cre­at­ing so that you can con­tin­ue to use them guilt free? Let us now take a moment to ima­gine that you have fin­ished cod­ing the basic struc­ture of the site you are cur­rently work­ing on. It is now time to dive into the incred­ibly fun world of media quer­ies.

Now I would like you to ima­gine re-siz­ing ALL of your font-size declar­a­tions with one line of code. Wouldn’t that be some­thing? Let’s take the fol­low­ing 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 fol­low­ing:

@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 valu­able time by refus­ing to work with pixels any­more (unless you are bribed with pizza, I can under­stand that). I know that I sound like an em-extrem­ist, but there is a good reas­on for that; I have a huge man crush on ems. Yes they will take a little while to get used to, but once you under­stand the fun­da­ment­als they are a breeze to work with. If you aren’t already using them I highly recom­mend giv­ing them a shot on your next pro­ject.

Tweet this