Relative font size

One simple but not very flexible solution is to set the font size using absolute values, and this can be used in the simplest cases.

For example, you can set the font size for the entire document in the following way:

body { font-size: 16px; }

In the assignment about inheritance we figured out that all children elements with an undeclared value for the font size value will inherit this size, i.e., 16px.

We will set another fixed value for the font size of the page heading:

h1 { font-size: 32px; }

So far, so good. But imagine that you were given the following requirement: make sure that the font size of the document increases from 16px to 20px when the page is displayed on the larger screen of a monitor. If you change the size for the body tag, then the children elements will also change in size. But the heading size will not change at all; it will remain fixed at 32px.

We want to ensure that when the main font size for the parent changes (in our case, this is the body), its descendant elements will also proportionally change their font sizes. CSS has a special unit of measurement for this case: em.

The value 1em is the same font size that was assigned to the parent. Accordingly, if we want the font of the child element to always be twice as large as its parent, then we will set the value to 2em:

h1 { font-size: 2em; }

This approach to setting font styles allows us to make the code more flexible.

Along with the normal “absolute” keywords, there are also a couple of “relative” keywords that you can apply to the font size: larger and smaller. They literally make the font size of the element larger or smaller than the size specified by its parent element. You can learn the details of these keywords in the specification.