Skip to content

Typography

NerdWallet uses consistent typefaces to establish clear hierarchies and create a cohesive foundation that guides users through our 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.

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. Everything is based on a system where 1 REM is 16 px.