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?
I like it. Thanks! I started HTML in the days when it was done with a text editor and always loved each new feature. Alas, I won’t get much use out of rem because I have surrendered to the easy path of CMS rather than CSS.
Even with a CMS, you should have some control over presentation. But look at me, I always like the simplest possible WordPress themes!