Foundation
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.
Sizing by name
15px .vads-u-font-size--sm
16px .vads-u-font-size--root
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
16.96px .vads-u-font-size--source-sans-normalized
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 vads-u-font-family--serif">
<p class="vads-u-font-size--sm">15px .vads-u-font-size--sm</p>
<p class="vads-u-font-size--root">16px .vads-u-font-size--root</p>
<p class="vads-u-font-size--source-sans-normalized"> <!-- spacer for alignment --></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 vads-u-font-family--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--source-sans-normalized">16.96px .vads-u-font-size--source-sans-normalized</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.
Department of Veterans Affairs
<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>
| VADS Breakpoint Sass Variable | USWDS Breakpoint Custom Property | Width |
|---|---|---|
$xsmall-screen |
--mobile |
320px |
$small-screen |
--mobile-lg |
481px |
| -- | --tablet |
640px |
$medium-screen |
--medium-screen |
768px |
$small-desktop-screen |
--desktop |
1024px |
$large-screen |
--desktop-lg |
1201px |
Read more about breakpoints.