EM and REM

The default font size of my browser is 16px
I changed the font size to 30px for the parent container

Is the font size supposed to grow in rem? in the tutorial video I watched, his font size didn’t grow.

5 mins

The difference between rem and em is where the sizing is based off of.

  • em is based on the parent container
  • rem is based on the root element

You can see it better if we tweak your example a little - I added an extra instance of your class, and on the second instance, I made the font-size bigger. Note how the width of the rem divs stayed the same, but em grew because the size of the parent grew.

So if you want your font sizes to shrink and grow based on whatever container it’s in, then use em. But if you’re wanting to be sure what size everything is going to be no matter what container it’s in, use rem. Personal choice. I prefer rem for consistency and not having to do mental math to guess what it’s going to do.

2 Likes