Type Guidelines

NerdWallet uses typography to establish clear hierarchies and create a cohesive foundation that guides users through our product and content experiences. View this Sketch file to see the type system in action across select web, mobile web and native app experiences.

NerdWallet uses two typefaces: Gotham and Chronicle. Generally speaking, Gotham is our primary typeface while Chronicle is used for titles, headings, and branded moments. For specific use cases, associated with each type style, consult the table below. (Is your type style not represented on the usage chart? Talk to NDS.)

T-Shirt Sizing

Nerds 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. See the Typography component for example usage of the type scale.

NerdWallet uses SF Pro Text and SF Pro Display throughout the native iOS app. Chronicle is used sparingly as a secondary, branded option. NerdWallet uses Roboto throughout the native Android app. Chronicle is used sparingly as a secondary, branded option.

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? Talk to NDS.)

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
TypestyleUsedTypefaceWeightSizePixelLine

Title X-Large

Page titlesChronicle DisplaySemibold554px68px

Title Large

Pull quotes, modal page titlesChronicle DisplaySemibold436px45px

Title

Content headersGothamBold324px30px

Title Small

Content headers, labelsGothamBold213px20px
Title X-Small
Pre-header, marketing pages, tagsGothamBold113px20px

Body Large

Page titlesGothamBook424px32px

Body

Regular body copyGothamBook316px24px

Body Small

Product cardsGothamBook213px20px

Legal

Legal text, disclaimersGothamBook012px15px
TypestyleUsedTypefaceWeightPixelLineCharacter

Title X-Large

SF Pro DisplayBold32px40px0.39px

Title Large

SF Pro DisplayBold28px34px0.36px

Title

SF Pro DisplayBold22px28px0.35px

Title Serif

Chronicle DisplaySemibold22px24px0.44px

Title Small

SF Pro TextMedium17px22px-0.41px

Title X-Small

SF Pro TextMedium15px18px-0.24px

Body

SF Pro TextRegular17px22px-0.41px

Body Small

SF Pro TextRegular15px20px-0.24px

Body X-Small

SF Pro TextRegular13px18px-0.08px

Legal

SF Pro TextRegular12px16px0px

BUTTON

SF Pro TextSemibold17px20px-0.24px

tabBar

SF Pro TextRegular10px12px-0.24px

Note: these aren't the rendered mobile components; they're just using the correct SF Pro font.

TypestyleUsedTypefaceWeightPixelLineCharacter

Title X-Large

RobotoBold34px40px0px

Title Large

RobotoBold28px34px0px

Title

RobotoRegular20px24px0px

Title Serif

Chronicle DisplayRegular16px24px0px

Title Small

RobotoMedium16px20px0px

Body

RobotoRegular16px20px0px

Body Small

RobotoRegular14px20px0px

Body X-Small

RobotoRegular12px16px0px

Legal

RobotoRegular11px16px0p

BUTTON

RobotoMedium14px20px0.75px

tabBar

RobotoRegular12px16px0px

Note: these aren't react-native mobile components; they're just using the correct Roboto font.