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-grid-row">
<div class="vads-grid-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-grid-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 tablet:vads-u-font-size--lg desktop-lg:vads-u-font-size--2xl">Department of Veterans Affairs</p>
$xsmall-screen
$mobile
--mobile
320px
$small-screen
$mobile-lg
--mobile-lg
481px
$tablet
--tablet
640px
$medium-screen
$medium-screen
--medium-screen
768px
$small-desktop-screen
$desktop
--desktop
1024px
$large-screen
$desktop-lg
--desktop-lg
1201px
Read more about breakpoints.