lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

webIntroCssChapter3Title

webIntroCssChapter1Title

webIntroCssChapter2Title

webIntroCssChapter4Title

webIntroCssChapter5Title

# 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.

<br />

## px (Pixels)

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

```css title="Example using px"
p {
  font-size: 16px;
}
```

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

<br />

## em

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

Example:

```css title="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.

<br />

## rem

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

Example:

```css title="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.

<br />

## 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.

```css title="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.

vw stands for 'Viewport Width', and it is a unit that adjusts the font size based on the width of the screen. For example, if the screen width is 1000px, 5vw will be 50px. Therefore, using vw is useful for responsive design.

### What CSS unit should be used to fill in the blank?