Overview
Typography is the style, layout, and look of text. It includes things like font choice, spacing, alignment, and overall visual design. Typography makes text easier to read and look at. It can also set the tone and mood of a piece of writing. Typography is used in books, posters, websites, and other forms of media. It's an important part of design and can greatly impact the user experience. Typography can be simple or complex, and it's always changing with new trends and technologies.
Resources
Typefaces
We supports two primary brand typefaces: Cabin and Lato. Each play a specific role in our typographic system.
Cabin
Cabin is used for Headers. Headers in typography are larger, bold text elements that provide clear hierarchy and organization, guiding readers through the content.
Cabin is used for Headers and Titles to lead the user into the primary content.
Lato
Lato is used for Body copy. Body copy in typography refers to the main text content of a document or webpage, typically set in a smaller and more readable font size, providing the bulk of information for readers.
Lato is used for primary content.
Headers
We use specific font styling and usage to build hierarchy. We use our larger fonts throughout our UI for indicating headers and helping users find sections of content This styling applies to headers, titles and text.
| Header Type | Value | Example |
|---|---|---|
| header-hero | 32px | Header hero |
| header-primary | 24px | Header primary |
| header-secondary | 20px | Header secondary |
| header-tertiary | 16px | Header tertiary |
Header - Primary
Primary headers are used for the title of a page.
Secondary headers are used for section headers.
Tertiary headers are used for subsection headers.
Titles
| Title Type | Value | Example |
|---|---|---|
| title-primary | 20px | title-primary |
| title-secondary | 16px | title-secondary |
Title - Primary
Primary titles are best for grabbing the user's attention and identifying primary content.
This search result uses a primary title to identify and highlight primary content for the user.
Title - Secondary
Secondary titles are best for creating scannable titles that don't compete with primary content. Even though they aren't related to content that's essential to the user's workflow, they're still distinguishable within the hierarchy.
