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!     

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     .