CSS font-size Property

CSS font-size Property

The CSS font-size property controls the size of text and can use absolute, relative, percentage, and keyword values.

Choosing an appropriate font size helps establish visual hierarchy and makes text easier to read. CSS provides several ways to specify font sizes, including pixels, em, rem, percentages, and predefined keywords.

font-size Syntax

The font-size property is followed by a value that determines the size of the text. The value can use a CSS length unit, percentage, or supported keyword.

p {
  font-size: 18px;
}

This rule sets the font size of matching <p> elements to 18px.

Pixel Font Sizes

Pixels provide a straightforward way to specify a font size. A pixel value gives the browser a CSS pixel size rather than calculating the size relative to another font size.

p {
  font-size: 18px;
}

Pixel values are easy to understand and useful when a specific CSS size is desired. However, relative units can be more convenient when text sizes need to scale in relation to other elements or the root font size.

Relative Font Sizes

The em and rem units create font sizes relative to another font size. An em value is relative to the computed font size of the element's parent, while a rem value is relative to the font size of the root <html> element.

.parent {
  font-size: 20px;
}
.em-example {
  font-size: 1.5em;
}
.rem-example {
  font-size: 1.5rem;
}

In this example, 1.5em on the child is calculated from its parent's 20px font size, producing 30px. The 1.5rem value is calculated from the root font size instead.

Relative units are useful for creating typography that scales consistently throughout a design.

Percentage Font Sizes

A percentage font size is calculated relative to the parent element's computed font size. A value of 100% uses the same font size as the parent.

.parent {
  font-size: 20px;
}
.child {
  font-size: 125%;
}

In this example, the child text is 125% of 20px, resulting in a computed font size of 25px.

Font Size Keywords

CSS also provides keyword values that allow the browser to determine the resulting font size.

h1 {
  font-size: xx-large;
}
.note {
  font-size: smaller;
}

Inheriting font-size

The font-size property is inherited. Descendant elements normally inherit the computed font size of their parent unless another CSS rule specifies a different size.

article {
  font-size: 18px;
}

Text within the <article> will normally inherit that font size unless a more specific font-size rule applies to a descendant element.

font-size Example

The following example uses the font-size property to set the paragraph text to 20px. Open the example in the editor and change 20px to another value. Try values such as 28px, 1.5em, 1.5rem, 150%, or larger, then run the code to see how the text size changes.

p {
  font-size: 20px;
}