Font Size

CSS uses the font-size property to specify the size of text.

Font size can be adjusted with various units, the most common being px, em, rem, and vw.

Let's quickly review these units.

px (Pixels)

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

Example using px

p {
  font-size: 16px;
}

With the above CSS, the paragraph (p) will have a font size of 16 pixels.

em

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

Example:

Example using em

div {
  font-size: 16px;
}

p {
  font-size: 1.5em;
}

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

rem

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

Example:

Example using rem

html {
  font-size: 16px;
}

p {
  font-size: 1.5rem;
}

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

vw (Viewport Width)

vw is a unit relative to the width of the viewport (the browser window). 1vw is equal to 1% of the viewport's width.

Example using vw

p {
  font-size: 5vw;
}

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

The font size changes as the viewport size changes.

Want to learn more?

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

Learn moreSign In