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.
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.
font-weight: 700
font-size: calc(2.9375rem + 0.1vw)
line-height: 1.25
font-weight: 700
font-size: calc(2.3175rem + 0.1vw);
line-height: 1.375
font-weight: 700
font-size: calc(1.8125rem + 0.1vw)
line-height: 1.5
font-weight: 700
font-size: calc(1.4375rem + 0.1vw)
line-height: 1.625
font-weight: 700
font-size: calc(1.125rem + 0.1vw);
line-height: 1.75
font-weight: 700
font-size: calc(0.875rem + 0.1vw);
line-height: 1.75