<section id="sans" class="usa-section grid-container">
<h4 class="usa-heading-alt">Public Sans (<tt>.font-family-sans</tt>)</h4>
<div class="grid-row grid-gap">
<div class="tablet:grid-col">
<p><a href="https://public-sans.digital.gov/">Public Sans</a> is a strong, neutral, principles-driven, open source typeface for text or display.</p>
</div>
<div class="font-family-sans typography-sans-intro tablet:grid-col">
<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-section grid-container">
<h4 class="usa-heading-alt">Merriweather (<tt>.font-family-serif</tt>)</h4>
<div class="grid-row grid-gap">
<div class="tablet:grid-col">
<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="font-family-serif typography-serif-intro tablet:grid-col">
<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>
No notes defined.
{% for face in typefaces %}
<section id="{{ face.id }}" class="usa-section grid-container">
<h4 class="usa-heading-alt">{{ face.name }} (<tt>.font-family-{{ face.id }}</tt>)</h4>
<div class="grid-row grid-gap">
<div class="tablet:grid-col">
{{ face.description | safe }}
</div>
<div class="font-family-{{ face.id }} typography-{{ face.id }}-intro tablet:grid-col">
<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: null
version: 1.0.0
uswds:
path: ../../dist
typefaces:
- id: sans
name: Public Sans
description: >
<p><a href="https://public-sans.digital.gov/">Public Sans</a> is a strong,
neutral, principles-driven, open source typeface for text or display.</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>