Is the relative measure
rem new to you? Most people are familiar with the
em unit of measure, but the
rem hasn’t been around quite as long. It came into being with CSS3.
The definition of
rem is “root relative em.” So a
rem is really nothing new, it’s merely an
em living in a very close relationship with the page root – typically the
The default font size in most browsers is 16px. We equate this with a font-size value of 100% or 1em or 1rem. These are the relative font units used for responsive web pages.
To repeat, a
rem is relative to the root. Why is this so important? Because an
em bases font-size on the element it’s used on, and those sizes are inherited. For example, if a
ul had a declared font-size of
0.75em, a nested
ul within that list would have a font-size of
0.75em of the parent list.
On the other hand, if a rule for
ul set the font-size at
0.75rem, any nested list would remain at that
0.75rem size because it is root relative, not relative to the parent element.
Browser support for the
rem is very good among modern browsers. Why not give
rem a try?