Wednesday, 21 August 2013

REM units explained


Been a while since I last posted, there just isn't enough time in a day!

What is a rem
This is a unit of measurement used by CSS but I've noticed a few places where people have been a little confused about what it is, how to use it and if it's supported well enough to even be used. I'm not 100% certain of this but I think rem stands for Root EM, the em refers to the em measurement used in CSS and it's a method of using the em unit measurement relative to the root font size rather than it's direct parent.

Overview of the em measurement units
Firstly I'll give a quick break down of how the em unit of measurement works, it is basically a measurement size that is relative to it's parents. That basically means if you have your body text set to 16px then for any direct child elements 1em will be equal to 16px0.5em will be equal to 8px and so on.

Now that's all great and has many advantages over the pixel (px) based measurement which I won't go into here but a problem can occur when things get nested.

For example if you have the body of your site set to 16px and then have a list nested within another list with the font size for list items set to 0.5em what happens is the list items in the top level list have a text size equal to 8px but because the em unit is relative to its parent the nested lists list items will have a font size of 4px.

How rem units solve the em nesting problem
The rem unit of measurement solves this by basing its calculations of size on the root (html / body element) text size of the document rather than it's direct parent.

Using the example above both the top level lists list items & the nested lists list items would have a text size of 8px.

That's basically all I wanted to say on this, there's plenty of more resources out there on rem units but I wanted to keep this explanation short and simple which will hopefully make it easier to understand. If anything is unclear here feel free to leave a comment and I'll get back to you.

Further reading