Em Units

It's about time for you to be introduced to the em unit, which is crucial for creating scalable styles. The em is a unit of measurement that acts as a multiple of the parent element, similar to a percentage. Aaaaah! What's that mean?

Let's say your body font-size is set to 16px (which is generally the default):

The body element is the parent: all of the other elements are contained inside the body element. If you want the <h1> elements to be twice the size of the body elements, you could set the font size to 32px:

In this case, the <h1> elements are roughly twice the size of the body elements so long as the body font size is 16px. If you change the body font size, then the <h1> elements, which are stuck at 32px, will no longer be twice the size as the body elements. You'll need to change multiple values to get your pages to scale proportionately.

This is where the em unit of measurement comes into play. Again, em is a percentage of the size of the parent unit, with 1em roughly 100%. Let's make the <h1> elements twice the size of the body elements using 2em:

Good! Now if you change the parent body font-size, the child h1 will always be twice as big! If you are having trouble conceptualizing this, check out these handy examples below. The black parent text is presented in three different sizes, while the blue child is a consistent 12px, and the red child is a consistent 2em. Notice how the red text scales in relation to the black body text:

Ok, let's try the em units out for real! Modify the h1 and p selectors, and the p:first-letter pseudo-element, to display font-size in em's, rather than absolute pixels:

Test it! This is starting to get really good now. Let's define a font-size in the body tag, so we can experiment with different settings and watch the elements on your page scale in proportion! Start with 12px:

Test your work and try a few other font sizes in the body selector! Again, notice how everything scales in proportion, including the line-spacing!