Skip to main content

Font size

Use font-size-n to make text larger or smaller in simple, predictable steps.

Usage​

Pick a number from 0 to 100.

  • font-size-10 is the base size.
  • font-size-5 is half the base size.
  • font-size-20 is double the base size.

Example​

<p class="font-size-24">Smaller supporting text.</p>
<p class="font-size-30">Normal paragraph text.</p>
<h2 class="font-size-40">Big callout heading.</h2>

Valid values:

  • Whole numbers only (0–100). Leading zeros are OK (font-size-03 is the same as font-size-3).
  • Invalid examples: font-size-101, font-size-2.5, font-size--1, font-size-xx.

How not to use it:

  • Don’t use font-size-* to replace headings. Use real headings (h1–h6) so structure stays meaningful.
  • Don’t sprinkle many different sizes inside one paragraph. Keep one size per block for readability.