How I Met … The Old-Fashioned Way of Setting Font Sizes

“New is always better”. That’s what Barney Stinson (from “How I met Your Mother”) told Ted. But, is Jumbo Jim’s Grape Scotch a better scotch than a 30 year old Glen McKenna? No, of course not.

Which brings me to how to set font-sizes on your website.

Back in 2011 (wow, it’s been four years) Snook (Jonathan Snook writer of SMACSS) wrote this about font-sizing. Long story short: IE is terrible. And you can’t set font-size in pixels if you care about IE users who resize fonts or zoom in.

The first solutions he talks about is ems, pointing to an article by Richard Rutter “How to size text using ems” written in 2004. Snook writes “Wow, it has been almost seven years” and I say “Wow, its been almost eleven years, why am I writing about this?” Because, to this day I still use ems, and they are awesome. The set up is something like this:

body {
  // normalize base font-size to 10px on normal settings
  // using % instead of pixels to respect user settings for base font size
  font-size: 62.5%
}
h1 {
  font-size: 3.4em // will equal 34px
}
p {
  font-size: 1.4em // will equal 14px
}
// and so on

This works the way setting pixels values would, with the added benefit of allowing text resizing in those darkest of browsers. A few things to note: 62.5% isn’t a magic number, 10 is 62.5% of 16, and 16px is the font-size most browsers default to. So why not set the body’s font-size to 10px instead of some percentage? Because some people may have changed their browsers default font-size to something other than 16px. By setting it to 62.5% we respect their baseline font-size and don’t overwrite it to be 10px.

The problems with ems is that they cascade. Meaning, if you have a nested element, and a `font-size` is set on the parent, then your base size for that element is no longer 10px. This isn’t so much a “problem” as a “need for a calculator… sometimes.”

body {
  font-size: 62.5%
}
.container {
  // everything inside the container will now be based off of 14px
  font-size: 1.4em // will equal 14px
}
.container p {
  font-size: 1em // will not equal the expected 10px but will equal 14px
}

To fix that you can do one of two things: You can use rems (root ems) as Snook suggests, or you can calculate the right size and keep the ems. The drawback for rems is you’ll need a pixel fallback for IE7 and IE8, this means text resizing is out. The drawback for calculating the right size yourself, is that you have to calculate the right size yourself. You can dust off your TI-83 or use your smart phone.

Using rems:

body {
  font-size: 62.5%;
}
.container {
  font-size: 14px // fallback
  font-size: 1.4rem // will equal 14px
}
.container p {
  font-size: 10px // fallback
  font-size: 1rem // will equal 10px
}

Calculating it yourself:

body {
  font-size: 62.5%
}
.container {
  font-size: 1.4em // will equal 14px
}
.container p {
  font-size: .71428571em // will equal 10px
}

You are probably thinking to yourself ‘.71428571em’ looks silly. It does look silly, the thing is, I’ve rarely had this problem. The only scenario where I’ve run into this is in having a title with a subhead nested inside it:

<h1>My Title <span class="subtitle">Subtitle</span></h1>

And in this case I prefer to set the units of the subtitle proportionate to the title. For instance if the subtitle is 75% the size of the title I would do something like:


h1 {
  font-size: 3.2em; // 32px
}
h1 > .subtitle {
  font-size: .75em; // 75% of 32px
}

This way if the size of the title changes the subtitle can change proportionally to the title. As a bonus it means I have to change one css rule (h1 font-size) as opposed to four (h1 font-size, h1 font-size fallback, .subtitle font-size, .subtitle font-size fallback). Of course, if you are using a css preprocessor you can write a clever mixin to take care of those four rules.

Setting font-sizes in rems vs ems isn’t the difference between Jumbo Jim’s Grape Scotch and 30 year old Glen McKenna. The new way is great, it works, but it ignores about a dozen users (of the small market share of IE7 and IE8, how many actually resize their text?) I’ve done projects using rems and I’ve experimented with vw, vh, and vmin units, and as Chris Coyier (from CSS-Tricks) put it they are awesome. Still, I prefer the old fashioned ems because they work, and will continue to work.

As a wee lad in 2008 I learned this technique from the pages of Dan Cederholm’s css classic “Bulletproof Web Design”. So setting font-sizes in ems isn’t anything new, but for eleven years it has been, and will continue to be, awesome.

And that kids, is how I met the old fashioned way of setting font sizes.