Typography

The Horizon type system is designed to be flexible and modular, with guiding principles and real-world applications.

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 typeface applied to a dashboard

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 typeface applied to a dashboard

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

Example of header primary in a dashboard

Primary headers are used for the title of a page.

Header - Secondary

Example of header secondary in a dashboard

Secondary headers are used for section headers.

Header - Tertiary

Example of header tertiary in a dashboard

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.

Example of primary title used in a search result

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.

Example of secondary title used in a card component