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 html
element.
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?