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

Adding Public Sans google font to your website

Following Public Sans google font API links should be in your website's head section:

Fallback font

In case Public Sans google font fails for some reason the State Web Template will use fallback sytem-ui font, which is native font stack that selects the best font-family for each OS and device. Sytem-ui uses modern, sans-serif fonts with zero latency, which is great for performance.

Other fallback fonts and properties

system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif";
  • system-ui cross-platform generic sans-serif font family (default user interface font)
  • -apple-system targets San Francisco in Safari on Mac OS X and iOS, and it targets Neue Helvetica and Lucida Grande on older versions of Mac OS X. It properly selects between San Francisco Text and San Francisco Display depending on the text’s size.
  • Segoe UI targets Windows and Windows Phone.
  • Roboto targets Android and newer Chrome OS’. It is deliberately listed after Segoe UI so that if you’re an Android developer on Windows and have Roboto installed, Segoe UI will be used instead.
  • Helvetica Neue targets pre-El Capitan versions of Mac OS X. It is listed close to the end because it’s a popular font on other non-El Capitan computers.
  • Noto Sans, Liberation Sans are Linux sans-serif fallbacks.
  • sans-serif is the default sans-serif fallback font.

Font code

Name Usage and demo Code
Font family Use sitewide for all text. font-family:'Public Sans', system-ui
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: var(--bs-font-sans-serif);
font-weight: 700
font-size: calc(2.9375rem + 0.1vw)
line-height: 1.25
Heading 2
font-family: var(--bs-font-sans-serif);
font-weight: 700
font-size: calc(2.3175rem + 0.1vw);
line-height: 1.375
Heading 3
font-family: var(--bs-font-sans-serif);
font-weight: 700
font-size: calc(1.8125rem + 0.1vw)
line-height: 1.5
Heading 4
font-family: var(--bs-font-sans-serif);
font-weight: 700
font-size: calc(1.4375rem + 0.1vw)
line-height: 1.625
Heading 5
font-family: var(--bs-font-sans-serif);
font-weight: 700
font-size: calc(1.125rem + 0.1vw);
line-height: 1.75
Heading 6
font-family: var(--bs-font-sans-serif);
font-weight: 700
font-size: calc(0.875rem + 0.1vw);
line-height: 1.75