CSS Font Size

In CSS, the font-size property is used to specify the size of the font for a text element. It determines the height of the characters in the text. You can set the font size using various units, such as pixels, ems, rems, percentages, and more.

Here are some examples of using the font-size property:

Using Pixels:

Example

p {
  font-size:  16px;
}

You can click on above box to edit the code and run again.

Output

This sets the font size of the paragraphs to 16 pixels.

Using Em Units:

Example

h1 {
  font-size: 2em;
}

You can click on above box to edit the code and run again.

Output

This sets the font size of the heading level 1 to twice the computed font size of its parent element.

Using Percentages:

Example

li {
  font-size:   120%;
}

You can click on above box to edit the code and run again.

Output

This sets the font size of list items to 120% of the font size of their parent element.

Using Rem Units:

Example

body {
  font-size:  1rem;
}

You can click on above box to edit the code and run again.

Output

This sets the root (html) font size to the default size of the browser, and other font sizes can be defined relative to it.

Using Viewport Width (vw) Units:

Example

header {
  font-size: 5vw;
}

You can click on above box to edit the code and run again.

Output

This sets the font size of the header to 5% of the viewport width. It's a responsive approach that scales with the width of the viewport.

Using Viewport Height (vh) Units:

Example

.subtitle {
  font-size: 8vh;
}

You can click on above box to edit the code and run again.

Output

This sets the font size of a subtitle to 8% of the viewport height. It's another responsive approach based on the height of the viewport.

You can use any unit that is appropriate for your design and layout preferences. The choice of units depends on the design requirements and the level of responsiveness you want to achieve. Remember that relative units (like em, rem, percentages) are often preferred for better scalability and responsiveness across different screen sizes and resolutions.