Font Size

CSS Font Size

The CSS font-size property controls the size of text. Font sizes can be specified with units such as pixels, rems, ems, and percentages, allowing text to be sized for readability and different page designs.

The font-size Property

The CSS font-size property specifies the size of text. It can be applied to the entire document or to individual HTML elements.

body {
  font-size: 16px;
}

h1 {
  font-size: 32px;
}

In this example, text that inherits its size from the <body> element uses a font size of 16 pixels, while the <h1> element uses 32 pixels.

Font Size with Pixels

Pixels use the px unit and provide a straightforward way to specify a font size.

p {
  font-size: 18px;
}

The paragraph text is displayed using a specified font size of 18 pixels. Pixel values are easy to understand and are useful when a particular CSS size is desired.

Font Size with rem

The rem unit is relative to the font size of the document's root <html> element. A value of 1rem equals the root element's font size.

html {
  font-size: 16px;
}

p {
  font-size: 1rem;
}

h2 {
  font-size: 1.5rem;
}

With a root font size of 16 pixels, 1rem is 16 pixels and 1.5rem is 24 pixels.

Using rem makes it convenient to size text relative to one consistent root value.

Font Size with em

When used for font-size, the em unit is relative to the computed font size of the element's parent.

div {
  font-size: 20px;
}

div p {
  font-size: 1.25em;
}

In this example, the paragraph has a computed font size of 25 pixels because 1.25em is 1.25 times the parent's 20-pixel font size.

Because em values depend on the surrounding font size, nested elements can produce different results depending on their parent elements.

Font Size with Percentages

Percentage values for font-size are also relative to the parent element's computed font size.

div {
  font-size: 20px;
}

div p {
  font-size: 125%;
}

The paragraph is 125% of the parent's 20-pixel font size, resulting in a computed size of 25 pixels.

A value of 100% keeps the parent's font size, while values above or below 100% make the text proportionally larger or smaller.

Font Size Keywords

CSS also provides keyword values for font sizes. These allow the browser to determine an appropriate size instead of specifying a numeric measurement.

CSS also provides additional absolute-size keywords such as xx-small, x-small, x-large, xx-large, and xxx-large.

Font Size and Inheritance

The font-size property is inherited. When an element does not have its own font size, it generally inherits the computed font size of its parent.

body {
  font-size: 18px;
}

p {
  font-size: 1rem;
}

Setting a base font size on a parent element can provide a consistent starting point, while individual elements can use their own values when different sizing is needed.

Choosing Readable Font Sizes

Font size affects how easily visitors can read page content. Body text should be large enough to read comfortably without requiring visitors to zoom simply to understand ordinary content.

Headings are usually larger than surrounding body text to establish a visual hierarchy. Supporting text may be smaller, but important information should not be made unnecessarily difficult to read.

Visitors may also adjust browser text size or zoom settings, so page layouts should allow text to grow without hiding content or making the page unusable.

Choosing a Font Size Unit

Pixels are simple when a direct CSS size is useful. Relative units such as rem, em, and percentages are useful when text sizes should relate to another font size.

The rem unit is based on the root element, while em and percentage font sizes depend on the parent element. Understanding that difference helps prevent unexpected text sizes in nested elements.

Summary

The CSS font-size property controls the size of text. Pixels specify a direct CSS size, rem values are relative to the root font size, and em and percentage values are relative to the parent element's font size. CSS also provides keyword values when an exact numeric size is not needed.

The next tutorial covers Font Weight and how CSS controls the thickness of text characters.