What is REM and Why is it Important

In this chapter we’ll be showing you why REM is important and why it’s considered a better approach to use REM from a root-level architectural perspective, than it is for responsive development.

First off, let’s create some definitions. You can find a full description of units by W3, but to abbreviate:

“Rem” is short for ‘root-em’ and it’s units dictate an element’s font size relative (this is important!) to the size of the root element.
“Em” unit is simply the font-size.

So to start out, in our application we need to set our font-size at the root level to 16px.

html {
   /* If we change this using a responsive REM approach, it will modify the starting sizes of all implementations that use rem in our application */
   font-size: 16px;
}

This sets the root level font-size to 16px; which directly affects everything that uses REM.  So for instance, in our application if we set the following scss we would get the following results.

ion-button {
   font-size: 1rem; // This is equal to 16px when it starts, i.e. 1x of root's font-size
}
 
ion-card-title {
   font-size: 1.2em; // This is equal to 19.2px when it starts, i.e. 1.2x of root's font-size
}

Most importantly, this allows us to scale our application not only based upon the scale of a window, but also the scale of that user’s font preference.  More on this later! 

Now that we have our font-size responding directly to the root element; it’s time to adjust some of our padding and margins respectively.  One mistake we see often is this:

ion-button {
   font-size: 1rem; // This is equal to 16px when it starts, i.e. 1x of root's font-size
   padding: 30px; // this is hard coded - might look good when font is 16px, but it would be overkill if the font was 10px, and underkill if it was 40px;
}

In this case, the padding would be insanely huge if the font-size decreases, and may break the responsiveness and formatting if it increases if there’s not enough space.  So instead, we can turn this into a ratio of padding to font-size.

ion-button {
   font-size: 1rem;
   padding: 1.5rem; // In this example, the *ratio* of font to padding always stays the same
}

So you can see, using this approach can keep the ratio of our designs aligned which is great!  However, you may be saying to yourself OK the ratio stays the same – but the font-size doesn’t change to the device so how is this responsive?

Great question 🙂  Let’s cover that in our next chapter!