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. 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.)

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.

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

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.