---
layout: styleguide
title: Typography
order: 01
---

<!-- Typography section begin -->
<p>USAJOBS uses the two open-source font families from the <a href="https://playbook.cio.gov/designstandards/visual-style/#typography">U.S. Web Design Standards</a>: Source Sans Pro and Merriweather. We use only the regular and bold font weight files, relying on CSS to adjust the typesetting for italic.
</p>

<h3 class="usa-heading" id="pairings">Pairings + Styles</h3>
<p>For the most part we stick to just using the Source Sans Pro family for headings and body. In a few select instances we've used Merriweather.</p>

<div class="usa-accordion-bordered usa-typography-example usa-accordion-docs">
  <ul class="usa-unstyled-list">
    <li>
      <button class="usa-accordion-button usa-button-unstyled"
          aria-expanded="false" aria-controls="typography-0">
        <h5>Source Sans Pro headings and body</h5>
      </button>
      <div id="typography-0" aria-hidden="true" class="usa-accordion-content">
        <div class="usa-grid-full">
          <div class="usa-width-two-thirds">
            <p>Inspired by the growth of simple and welcoming type in modern web UI design, this suite uses Source Sans Pro exclusively. With a range of weights designed to fit into heading styles to clearly communicate hierarchy of information, this pairing can support both extremely simple designs and more polished, promotional sites.</p>
            <p>Recommended applications: digital services that feature forms; basic and text heavy sites; marketing sites.</p>
            <p>Font weights included in this package:</p>
            <ul>
              <li>2. Source Sans Pro, Regular 400</li>
              <li>3. Source Sans Pro, Bold 700</li>
            </ul>
          </div>
          <aside class="usa-width-one-third usa-end-row">
            <h6 class="usa-heading-alt">Page Performance</h6>
            <p><span class="usa-label-big">Fast</span></p>
            <p>Ideal number of fonts. Will allow for optimal page load performance.</p>
          </aside>
          <h6 class="usa-heading-alt">Web Hierarchy</h6>
        </div>

        <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-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>Body copy. A series of <br>sentences together which <br>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><em>Italic body copy. A series of <br>sentences together which <br>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>
      </div>
    </li>
  </ul>
</div>
<!-- Typography section ends -->

<!-- Typsetting section begin -->
<h3 class="usa-heading" id="typesetting">Typesetting</h3>

<h4 class="usa-heading">Section Header</h4>

<p>USAJOBS introduces several section headers which separate and describe blocks of content.</p>

<div class="preview" id="typesetting-code">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. End of previous section content.</p>
  <h3 class="section-header">Your Documents</h3>
  <p>Start of the next section.</p>

  <h3 class="usajobs-section-header">
      Resumes <span class="usajobs-documents__header-count">(4/5)</span>
      <a href="http://usajobs.github.io/Help/how-to/account/documents/" class="usajobs-section-header__link" target="_blank">
        <i class="fa fa-question-circle"></i> Help
      </a>
    </h3>
</div>

<div class="usa-accordion-bordered usa-accordion-docs">
  <button class="usa-button-unstyled usa-accordion-button"
      aria-expanded="true" aria-controls="section-header">
    Documentation
  </button>
  <div id="section-header" aria-hidden="false" class="usa-accordion-content">
    <h4 class="usa-heading">Usability</h4>
    <ul class="usa-content-list">
      <li>The section header separates blocks of content and associates the header with the content that follows.</li>
      <li>If there is help for the entire section then a link can be used in the section header.</li>
    </ul>
  </div>
</div>
<!-- Typsetting section end -->

<!-- Links section begin -->
<h3 class="usa-heading" id="links">Links</h3>

<div class="preview" id="links-code">
  <p>
    <a href="#link">This is a link without surrounding text and it is underlined.</a>
  </p>
</div>

<div class="usa-accordion-bordered usa-accordion-docs">
  <button class="usa-button-unstyled usa-accordion-button"
      aria-expanded="true" aria-controls="links-doc">
    Documentation
  </button>
  <div id="links-doc" aria-hidden="false" class="usa-accordion-content">
    <h4 class="usa-heading">Implementation</h4>
    <ul class="usa-content-list">
      <li>The U.S. Web Design Standards already underline links within a paragraph element.</li>
      <li>Do not add text-decoration to any anchor element. Instead, add text-decoration to any anchor element within our main-content area and then defeat that rule for specific elements (buttons, etc).</li>
    </ul>

    <h4 class="usa-heading">Usability</h4>
    <ul class="usa-content-list">
      <li>For mobile usage we've decided to always underline links in main content areas and not only rely on color for link affordance. In areas where a link is also a title we've opted to not underline those links.</li>
    </ul>
  </div>
</div>