Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Utilities

Font size

Change the font size of an element. The font-size classes include responsive prefixes.

The font-size utility is especially useful on headings, allowing them to be logically nested while applying a custom font size.

Font size

CSS property: font-size

Sizing by name

15px .vads-u-font-size--sm

16px .vads-u-font-size--base

17px .vads-u-font-size--md

20px .vads-u-font-size--lg

30px .vads-u-font-size--xl

40px .vads-u-font-size--2xl

15px .vads-u-font-size--sm

16px .vads-u-font-size--base

17px .vads-u-font-size--md

20px .vads-u-font-size--lg

30px .vads-u-font-size--xl

40px .vads-u-font-size--2xl

Sizing by heading names

40px .vads-u-font-size--h1

30px .vads-u-font-size--h2

20px .vads-u-font-size--h3

17px .vads-u-font-size--h4

15px .vads-u-font-size--h5

15px .vads-u-font-size--h6

<h2 class="vads-u-font-size--h4">Sizing by name</h2>

<div class="vads-l-row">
  <div class="vads-l-col usa-bitter">
    <p class="vads-u-font-size--sm">15px .vads-u-font-size--sm</p>
    <p class="vads-u-font-size--base">16px .vads-u-font-size--base</p>
    <p class="vads-u-font-size--md">17px .vads-u-font-size--md</p>
    <p class="vads-u-font-size--lg">20px .vads-u-font-size--lg</p>
    <p class="vads-u-font-size--xl">30px .vads-u-font-size--xl</p>
    <p class="vads-u-font-size--2xl">40px .vads-u-font-size--2xl</p>
  </div>
  <div class="vads-l-col usa-sans">
    <p class="vads-u-font-size--sm">15px .vads-u-font-size--sm</p>
    <p class="vads-u-font-size--base">16px .vads-u-font-size--base</p>
    <p class="vads-u-font-size--md">17px .vads-u-font-size--md</p>
    <p class="vads-u-font-size--lg">20px .vads-u-font-size--lg</p>
    <p class="vads-u-font-size--xl">30px .vads-u-font-size--xl</p>
    <p class="vads-u-font-size--2xl">40px .vads-u-font-size--2xl</p>
  </div>
</div>

<h2 class="vads-u-font-size--h4">Sizing by heading names</h2>
<p class="vads-u-font-size--h1">40px .vads-u-font-size--h1</p>
<p class="vads-u-font-size--h2">30px .vads-u-font-size--h2</p>
<p class="vads-u-font-size--h3">20px .vads-u-font-size--h3</p>
<p class="vads-u-font-size--h4">17px .vads-u-font-size--h4</p>
<p class="vads-u-font-size--h5">15px .vads-u-font-size--h5</p>
<p class="vads-u-font-size--h6">15px .vads-u-font-size--h6</p>

Responsive prefixes

Add a responsive breakpoint prefix separated with a : to target a utility at a responsive breakpoint and higher, following a mobile-first methodology.

---
layout: iframe
permalink: utilities/html/font-size-responsive
---

<p class="vads-u-font-size--sm medium-screen:vads-u-font-size--lg large-screen:vads-u-font-size--2xl">Department of Veterans Affairs</p>
Breakpoint sass variable Width
$xsmall-screen 320px
$small-screen 481px
$medium-screen 768px
$small-desktop-screen 1008px
$large-screen 1201px

Read more about breakpoints.