Typography

The design system uses two type families: Clash Grotesk and Noto Sans.

Why did we choose these fonts?

When choosing typefaces for nyc.gov, we had to select fonts that meet these criteria:

Highly readable at different sizes and on different display types
Available and highly readable in every language required by Local Law 30 of 2017 [PDF]: Arabic, Bengali, Chinese, French, Haitian Creole, Korean, Polish, Russian, Spanish, and Urdu.
Free and widely available
Match the brand style established through our work with the public

Latin

Display typeface

Clash Grotesk semibold

Clash Grotesk Semibold is used for display type. It has a distinct voice and modern proportions that speak with authority and capture the city's architectural grit. The typeface has high legibility due to its large x-height and distinct letterforms.

Text typeface

Noto Sans Medium

Noto is a global font collection that supports scripts and alphabets of all 10 languages from Local Law 30 of 2017. Noto’s uniformity in stroke thicknesses across glyphs brings consistency to the nyc.gov experience.

Non-latin

Simplified Chinese Display

Noto Sans SC Black

Simplified Chinese Text

Noto Sans SC Medium

Japanese Display

Noto Sans JP Black

Japanese Text

Noto Sans JP Medium

Korean Display

Noto Sans KR Black

Korean Text

Noto Sans KR Medium

Urdu Display

Noto Nastaliq Urdu Bold

Urdu Text

Noto Nastaliq Urdu Medium

Arabic Display

Noto Sans Arabic Black

Arabic Text

Noto Sans Arabic Medium

Type scales

Type scales make it easier to read and find information by creating hierarchy. These type scales can be used for headings, subtitles, and body copy. All type scales except H1 and H2 have a maximum line length (width across the screen).

The minimum font size on mobile is 14 pt, but 16 pt body copy is preferred for legibility and accessibility.

Desktop scales

Display

Font: Clash Grotesk
Weight: Semibold
Size: 64px
Line Spacing: 110%
Letter Spacing: 0%
Alignment: Left
Max line length: None

H1

Font: Clash Grotesk
Weight: Semibold
Size: 56px
Line Spacing: 120%
Letter Spacing: 0%
Alignment: Left
Max line length: None

H2

Font: Clash Grotesk
Weight: Semibold
Size: 40px
Line Spacing: 105%
Letter Spacing: 0%
Alignment: Left
Max line length: None

H3

Font: Clash Grotesk
Weight: Medium
Size: 28px
Line Spacing: 125%
Letter Spacing: 1%
Alignment: Left
Max line length: 860px

H4

Font: Clash Grotesk
Weight: Medium
Size: 24px
Line Spacing: 120%
Letter Spacing: 0%
Alignment: Left
Max line length: 860px

Intro

Font: Noto Sans
Weight: Medium
Size: 22px
Line Spacing: 150%
Letter Spacing: 0%
Alignment: Left
Max line length: 860px

Body

Font: Noto Sans
Weight: Medium
Size: 18px
Line Spacing: 160%
Letter Spacing: 0%
Alignment: Left
Max line length: 860px

Labels and captions

Font: Noto Sans
Weight: Medium
Size: 16px
Line Spacing: 160%
Letter Spacing: 0%
Alignment: Left
Max line length: 4 layout columns

Mobile scales

Display

Font: Clash Grotesk
Weight: Semibold
Size: 40px
Line Spacing: 110%
Letter Spacing: 0%
Alignment: Left
Max line length: None

H1

Font: Clash Grotesk
Weight: Semibold
Size: 32px
Line Spacing: 105%
Letter Spacing: 0%
Alignment: Left
Max line length: None

H2

Font: Clash Grotesk
Weight: Semibold
Size: 28px
Line Spacing: 105%
Letter Spacing: 0%
Alignment: Left
Max line length: None

H3

Font: Clash Grotesk
Weight: Medium
Size: 22px
Line Spacing: 125%
Letter Spacing: 1%
Alignment: Left
Max line length: 860px

H4

Font: Clash Grotesk
Weight: Medium
Size: 20px
Line Spacing: 120%
Letter Spacing: 0%
Alignment: Left
Max line length: 860px

Intro

Font: Noto Sans
Weight: Medium
Size: 20px
Line Spacing: 150%
Letter Spacing: 0%
Alignment: Left
Max line length: 860px

Body

Font: Noto Sans
Weight: Medium
Size: 16px
Line Spacing: 160%
Letter Spacing: 0%
Alignment: Left
Max line length: 860px

Labels and captions

Font: Noto Sans
Weight: Medium
Size: 14px
Line Spacing: 160%
Letter Spacing: 0%
Alignment: Left
Max line length: 4 layout columns