Typography
Use typography to present your department’s brand and content as clearly as possible.
Typeface
The State Web Template uses Public Sans designed by the United States Web Design System. This strong, neutral typeface is used for text and headings.
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
Font code
Name | Usage and demo | Code |
---|---|---|
Font family | Use sitewide for all text. | font-family:'Public Sans', sans-serif; |
Lead paragraph | Use to highlight the intro paragraph on a webpage. | Class: .lead Code: font-size: calc(1.4375rem + 0.1vw);
|
Regular paragraph | Use for all body text. | font-size: calc(1.125rem + 0.1vw); |
Small-text paragraph | Use for tooltips and footnotes. | Class: .small Code: font-size: calc(1rem + 0.1vw);
|
Heading hierarchy
The line height is a ratio of 1.75 to the base font size. For each ascending level, the ratio is decreased by â…›. As a result, larger headings have smaller line-height ratios, which improves readability.
Heading 1
font-family: 'Public Sans'
font-weight: 700
font-size: calc(2.9375rem + 0.1vw)
line-height: 1.25
font-weight: 700
font-size: calc(2.9375rem + 0.1vw)
line-height: 1.25
Heading 2
font-family: 'Public Sans'
font-weight: 700
font-size: calc(2.3175rem + 0.1vw);
line-height: 1.375
font-weight: 700
font-size: calc(2.3175rem + 0.1vw);
line-height: 1.375
Heading 3
font-family: 'Public Sans'
font-weight: 700
font-size: calc(1.8125rem + 0.1vw)
line-height: 1.5
font-weight: 700
font-size: calc(1.8125rem + 0.1vw)
line-height: 1.5
Heading 4
font-family: 'Public Sans'
font-weight: 700
font-size: calc(1.4375rem + 0.1vw)
line-height: 1.625
font-weight: 700
font-size: calc(1.4375rem + 0.1vw)
line-height: 1.625
Heading 5
font-family: 'Public Sans'
font-weight: 700
font-size: calc(1.125rem + 0.1vw);
line-height: 1.75
font-weight: 700
font-size: calc(1.125rem + 0.1vw);
line-height: 1.75
Heading 6
font-family: 'Public Sans'
font-weight: 700
font-size: calc(0.875rem + 0.1vw);
line-height: 1.75
font-weight: 700
font-size: calc(0.875rem + 0.1vw);
line-height: 1.75