The font-size property

The font-size property sets a font size of a text. The property value is any size units (usually px, em or rem) or special keywords (used extremely rarely).

Syntax

selector {
	font-size: value;
}

Keywords as values

Value	Description
`xx-small`	The smallest one. Example: Lorem ipsum dolor sit amet.
`x-small`	The smallest one. Example: Lorem ipsum dolor sit amet.
`small`	Small. Example: Lorem ipsum dolor sit amet.
`medium`	Medium. Example: Lorem ipsum dolor sit amet.
`large`	Large. Example: Lorem ipsum dolor sit amet.
`x-large`	Very large. Example: Lorem ipsum dolor sit amet.
`xx-large`	The largest. Example: Lorem ipsum dolor sit amet.
`larger`	Larger than parent font by some value.
`smaller`	Smaller than parent font by some value.

Default value: medium.

Example

Let's set the font size for paragraphs to 20px:

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-size: 20px;
}

Example

In this example, the paragraph is set to 16px, and the span within it is set to 150%. In this case, the font size for the span will be 150% of its parent, i.e. the paragraph, and its actual size will be 16px * 150% = 24px:

<p>
	Lorem <span>ipsum dolor</span> sit amet.
</p>

p {
	font-size: 16px;
}
span {
	font-size: 150%;
}

Example

In this example, the paragraph is set to 16px, and the span within it is set to larger. In this case, the font size for span will be larger than its parent (i.e. the paragraph):

<p>
	Lorem <span>ipsum dolor</span> sit amet.
</p>

p {
	font-size: 16px;
}
span {
	font-size: larger;
}

Example

Please note that fonts with different font-family and the same font-size may not be visually the same size (to solve this problem, see the font-size-adjust property).

In the example below, both paragraphs are given the font-size of 16px, but different font-family:

<p id="elem1">
	Lorem ipsum dolor sit amet.
</p>
<p id="elem2">
	Lorem ipsum dolor sit amet.
</p>

#elem1 {
	font-size: 16px;
	font-family: Arial;
}
#elem2 {
	font-size: 16px;
	font-family: "Times New Roman";
}