REMs, Fallbacks and Support

I’ve been using REMs for font sizing exclusively (with a fallback) since Jonathan Snook’s article - font sizing with rem from 2011. So I’ve been (more or less) writing out the font-size property like this.

.prose p {
  font-size: 16px;
  font-size: 1rem;
}

So, we’ve only got to worry about supporting Internet Explorer 9 and up as every modern browser in use today supports it, right? If we’re not wanting to support Internet Explorer 8 and below you could just do something like this and all the world will be happy.

.prose p {
  font-size: 1rem;
}

Not necessarily. One browser that’s often missed is Opera mini.

Stop laughing. Here’s some numbers.

Tim Cook let the cat out of the bag and announced there were 170 million iPads in the world. I’d quickly note that this doesn’t neccesarily mean that people are browsing the internet on those devices, but at a good guess let’s say they all are.

That’s a pretty big number but what’s that got to do with Opera mini?

Opera mini has 241 million active users.

That’s a pretty big number. Wait, that's 70 million more users than iPad owners.

So, if you’re going to be using REMs I think it’d be pretty wise to keep that pixel value fallback in there. I’m sure after you’ve gzip’d your CSS those additional characters will take up very little space.

Pre-Processors

The easiest and quickest way to always have that fallback set is using a pre-processor like Sass, LESS or Stylus. Creating a mixin would mean you're writing less code meaning you're saving time for chocolates and such.

LESS

/* Set up a variable for maths */

@doc-font-size: 16;

/* the font-size mixin */

.font-size (@size) {
  font-size: 0px + @size;
  font-size: 0rem + @size / @doc-font-size;
}

/* example of usage */

.prose p {
  .font-size(16);  
}

/* example compiled */

.prose p {
  font-size: 16px;
  font-size: 1rem;
}

Sass(SCSS)

/* Set up a variable for maths */

$doc-font-size: 16;

/* the font-size mixin */

@mixin font-size($size) {
  font-size: 0px + $size;
  font-size: 0rem + $size / $doc-font-size;
}

/* example of usage */

.prose p {
  @include font-size(16);  
}

/* example compiled */

.prose p {
  font-size: 16px;
  font-size: 1rem;
}

Stylus

/* Set up a variable for maths */

doc-font-size = 16

/* the font-size mixin */

font-size(size)
  font-size: 0px + size
  font-size: 0rem + (size / doc-font-size)

/* example of usage */

.prose p
  font-size(16)

/* example compiled */

.prose p {
  font-size: 16px;
  font-size: 1rem;
}