Relative font size demo
This heading is 3em. 3 x 16px = 48px

This h2 has been set to 1.75em. 1.75 x 16px = 28px

The body tag has been set to 100%, making the base font size 16px. This paragraph has no specified size, so it inherits the base font size and renders at 16px.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The formula for figuring out how many ems to use is:

TARGET ÷ BASE = NUMBER OF EMS

So, If an element's base font size is 16px, and you are trying to change it to 24px, calculate 24 ÷ 16 = 1.5em

This div's font-size is set to 12px

Warning! Base font size can change!
This h1 is also 3em. 3 x 12 = 36px

This h2 is still 1.75em, but it renders to 21px 1.75 x 12 = 21px

This blue box is a div with a font size that has changed from 16px to 12px (75%), so all child elements of this div will use 12px as their base font size. The header above is still 3em, but renders to 36px. compare its size to the header at the top of this document.

This paragraph inherits the base font of the div, so it renders at 12px. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This section has a base font size of 16px. The padding of the box is 1.5em.

1.5 x 16 = 24px padding

This section has a base font size of 20px. The padding of the box is 1.5em.

1.5 x 20 = 30px padding

This section has a base font size of 32px. The padding of the box is 1.5em.

1.5 x 32 = 48px padding

This section has a base font size of 45px. The padding of the box is 1.5em.

1.5 x 45 = 67.5px padding

Code Demos by Melissa Cabral