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>

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