WordPress 3.5 beta 1 was released a couple weeks ago, and it included the new Twenty Twelve theme. While looking at style.css, I noticed they’re using “REM” to set font sizes and margins. I had NO idea what an REM was. In fact, I just started using EM’s in other child-themes I was building. So, once again, I turned to Google and started reading.
I thought REM was a band?
By definition, the REM unit is: “Equal to the computed value of ‘font-size’ on the root element. When specified on the ‘font-size’ property of the root element, the ‘rem’ units refer to the property’s initial value.”
The REM is one of the newest font-size standards for CSS3. It stands for “Root EM”. You base your calculation on the default font-size of the HTML element – NOT the parent like EM. It’s basically “EM v2.0″.
So what?
The problem with Pixels are, they absolutely do-not-scale in Internet Explorer. Furthermore, with the onset of Responsive Web Design, having fonts that scale (in relation to the screen width) has become paramount. Percentages (%) and EM’s are better, but they’re tricky and compound. Still not an answer. A real solution?
Use the REM.
First you need to set a default “root” font-size:
html {
font-size: 100%
}
Why am I using 100% instead of 62.5%? Simplicity. This will tell a web browser to display fonts using its own default font size (Firefox, Chrome, and Safari all use 16px as the default font size).
Now, 16px = 1.00rem. This becomes our $rembase.
Calculate other font sizes by dividing your desired size by the $rembase (in pixels). Let’s say, you want your <h1> tags to be 26px?
26 ÷ 16 = 1.625rem
or
32 ÷ 16 = 2.00rem
48 ÷ 16 = 3.00rem
and so on…Let’s take a look at a sample Stylesheet:
/* $rembase = 16px */
html {
font-size: 100%;
}
body {
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 1.00rem; /* 16 ÷ $rembase */
}
h1,
h2 {
font-size: 1.625rem; /* 26 ÷ $rembase */
}
h3,
h4 {
font-size: 1.125rem; /* 18 ÷ $rembase */
}
We’ll use three places to the right of the decimal since most browsers only calculate that far.
That looks simple enough right? That’s because it is. Now your fonts will scale perfectly during a browser resize (if using responsive design), or if a user were to zoom in or out.
But what about Line Height?
Line heights have always given me headaches, that was until Chris Pearson released his Golden Ratio Typography Calculator. Now, figuring out line heights (among other settings) is a snap.
- Input your desired font size (16px)
- Specify how wide your content box is (mine is 740px)
- Click “Set my type!”
The calculator tells us our default line height should be 26px. This variable is the $line-height-base.
We’re going to be using “Unitless line heights” as explained by Eric Meyer, so we can avoid unexpected results. What’s so awesome about the unitless line height? You only have to specify it once in the <body> tag. Now, ALL other line height(s) are relative to the parent font-size. That’s too easy! (Of course, you can still specify your own to maintain complete control.)
To calculate, you divide the $line-height-base by the font-size for that particular element (in pixels).
26 ÷ 16 = 1.625
How would that look in our sample style-sheet?
/*
$rembase = 16
$line-height-base = 26
*/
html {
font-size: 100%;
}
body {
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 1.00rem;
line-height: 1.625; /* $line-height-base ÷ 16 */
}
h1,
h2 {
font-size: 1.625rem;
}
h3,
h4 {
font-size: 1.125rem;
line-height: 1.444 /* $line-height-base ÷ 18 (overrides <body>) */
}
What about margins?
Yes, you can even use REM to set your margins. Margins, or “vertical spacing” is calculated using either 24px or 48px to maintain vertical rhythm. Let’s divide 24px by our $rembase:
24 ÷ 16 = 1.500rem
Here’s our sample stylesheet
/*
$rembase = 16
$line-height-base = 26
*/
html {
font-size: 100%;
}
body {
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 1.00rem;
line-height: 1.625;
}
h1,
h2 {
font-size: 1.625rem;
}
h3,
h4 {
font-size: 1.125rem;
line-height: 1.444;
}
.some-div {
margin: 1.500rem 0; /* 24 ÷ $rembase */
}
I’m convinced, now tell me about browser support.
At the time of writing: REM’s are supported in Firefox, Chrome, Safari, Opera and yes, even IE 9 & 10. It’s also supported in all mobile browsers except for Opera Mini.
Check out this list: http://caniuse.com/rem
What about fallbacks?
As is the case with most CSS3 wizardry, REM support in IE 6, 7, and 8 is lacking and will require a PX fallback. By declaring REM’s after PX’s in the CSS this example - should degrade gracefully to the PX:
html {
font-size: 100%;
}
body {
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
font-size: 1.00rem;
line-height: 1.625;
}
h1,
h2 {
font-size: 26px;
font-size: 1.625rem;
}
h3,
h4 {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.444;
}
.some-div {
margin: 24px 0;
margin: 1.500rem 0;
}
The purpose of this post was not to stand on a soapbox and preach, but educate you on the advantages of using REM’s to enhance the typography on your site. Your comments are welcome below.
Very helpful, thank you!
Greg,
Thanks for spelling all of that out. Font sizes in responsive design have been problematic for me. This will help!