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.