<div class="sans-style usa-grid usa-typography-example-font">
<div class="usa-width-one-half">
<h3 class="usa-display">Display 1</h3>
</div>
<div class="usa-width-one-half usa-end-row">
<p class="usa-monospace">
font-family: ‘Source Sans Pro’<br> font-weight: 700<br> font-size: 59px<br> line-height: 1.3em/77px
</p>
</div>
<div class="usa-width-one-half">
<h3 class="usa-display usa-display-alt">Display 2</h3>
</div>
<div class="usa-width-one-half usa-end-row">
<p class="usa-monospace">
font-family: ‘Source Sans Pro’<br> font-weight: 300<br> font-size: 44px<br> line-height: 1.3em/57px
</p>
</div>
<div class="usa-width-one-half">
<h1>Heading 1</h1>
</div>
<div class="usa-width-one-half usa-end-row">
<p class="usa-monospace">
font-family: ‘Source Sans Pro’<br> font-weight: 700<br> font-size: 44px<br> line-height: 1.3em/57px
</p>
</div>
<div class="usa-width-one-half">
<h2>Heading 2</h2>
</div>
<div class="usa-width-one-half usa-end-row">
<p class="usa-monospace">
font-family: ‘Source Sans Pro’<br> font-weight: 700<br> font-size: 34px<br> line-height: 1.3em/44px
</p>
</div>
<div class="usa-width-one-half">
<h3>Heading 3</h3>
</div>
<div class="usa-width-one-half usa-end-row">
<p class="usa-monospace">
font-family: ‘Source Sans Pro’<br> font-weight: 700<br> font-size: 24px<br> line-height: 1.3em/31px
</p>
</div>
<div class="usa-width-one-half">
<h4>Heading 4</h4>
</div>
<div class="usa-width-one-half usa-end-row">
<p class="usa-monospace">
font-family: ‘Source Sans Pro’<br> font-weight: 700<br> font-size: 19px<br> line-height: 1.3em/25px
</p>
</div>
<div class="usa-width-one-half">
<h5>Heading 5</h5>
</div>
<div class="usa-width-one-half usa-end-row">
<p class="usa-monospace">
font-family: ‘Source Sans Pro’<br> font-weight: 700<br> font-size: 16px<br> line-height: 1.3em/21px
</p>
</div>
<div class="usa-width-one-half">
<h6>Heading 6</h6>
</div>
<div class="usa-width-one-half usa-end-row">
<p class="usa-monospace">
font-family: ‘Source Sans Pro’<br> font-weight: 400<br> font-size: 13px<br> line-height: 1.3em/17px<br> text-transform: uppercase
</p>
</div>
<div class="usa-font-example usa-width-one-half">
<p class="usa-font-lead">Lead <br>paragraph</p>
</div>
<div class="usa-width-one-half usa-end-row">
<p class="usa-monospace">
font-family: ‘Source Sans Pro’<br> font-weight: 300<br> font-size: 22px<br> line-height: 1.5em/33px
</p>
</div>
<div class="usa-font-example usa-width-one-half">
<p class="font-example-paragraph">Body copy. A series of sentences together which make a paragraph.</p>
</div>
<div class="usa-width-one-half usa-end-row">
<p class="usa-monospace">
font-family: ‘Source Sans Pro’<br> font-weight: 400<br> font-size: 17px<br> line-height: 1.5em/26px
</p>
</div>
<div class="usa-font-example usa-width-one-half">
<p class="font-example-paragraph"><em>Italic body copy. A series of sentences together which make a paragraph.</em></p>
</div>
<div class="usa-width-one-half usa-end-row">
<p class="usa-monospace">
font-family: ‘Source Sans Pro’<br> font-style: Italic<br> font-weight: 400<br> font-size: 17px<br> line-height: 1.5em/26px
</p>
</div>
</div>
<style scoped>
.usa-typography-example-font {
margin-top: 3rem;
}
.usa-typography-example-font .usa-monospace {
margin-top: 0;
margin-bottom: 3rem;
font-size: 1.2rem;
}
</style>