Typography
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 Bold | Section Titles, Content headers, Card titles |
| Text Large | Card text, subtitles |
| Text Bold | Emphasized words in body content |
| Text | Body content |
| Text Small Bold | Emphasized words in a caption or subtext |
| Text Small | Captions, links, and subtext |
| Text X-Small | Legal and small links |
| Accent | Buttons and CTAs |
| Accent Small | Preheader, 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.
Best Credit Cards of the Year
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.
- Line length is no wider than 8 columns.
- Can be mixed and matched to drive hierarchy on the page.
Text Bold
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
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.
Design guidelines
Hierarchy & Formatting
Typography evokes emotive qualities and reinforces NerdWallet's brand personality throughout the product space.
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.
