Grow your CSS skills. Land your dream job.


Last updated on:

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 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.

You may also use two relative keyword values:

  • larger
  • smaller

These are relative to the font size of the parent element. 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.

Length values (e.g. px, em, rem, ex, etc) cannot be negative. Percentage values are relative to the parent element's font size.

Relative Values with em, rem, and ex

The em unit is always a relative unit based on the computed value of the font size of the element to which the em unit is applied. For example:

div {
  font-size: 14px;
  padding: 2em;

div p {
  font-size: 2em;

In this example, for both the div element and the descendant paragraph, the value of 1em is 14px. This is because the font-size property is, by default, inherited from parent to child.

Therefore, the font size for the paragraphs inside of div elements will be computed to 28px, which is 14px multiplied by two (2em). The padding on the div elements, which is also 2em, will likewise compute to 28px.

In the case of rem units, however, a single rem unit is based on the value of the root element (the <html> element).

html {
  font-size: 16px;

p {
  font-size: 1.5rem;

In the above example, the rem unit is equal to 16px (inherited from the root element) and thus the font size for the paragraph elements will compute to 24px (16px plus half of 16px, or 1.5rem).

For ex units, 1ex would be equal to the computed height of the lowercase letter x, which is defined based on the font size.

When 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.

Related Properties

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works Works Works Works Works Works Works

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".