Website designers can set type absolutely or relatively. Absolute measurements don’t take into account the size of the browser viewing the web page. So text will be the same size on a phone as it is on a large screen. Relative sizes take into account the device on which they are being viewed.
Assuming a designer wants to make the type relative – to what should it be relative? I have been setting font size with ’em’ for a while.
But a couple of days ago I came across the ‘rem’. I came across it when I changed the font for block quotes in the Make theme from The Theme Foundry.
As an aside, the Make theme is free and there’s a child theme on The Theme Foundry site. I like using child themes so that any changes are not overridden on an update.
Also on self-hosted sites you can ‘install’ a ‘custom CSS file by using Jetpack. Either way, you can make changes at will and that’s what I wanted to do. I thought the font for blockquotes was too big, so I used Firebug in Firefox to track down the setting. And that’s where I saw that the font was 2.4 rem.
This article Confused About REM and EM? explains it. In a nutshell, em is relative to the font size of its direct or nearest parent and so on in a series of steps from the base font size, while rem is only relative to the base font-size and jumps the intermediate parents and grandparents.
There’s a link in the article to Type Scale. If you like messing about with type, take a look.