Rem, em – length units in CSS

Joanna

CSS


I must admit that I rarely used such units of length as rem and em so far. I usually used pixels (px), because somehow it was easier for me to associate what size a given element will have.

The rem and em units, however, have one advantage over pixels – they can be set in correlation to parent font size (em) or root font size, which most often is <html> elemet (rem). This gives the ability to manipulate sizes for many elements at once. The default root font value is usually 16px (but it depends on the browser).

Em unit

Using the em unit, we can set the child’s font size to a specific part of the parent’s font size. Example:

See the Pen em by Joanna (@JoannaEl) on CodePen.

As a result, in the example above, the font size of Child1 will be 50% larger than the Parent font, and Child2 will be 50% larger than Child1.

Rem unit

Elements for which the rem unit is used are always correlated with root – most often it is an html element. So we can set the value of the base font in a root by referring to the html element or the :root element.

See the Pen rem by Joanna (@JoannaEl) on CodePen.

In the example above, paragraph 1 has 50% heigth of html font size, and paragraph 2 is 25% smaller than the html font size.

In Rem case, we can just change the value of the “base” font in the ROOT to change size of all fonts on the page – simply and quickly 🙂

Author: Joanna

I write code that (usually) works. I tame WordPress, learn React, explore the world of DevOps, and click around in the Linux console. I optimize code as a hobby, because laziness is the purest form of productivity. I do my best not to lose my mind somewhere between a bug and a deadline.

About the author

You can also like

Related posts