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.

Public Sans in Google Fonts

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
Heading 2
font-family: 'Public Sans'
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
Heading 4
font-family: 'Public Sans'
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
Heading 6
font-family: 'Public Sans'
font-weight: 700
font-size: calc(0.875rem + 0.1vw);
line-height: 1.75