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