본문으로 건너뛰기

Font Size (font-size)

Font Size (font-size)

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

Font size can be adjusted using various units, among which px, em, rem, vw are the most commonly used.

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


px (Pixels)

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

Example:

CSS
p {
font-size: 16px;
}

By setting it this way, the font size of the paragraph (p) becomes 16 pixels.


em

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

Example:

CSS
div {
font-size: 16px;
}

p {
font-size: 1.5em;
}

p is a child element of div, so 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", which is based on the font-size of the HTML root element.

Example:

CSS
html {
font-size: 16px;
}

p {
font-size: 1.5rem;
}

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


vw (Viewport Width)

vw is a unit that is relative to the width of the screen. 1vw represents 1% of the width of the screen.

Example:

CSS
p {
font-size: 5vw;
}

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