Understanding and Using Rem Units in CSS

www.sitepoint.com sitepoint.com3 years ago in #Dev Love536

CSS units have been the subject of several articles here on SitePoint (such as A Look at Length Units in CSS, The New CSS3 Relative Font Sizing Units, and The Power of em Units in CSS). In this article, we increase the count by having an in-depth look at rem units, which have excellent browser support and a polyfill if you need support for old IE. This article was updated in December, 2019 to reflect the current state of rem unit sizing with CSS. For more on CSS font and text properties, read our book, CSS Master, 2nd Edition. What Are rem Units? You might have encountered the term “R.E.M.” before while listening to the radio or your music player. Unlike their musical counterparts, named for the “Rapid Eye Movement” during deep sleep, in CSS rem stands for “root em”. They won’t make you lose your religion nor believe in a man on the moon. What they can do is help you achieve a harmonious and balanced design. According to the W3C spec the definition for one 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. This means that 1rem equals the font size of the html element (which for most browsers has a default value of 16px). Rem Units vs. Em Units The main problem with em units is that they are relative to the font size of their own element. As such they can cascade and cause unexpected results. Let’s consider the following example, where we want lists to have a font size of 12px, in the case where the root font size is the default 16px: html { font-size: 100%; } ul { font-size: 0.75em; } If we have a list nested inside another list, the font size of the inner list will be 75% of the size of its parent (in this case 9px). We can still overcome this problem by using something along these lines: ul ul { font-size: 1em; } This does the trick, however we still have to pay a lot of attention to situations where nesting gets even deeper. With rem units, things are a simpler: html { font-size: 100%; } ul { font-size: 0.75rem; } As all the sizes are referenced from the root font size, there is no more need to cover the nesting cases in separate declarations. Font Sizing with Rem Units One of the pioneers of using rem units for font sizing is Jonathan Snook with his Font sizing with REM article, back in May, 2011. Like many other CSS developers, he had to face the problems that em units bring in complex layouts. At that time, older versions of IE still had large market shares and they were unable to zoom text that was sized with pixels. However, as we saw earlier, it is very easy to lose track of nesting and get unexpected results with em units. The main issue with using rem for font sizing is that the values are somewhat difficult to use. Let’s see an example of some common font sizes expressed in rem units, assuming, of course, that the base size is 16px: 10px = 0.625rem12px = 0.75rem14px = 0.875rem16px = 1rem (base)18px = 1.125rem20px = 1.25rem24px = 1.5rem30px = 1.875rem32px = 2rem As we can see, these values are not very convenient for making calculations. For this reason, Snook used a trick called “62.5%“. It was not a new discovery, by any means, as it…

Like to keep reading?

This article first appeared on sitepoint.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply