Typography

NerdWallet uses consistent typefaces to establish clear hierarchies and create a cohesive foundation that guides users through our product.

On the web, NerdWallet uses two type families: 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 app uses SF Pro Text and SF Pro Display on iOS, and Roboto on Android. Both native apps use Chronicle sparingly as a secondary, branded option. Reach out and let us know      if your type style is not represented in the typography table below:

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     .