Based on the default font size of the browser the ’em’ is used simply as a multiplier. For example lets say the default font size is 16px (the most common browser default size) and you wanted the H1 tag to be twice that size you would simply set the font-size of the H1 tag to 2em which would effectively set the height of the text to 32px. 

A good practice which allows you to more reliably set text size in your design is to first set the default browser text size to something which you can easily multiply by. If the common default browser text size is 16px we could scale it down to 10px which is extremely easy to multiply by. We can do this bey setting the default font-size to 62.5%. After doing this we can then use multipliers of 10 to get our text to the sizes we want. So now if we wanted our H1 tag to be 15px we could simply set the font-size to 1.5em. 

Why mess with em values. Because we are no longer hard coding our text to exact pixel sizes. Instead all of our text is now relative to the browser’s current default font-size which we can then alter to grow or shrink all of the text on our page.