<p class="usa-intro">Intro text is larger.</p> <p>Body text is standard size.</p> <p><a href="#">This is a link</a> within text.</p>
Typography
Government websites need clear and consistent headings, highly legible body paragraphs, clear labels, and easy-to-use input fields.
Typesetting with USWDS
Typesetting controls the readability of a text with the size, style, and spacing of its type. The more readable a text is, the more easily users can understand its content.
Headings
Component Preview
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Component Code
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
Body Text
Component Preview
This is intro text. Great Smoky Mountains National Park straddles the border of North Carolina and Tennessee.
This is body text. The sprawling landscape encompasses lush forests and an abundance of wildflowers that bloom year-round. Streams, rivers and waterfalls appear along hiking routes that include a segment of the Appalachian Trail.
This is a text link within a body of text.
Component Code
Display Classes
Component Preview
Display 1
Display 2
Display 3
Display 4
Component Code
<p class="display-1">Display 1</p> <p class="display-2">Display 2</p> <p class="display-3">Display 3</p> <p class="display-4">Display 4</p>
Included Typefaces
Source Sans Pro
Source Sans Pro, designed by Paul D. Hunt, 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.
Aa
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
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
0 1 2 3 4 5 6 7 8 9
Merriweather
Merriweather, designed by Sorkin Type, is an open-source serif typeface designed for on-screen reading. This font is ideal for text-dense design with a tall x-height but relatively small letterforms.
Aa
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
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
0 1 2 3 4 5 6 7 8 9
Public Sans
Public Sans is an open-source sans serif typeface designed and maintained by USWDS. It is a strong, neutral, principles-driven typeface for text or display based on a traditional American form.
Aa
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
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
0 1 2 3 4 5 6 7 8 9
Roboto Mono
Roboto Mono, designed by Christian Robinson, is a monospaced addition to the Roboto type family. The fonts are optimized for readability on screens with special consideration given to glyphs important for reading and writing code.
Aa
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
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
0 1 2 3 4 5 6 7 8 9
Guidance
Font Size
- Use a comfortable reading size for body text.
- For most text, including body copy, use at least an effective size of 16px (font-size 5). Smaller and larger text can be used sparingly for special purposes.
Text Alignment
- Set type flush left.
- Type set flush left provides the eye a constant starting point for each line, making text easier to read.
Measure (Line Length)
- Most lines of text should be 45-90 characters.
- The current standard range for readable line length is 45 to 90 characters per line. A good target for long texts is 66 characters.
Line Height
- Longer texts require more line height.
- Headings and other content elements no longer than a line or two can have a line height between 1 and 1.35. Longer texts should have a line height of at least 1.5.
Accessibility
- Avoid long sections of uppercase text.
- Uppercase text has a serious negative effect on readability. Consider other type treatments for any uppercase text longer than just a few words.
- Avoid long sections of italic or bold text.
- Both italic and bold text can degrade readability. Both are best used for limited sections of contrast.
USWDS Documentation
For more guidance, view the USWDS Typography Documentation.
Settings
| Variable | Description |
|---|---|
$theme-font-type-sans
|
Sans serif font family. |
$theme-font-type-serif
|
Serif font family. |
$theme-font-type-mono
|
Monospace font family. |
$theme-body-font-family
|
Font family for body text. |
$theme-body-font-size
|
Font size for body text. |
$theme-body-line-height
|
Line height for body text. |
$theme-h1-font-size
|
Font size for H1 headings. |
$theme-h2-font-size
|
Font size for H2 headings. |
$theme-h3-font-size
|
Font size for H3 headings. |
$theme-text-measure
|
Default measure (line length) for text. |
$theme-lead-measure
|
Measure for intro/lead text. |
