CSS – Font size property

The font-size property used to set the size of the text. Controlling text size is crucial in web design, but it is important not to manipulate font sizes to make paragraphs resemble headings or vice versa. Instead, always use the appropriate HTML tags, such as <h1> to <h6> for headings and <p> for paragraphs.

The font-size value can be either absolute or relative:

Absolute Size:

• Specifies a fixed text size.
• Prevents users from adjusting text size in some browsers, which can negatively impact accessibility.
• Useful when the physical output size is predetermined.

Relative Size:

Allows users to modify text size in browsers, improving accessibility.

Adjusts the text size relative to surrounding elements.

If a font size is not specified, the default size for normal text is 16px (16px=1em).

You can set the font size of text by using pixel or em

You can full control of the text size by setting the text size with pixels you

h1 {
  font-size: 20px;
}

h2 {
  font-size: 18px;
}

p {
  font-size: 12px;
}

Setting the text font size with em:

The CSS property font-size: 1.5em; means that the text size will be 1.5 times the size of the parent element’s font size.

em is a relative unit: It is based on the font size of the parent element.

Calculation:

• If the parent element has a font size of 16px (default browser font size), then: 1.5em=1.5×16px=24px
• If the parent element’s font size is 20px, then: 1.5em=1.5×20px=30px

.parent {
font-size: 20px;
}

.child {
font-size: 1.5em; /* This will be 30px (1.5 * 20px) */
}

The default text font size is 16px. 1em is equal to the current font size.

So, the default font size is 1em 16px.

h1 {
  font-size: 2em; /* 2 x 16px=32px */
}

h2 {
  font-size: 1.5em; /* 1.5 x 16px=24px */
}

p {
  font-size: 1em; /*1 x 16px=16px */
}

Key Points:

• 1em means the same size as the parent.
• 1.5em increases the size by 50%.
• 2em doubles the size.
• 0.5em reduces the size by half.