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

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.

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.

• Title
• Text
• Accent