Designing with type can be a very subjective experience with tons of choices and options. Our goal is to reduce decision fatigue and build some of these low-level styling elements into our type components for consistency.

Typefaces, color contrast, alignment, scale, legibility, text hierarchy, responsiveness, and line length have already been considered and tested so that teams can layout out type quickly and consistently.

The type system consists of 8 reusable type styles with scale and spacing that align with Currency's base styles. The provided sizes and scale ratios can be used to implement everything from very large headlines to the small text in product cards.

We use consistent names for our text styles to bridge the language between design, engineering, and product.

The above cheat sheet is available in Figma      and can be dropped into your artboard as a name and usage reference.

Text styles are a collection of modifiers that control the appearance of text, e.g. font-face, line spacing, justification, weight, and colors.

Balancing scale and weight are key to creating texture, balance, and contrast on the page.

It is important to always use the type assignments as prescribed to maintain consistency throughout the product.

Titles grab a user's attention and communicate the main purpose of the page's content.

• Used for page and section titles only.
• Used for search engine optimization (SEO) when assigned <h1> and <h2>.
• Line length is no wider than 8 columns.

Text is used based on page hierarchy. (i.e., L2 or Hub, L3 or Round-up, L3 or Article) and comes in 4 sizes.

• Line length is no wider than 6 columns.
• Can be mixed and matched to drive hierarchy on the page.

Emphasizes the text and draws the user's eye.

• Line length no longer than 7 columns.
• Can be mixed and matched with text to drive hierarchy.

Accent Small is used to help anchor blocks of content and provide additional context to the title. Used to label content or above Title headings as a way to categorize and bring additional context to the group or card.

Accent is only used for Buttons and should not be used in any other way. The Button component in Currency has this text style built-in.

• Accent is used for Buttons only.
• Accent Small can be used for CTAs, UI, and introductions to page titles.

Typography evokes emotive qualities and reinforces NerdWallet's brand personality throughout the product space.

DOUse Bold to draw the eye to the controls of the accordian list.

DOUse bolded text in a sentence to add extra emphasis to words or terms.

DOUse Bold in Table headers to help draw the eye and parse lots of information quickly.

DON'TOveruse one style like bold in a paragraph; this defeats the purpose.

Using the correct line width is key for ensuring the readability of text. Long lines are hard for a reader and can cause fatigue.

DOUse a maximum of 6 columns of text line width.

DON'TStretch type accross 12 columns. Long line lengths makes it difficult to gauge where each line starts and ends and is not WCAG AA compliant.

• Title
• Text
• Accent