font-size

The font-size property specifies the size, or height, of the font. font-size affects not only the font to which it is applied, but is also used to compute the value of em, rem, and ex length units.

p {
  font-size: 20px;
}

font-size can accept keywords, length units, or percentages as values. It’s important to note however that when it’s declared as part of the font shorthand property, font-size is a mandatory value. If it is not included in the shorthand, the entire line is ignored.

Length values (e.g. px, em, rem, ex, etc) which are applied to font-size cannot be negative.

Absolute keywords and values

.element {
  font-size: small;
}

It accepts the following absolute keyword values:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

These absolute values are mapped to specific font sizes as computed by the browser. But you may also use two keyword values which are relative to the font size of the parent element.

Other absolute values include mm (millimeters), cm (centimeters), in (inches), pt (points) and pc (picas). One point is equal to 1/72 of an inch whilst one pica is equal to 12 points — these values are typically used for printed documents.

Relative keywords

.element {
  font-size: larger;
}

• larger
• smaller

For example, if the parent element has a font size of small, a child element with a defined relative size of larger will make the font size equal to medium for the child element.

Percentage values

.element {
  font-size: 110%;
}

Percentage values, such as setting a font-size of 110%, are also relative to the parent element’s font size as shown in the demo below:

See the Pen qdbELL by CSS-Tricks (@css-tricks) on CodePen.

The em unit

.element {
  font-size: 2em;
}

The em unit is a relative unit based on the computed value of the font size of the parent element. This means that child elements are always dependent on their parent to set their font-size. For example:

<div class="container">
  <h2>This is a heading</h2>
  <p>This is some text.</p>
</div>

.container {
  font-size: 16px;
}

p {
  font-size: 1em;
}

h2 {
  font-size: 2em;
}

In the example above, the paragraph will have a font-size of 16px because 1 x 16 = 16px whereas the heading will be 32px because 2 x 16 = 32px. There are many advantages to scaling type up depending on the font-size of the parent element, namely we can wrap elements within a container and know that all of the children will always be relative to one another:

See the Pen Figuring out how the em unit works by CSS-Tricks (@css-tricks) on CodePen.

The rem unit

In the case of rem units, however, the font-size is dependent on the value of the root element (or the html element).

html {
  font-size: 16px;
}

p {
  font-size: 1.5rem;
}

In the above example, the rem unit is equal to 16px (because it is inherited from the html/root element) and thus the font size for all paragraph elements will compute to 24px (1.5 x 16 = 24). Unlike em units, the paragraph will ignore the styling of all its parents besides the root.

This unit is supported by the following browsers:

The ex unit

.element {
  font-size: 20ex;
}

For ex units, 1ex would be equal to the computed height of the lowercase letter x of the root element. So in the example below the html element is set to 20px and all the other font-sizes are determined by the x-height of that particular font.

See the Pen Figuring out how the ex unit works by CSS-Tricks (@css-tricks) on CodePen.

Experiment with the demo above my replacing the font-family on the html element to see how the other font-sizes change.

Viewport units

.element-one {
  font-size: 100vh;
}

.element-two {
  font-size: 100vw;
}

Viewport units, such as vw and vh, set the font-size of an element relative to the dimensions of the viewport:

• 1vw = 1% of viewport width
• 1vh = 1% of viewport height

So if we take the following example:

.element {
  font-size: 100vh;
}

Then this will state that the font-size of the element should always be 100% of the height of the viewport at all times (50vh would be 50%, 15vh would be 15% and so on). In the demo below try resizing the height of the example to watch the type stretch:

See the Pen Sizing type with vh units by CSS-Tricks (@css-tricks) on CodePen.

vw units are different in that it sets the height of the letterforms by the width of the viewport, so in the demo below you’ll need to resize the browser window horizontally to see these changes:

See the Pen Sizing type with vw units by CSS-Tricks (@css-tricks) on CodePen.

These units are supported by the following browsers:

It’s important to note there are two other viewport units: vmin and vmax. The first will find the values of vh and vw and set the font-size as the smallest of the two whilst vmax sets the font-size to the largest of these two values.

The ch unit

.element {
  font-size: 24ch;
}

The ch unit is similar to the ex unit in that it will set the font-size of an element in relation to the width of the 0 (zero) glyph of the font:

See the Pen Sizing type with ch units by CSS-Tricks (@css-tricks) on CodePen.

This unit is supported by:

Related Properties

• font
• font-family
• font-stretch
• font-style
• font-variant
• font-weight

Other Resources

• font-size on W3C
• font-size on MDN
• Font Size Idea: px at the Root, rem for Components, em for Text Elements
• The Lengths of CSS
• Why Ems?
• Viewport sized typography
• Precise control over responsive typography