font-size

Definition

font-size, like its name suggests, controls the size of a font.

  <p class="text-xxs">How does this text scale?</p>
  <p class="text-xs">How does this text scale?</p>
  <p class="text-sm">How does this text scale?</p>
  <p class="text-base">How does this text scale?</p>
  <p class="text-lg">How does this text scale?</p>
  <p class="text-xl">How does this text scale?</p>
  <p class="text-2xl">How does this text scale?</p>
  <p class="text-3xl">How does this text scale?</p>

You can set font-size using a variety of units. Each unit that you choose has its pros and cons.

Absolute units

These unit values already exist for you to use and they are supported by every browser. You won’t be able to adjust the size, because the browser will determine that for you.

I almost never use these values because they often don’t fit into a design system because either the sizing scale is different or the actual values are different.

font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: xxx-large;

And here’s how these absolute font-size values render. line-height and font-size are basically best friends. You might want to set that along with these values to have better control over the space between each line.

Relative units

These relative units are the cousins of the absolute units above. Their size is determined by the parent font-size value. The specific relative value that you choose will either make the font-size bigger or smaller than the parent value.

font-size: smaller;
font-size: larger;

Other values

Chances are, you’ll be using your own values to set font-size. Here are all of the values that you can choose from.

Standard values

With most designs, these standard units are what font-size values you’ll be using.

font-size: 50%;
font-size: 16px;
font-size: 1rem;
font-size: 1em;

Not as common units

These units aren’t as common, but good to use for specific use cases.

font-size: 10ex;
font-size: 10ch;
font-size: 10cm;
font-size: 10in;
font-size: 10pc;

Viewport units

You will use these units to make your font size be proportional to the viewport of your HTML document.

font-size: 100vh;
font-size: 100vw;