CSS font-size

The font-size property in CSS is used to set the size of the text displayed on a web page. This property can be specified using various units such as pixels, ems, rems, percentages, etc. In this tutorial, we will learn how to use the font-size property with different units.

Using pixels (px)

One of the most common ways to specify the font size is using pixels (px). Here is an example of how to set the font size to 16 pixels:

Result:


    p {
      font-size: 16px;
    }

This is a sample text with font size 16px.

Using ems

The em unit is relative to the font size of the parent element. Here is an example of how to set the font size to 1.5 ems:

Result:


    p {
      font-size: 1.5em;
    }

This is a sample text with font size 1.5em.

Using rems

The rem unit is relative to the font size of the root element (usually the html element). Here is an example of how to set the font size to 1.2 rems:

Result:


    p {
      font-size: 1.2rem;
    }

This is a sample text with font size 1.2rem.

Using percentages

Font sizes can also be specified using percentages. Here is an example of how to set the font size to 150%:

Result:


    p {
      font-size: 150%;
    }

This is a sample text with font size 150%.

Experiment with different values and units for the font-size property to see how it affects the text on your web page!