Font size

<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">&nbsp;<!-- 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>

<h2 class="vads-u-font-size--h4">Sizing by font</h2>
<h3 class="vads-u-font-size--h5">Sans</h3>
<p class="vads-u-font-size--sans-2xs">14.88px .vads-u-font-size--sans-2xs</p>
<p class="vads-u-font-size--sans-xs">16px .vads-u-font-size--sans-xs</p>
<p class="vads-u-font-size--sans-sm">16.96px .vads-u-font-size--sans-sm</p>
<p class="vads-u-font-size--sans-md">18px .vads-u-font-size--sans-md</p>
<p class="vads-u-font-size--sans-lg">23.36px .vads-u-font-size--sans-lg</p>
<p class="vads-u-font-size--sans-xl">34.08px .vads-u-font-size--sans-xl</p>
<p class="vads-u-font-size--sans-2xl">42.56px .vads-u-font-size--sans-2xl</p>

<h3 class="vads-u-font-size--h5">Serif</h3>
<p class="vads-u-line-height--serif vads-u-font-size--serif-2xs">13.92px .vads-u-font-size--serif-2xs</p>
<p class="vads-u-line-height--serif vads-u-font-size--serif-xs">14.88px .vads-u-font-size--serif-xs</p>
<p class="vads-u-line-height--serif vads-u-font-size--serif-sm">15.84px .vads-u-font-size--serif-sm</p>
<p class="vads-u-line-height--serif vads-u-font-size--serif-md">16.8px .vads-u-font-size--serif-md</p>
<p class="vads-u-line-height--serif vads-u-font-size--serif-lg">21.76px .vads-u-font-size--serif-lg</p>
<p class="vads-u-line-height--serif vads-u-font-size--serif-xl">31.68px .vads-u-font-size--serif-xl</p>
<p class="vads-u-line-height--serif vads-u-font-size--serif-2xl">39.68px .vads-u-font-size--serif-2xl</p>

<h3 class="vads-u-font-size--h5">Monospace</h3>
<p class="vads-u-line-height--mono vads-u-font-size--mono-2xs">13.28px .vads-u-font-size--mono-2xs</p>
<p class="vads-u-line-height--mono vads-u-font-size--mono-xs">14.24px .vads-u-font-size--mono-xs</p>
<p class="vads-u-line-height--mono vads-u-font-size--mono-sm">15.2px .vads-u-font-size--mono-sm</p>
<p class="vads-u-line-height--mono vads-u-font-size--mono-md">16.16px .vads-u-font-size--mono-md</p>
<p class="vads-u-line-height--mono vads-u-font-size--mono-lg">20.96px .vads-u-font-size--mono-lg</p>
<p class="vads-u-line-height--mono vads-u-font-size--mono-xl">30.56px .vads-u-font-size--mono-xl</p>
<p class="vads-u-line-height--mono vads-u-font-size--mono-2xl">38.08px .vads-u-font-size--mono-2xl</p>

<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>