Skip to main content
Practice

Font Size (font-size)

CSS allows you to specify the font size using the font-size property.

Font size can be controlled with several units, the most commonly used being px, em, rem, and vw.

Let's quickly review the length units we learned earlier.


px (Pixels)​

Pixels are the basic unit of measure on the screen, representing the small dots that make up the display.

Example Usage​

CSS
p {
  font-size: 16px;
}

The above CSS sets the font size of the paragraph (p) to 16 pixels.


em​

em is a relative unit that calculates the length based on the font-size of the element's parent.

Example:

CSS
div {
  font-size: 16px;
}

p {
  font-size: 1.5em;
}

Since the p tag is a child of div, the font size of the p tag will be 1.5 times that of the div, which is 24px.


rem​

rem stands for "Root EM," and it is based on the font-size of the root HTML element.

Example:

CSS
html {
  font-size: 16px;
}

p {
  font-size: 1.5rem;
}

The font size of the p tag will be 1.5 times the root HTML element's font size, which is 24px.


vw (Viewport Width)​

vw is a unit relative to the width of the viewport. 1vw is equal to 1% of the viewport width.

Example:

CSS
p {
  font-size: 5vw;
}

If the viewport width is 1000px, the font size of the p tag will be 50px. The font size will change as the viewport size changes.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.