Fonts

<section id="sans" class="usa-grid">
    <h4 class="usa-heading-alt">Source Sans Pro (<tt>.usa-sans</tt>)</h4>

    <div class="usa-grid-full">
        <div class="usa-width-one-half">
            <p>Source Sans Pro is an open-source sans serif typeface created for legibility in UI design. With a variety of weights that read easily at all sizes, Source Sans Pro provides clear headers as well as highly-readable body text.</p>
            <p>Inspired by twentieth-century American gothic typeface design, its slender but open letters offer a clean and friendly simplicity. Advanced hinting allows Source Sans Pro to render well on Windows systems which run Cleartype, and across browsers
                and devices. Moreover, it supports a variety of languages and alphabets, including Western and European language, Vietnamese, pinyin Romanization of Chinese, and Navajo.</p>

        </div>

        <div class="usa-sans typography-sans-intro usa-width-one-half usa-end-row">
            <span class="text-huge">Aa</span>
            <div>
                <p class="text-tiny">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
                <p class="text-tiny">a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
                <p class="text-tiny">0 1 2 3 4 5 6 7 8 9</p>
            </div>
        </div>
    </div>
</section>

<section id="serif" class="usa-grid">
    <h4 class="usa-heading-alt">Merriweather (<tt>.usa-serif</tt>)</h4>

    <div class="usa-grid-full">
        <div class="usa-width-one-half">
            <p>Merriweather is an open-source serif typeface designed for on-screen reading. This font is ideal for text-dense design: the letterforms have a tall x-height but remain relatively small, making for excellent readability across screen sizes
                while not occupying extra horizontal space.</p>
            <p>The combination of slim and thick weights gives the font family stylistic range, while conveying a desirable mix of classic, yet modern simplicity. Merriweather communicates warmth and credibility at both large and smaller font sizes.</p>

        </div>

        <div class="usa-serif typography-serif-intro usa-width-one-half usa-end-row">
            <span class="text-huge">Aa</span>
            <div>
                <p class="text-tiny">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
                <p class="text-tiny">a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
                <p class="text-tiny">0 1 2 3 4 5 6 7 8 9</p>
            </div>
        </div>
    </div>
</section>

<style scoped>
    .text-tiny {
        margin: 5px initial 0;
    }

    .text-tiny:first-child {
        margin-top: 0;
    }

    .text-huge {
        font-size: 140px;
        line-height: 1.05;
    }

    .text-tiny {
        font-size: 15px;
    }

    .typography-serif-intro .text-huge {
        font-size: 120px;
        line-height: 1.275;
    }

    .typography-serif-intro .text-tiny {
        font-size: 13px;
    }
</style>

There are no notes for this item.

{% for face in typefaces %}
<section id="{{ face.id }}" class="usa-grid">
  <h4 class="usa-heading-alt">{{ face.name }} (<tt>.usa-{{ face.id }}</tt>)</h4>

  <div class="usa-grid-full">
    <div class="usa-width-one-half">
      {{ face.description }}
    </div>

    <div class="usa-{{ face.id }} typography-{{ face.id }}-intro usa-width-one-half usa-end-row">
      <span class="text-huge">Aa</span>
      <div>
        <p class="text-tiny">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
        <p class="text-tiny">a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
        <p class="text-tiny">0 1 2 3 4 5 6 7 8 9</p>
      </div>
    </div>
  </div>
</section>
{% endfor %}

<style scoped>
  .text-tiny {
    margin: 5px initial 0;
  }

  .text-tiny:first-child {
    margin-top: 0;
  }

  .text-huge {
    font-size: 140px;
    line-height: 1.05;
  }

  .text-tiny {
    font-size: 15px;
  }

  .typography-serif-intro .text-huge {
    font-size: 120px;
    line-height: 1.275;
  }

  .typography-serif-intro .text-tiny {
    font-size: 13px;
  }
</style>
package:
  name: uswds
  version: 1.4.3
uswds:
  path: ../../dist
typefaces:
  - id: sans
    name: Source Sans Pro
    description: >
      <p>Source Sans Pro is an open-source sans serif typeface created for
      legibility in UI design. With a variety of weights that read easily at all
      sizes, Source Sans Pro provides clear headers as well as highly-readable
      body text.</p>

      <p>Inspired by twentieth-century American gothic typeface design, its
      slender but open letters offer a clean and friendly simplicity. Advanced
      hinting allows Source Sans Pro to render well on Windows systems which run
      Cleartype, and across browsers and devices. Moreover, it supports a
      variety of languages and alphabets, including Western and European
      language, Vietnamese, pinyin Romanization of Chinese, and Navajo.</p>
  - id: serif
    name: Merriweather
    description: >
      <p>Merriweather is an open-source serif typeface designed for on-screen
      reading. This font is ideal for text-dense design: the letterforms have a
      tall x-height but remain relatively small, making for excellent
      readability across screen sizes while not occupying extra horizontal
      space.</p>

      <p>The combination of slim and thick weights gives the font family
      stylistic range, while conveying a desirable mix of classic, yet modern
      simplicity. Merriweather communicates warmth and credibility at both large
      and smaller font sizes.</p>