Skip to content

Typography

NerdWallet uses typography to establish clear hierarchies and create a cohesive foundation that guides users through our product and content experiences.

On the web, NerdWallet uses two typefaces: Gotham and Chronicle. Generally speaking, Gotham is our primary typeface while Chronicle is used for titles, headings, and branded moments. The typography styles are implemented with the Title, Body, Legal, and Type Currency components.

Our native iOS app uses SF Pro Text and SF Pro Display, and our native Android app uses Roboto. Both native apps use Chronicle sparingly as a secondary, branded option.

Is your type style not represented on the usage chart? Reach out and let us know what you need!     

TypestyleUsedTypefaceWeightPixelLineCharacter

Title X-Large

Page titlesChronicle DisplaySemibold54px68px0px

Title Large

Pull quotes, modal page titlesChronicle DisplaySemibold36px45px0px

Title

Content headersGothamBold24px30px0px

Title Small

Content headers, labelsGothamBold13px20px0px
Title X-Small
Pre-header, marketing pages, tagsGothamBold13px20px0px

Body Large

Page titlesGothamBook24px32px0px

Body

Regular body copyGothamBook16px24px0px

Body Small

Product cardsGothamBook13px20px0px

Legal

Legal text, disclaimersGothamBook12px15px0px

T-Shirt sizing

We use a T-Shirt scale to bind semantic meaning to our typography components. By communicating in terms of Titles, Body, and so on, we bridge the language amongst design, eng and product.

Font size & line height

In the same way that font, size, weight, and color are important considerations for the accessibility of typography, so is line spacing. Line-height is baked into the type style components and should not be altered. Standard body copy uses a 1:1.5 font-size to line-height ratio, as recommended by the Web Content Accessibility Guidelines (2.0)     . Headers use a 1:1.25 ratio.

Weight

We only use regular and bold font-weights for both Gotham and Chronicle. We never use a medium font-weight for web and mobile web. (Do you have a use case for a non-normal or bold font-weight? Reach out and submit a request!     )

Underlying typographic scale

Under the hood, the components use an atomic, six-size typographic scale     . The following are calculated size values for each scale size for both mobile and desktop sizes.

The scale is fluid, which means sizes tween between a mobile scale and a desktop scale, depending on the exact size of the viewport. Though we have built on top of the geometric scale for the semantic T-Shirt scale, the new type system use the same font-sizes. Everything is based on a system where 1 rem is 16 px.

This table is provided for reference; the values should not be used directly. To see the implementation, see base-styles     .

Scale SizeCalculated Sizes
Size 0
Mobile
0.75rem / 1.25
12px / 15px
Desktop
0.75rem / 1.25
12px / 15px
Size 1
Mobile
0.8125rem / 1.538
13px / 20px
Desktop
0.8125rem / 1.538
13px / 20px
Size 2
Mobile
1rem / 1.5
16px / 24px
Desktop
1rem / 1.5
16px / 24px
Size 3
Mobile
1.25rem / 1.3
20px / 26px
Desktop
1.5rem / 1.333
24px / 32px
Size 4
Mobile
1.5rem / 1.25
24px / 30px
Desktop
2.25rem / 1.167
36px / 42px
Size 5
Mobile
2rem / 1.1875
32px / 38px
Desktop
3.375rem / 1.111
54px / 60px