Skip to content

Typography

Illustration of Currency typefaces

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.

Scale

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.

Text style name
Usage guidelines

Title

Page Titles

Title Small

Section Titles, Pull Quotes, and modal page titles
Text Large BoldSection Titles, Content headers, Card titles
Text LargeCard text, subtitles
Text BoldEmphasized words in body content
TextBody content
Text Small BoldEmphasized words in a caption or subtext
Text SmallCaptions, links, and subtext
Text X-SmallLegal and small links
AccentButtons and CTAs
Accent SmallPreheader, Labels, and Tags

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

Styles

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.

Chronicle Display Roman

Gotham Book

Gotham Medium

Gotham Bold

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

Titles

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

Title
mWeb

Best Credit Cards of the Year

Title Small
mWeb

Best Credit Cards of the Year

  • 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

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

Text Large
mWeb
Benchmark exchange market exposure potential market index volatile finance bear. Risk market exchange credit economy capital maturities public appeal.
Text
Benchmark exchange market exposure potential market index volatile finance bear. Risk market exchange credit economy capital maturities public appeal.
Text Small
Benchmark exchange market exposure potential market index volatile finance bear. Risk market exchange credit economy capital maturities public appeal.
Text X-Small
Benchmark exchange market exposure potential market index volatile finance bear. Risk market exchange credit economy capital maturities public appeal.
  • Line length is no wider than 6 columns.
  • Can be mixed and matched to drive hierarchy on the page.

Text Bold

Emphasizes the text and draws the user's eye.

Text Large Bold
mWeb
Benchmark exchange market exposure potential market index volatile finance bear. Risk market exchange credit economy capital maturities public appeal.
Text Bold
Benchmark exchange market exposure potential market index volatile finance bear. Risk market exchange credit economy capital maturities public appeal.
Text Small Bold
Benchmark exchange market exposure potential market index volatile finance bear. Risk market exchange credit economy capital maturities public appeal.
  • Line length no longer than 7 columns.
  • Can be mixed and matched with text to drive hierarchy.

Accent

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
Accent Small
Tab One Content
  • Accent is used for Buttons only.
  • Accent Small can be used for CTAs, UI, and introductions to page titles.

Design guidelines

Hierarchy & Formatting

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.

Line Width

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.