CSS rem Trick

Jeff Sydor Web Design 0 Comments

Lack of rem got you down? No, I’m not talking about rapid eye movement, but instead root em which was introduced in CSS 3.

My problem with this crazy numbering system is when I see a value like 1.714285714, which is supposed to be the equivalent to 24 pixels in a 14 pixel-based system (which you would find on the Twenty Twelve theme in WordPress). How am I supposed to get to this rem result quickly? Well the calculation are simple (taken from the TwentyTwelve style.css file):

/* =Notes
————————————————————–
This stylesheet uses rem values with a pixel fallback. The rem
values (and line heights) are calculated using two variables:

$rembase: 14;
$line-height: 24;

———- Examples

* Use a pixel value with a rem fallback for font-size, padding, margins, etc.
padding: 5px 0;
padding: 0.357142857rem 0; (5 / $rembase)

* Set a font-size and then set a line-height based on the font-size
font-size: 16px
font-size: 1.142857143rem; (16 / $rembase)
line-height: 1.5; ($line-height / 16)

———- Vertical spacing

Vertical spacing between most elements should use 24px or 48px
to maintain vertical rhythm:

.my-new-div {
margin: 24px 0;
margin: 1.714285714rem 0; ( 24 / $rembase )
}

———- Further reading

http://snook.ca/archives/html_and_css/font-size-with-rem
http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/

/* =Reset
————————————————————– */

So according to the CSS’ notes, you take the pixel size you want and divide it by the rem-base (14) and you’ll get the result. Then to adjust the line-height you take the base line-height and divide it by your original pixel number (16) that you are going for and you’ll get the corresponding dimension. Then you’ll take that pen you have next to you and shove it in your ear because you realize “I haven’t used this math since high-school! Why is this now so much work!!?” Sorry for channeling my inner Lewis Black there.

Anyway, here’s a handy Rem Calculator to keep up when coding your CSS for proper rem results. It’s really cool because you can plug in your base text size in the first box and what your result sizes are in pixels that you are looking for. After you click calculate, you will see each pixel size’s corresponding rem value. No math!

Check it out here

Leave a Reply

Your email address will not be published. Required fields are marked *