Typography

The Odyssey typography system is designed to carefully balance functionality, scalability, accessibility, brand, and aesthetics.

Typography is one of the most important foundations of our design system. We communicate most of our information – 85-90% of any given screen – through type. Type also influences other structures and elements, including spacing, grids, icons, and UI controls.

The following guidance, much of which is baked into components directly, explains how to use our typography system.

Fonts

Fonts

Odyssey pairs Aeonik, our core brand font, with Inter. Together, they create a user experience that’s beautiful, brand-resonant, and practical. These two fonts make up a majority of use cases throughout the user interface.

Additionally, we use Noto as an alternative to Aeonik and Inter for other languages, and Roboto Mono as our monospace font. In instances where we’re unable to use a particular font, we fall back to system fonts.

Aeonik

An expressive and visually dynamic typeface, Aeonik brings the brand aesthetic into the product. It’s used for larger-in-size and shorter-in-length titles, headings, buttons, and tabs.

Aeonik

Inter

A more direct, readable, and functional typeface, Inter is utilitarian. It’s used for smaller-scale copy and numerals, found throughout the majority of our UI. It’s used for body copy, captions, labels, and tab labels.

Inter

Noto

For non-Latin alphabet-based languages, such as Simplified Chinese and Japanese, we use Noto in place of both Aeonik and Inter. See all of our supported display languages.

Noto

Roboto Mono

For situations where code is displayed or any other context that might require a monospace font.

Roboto

Scale

.

Our typography system uses a major second (1.125) scale to provide logical steps between sizes that fit our common UI needs.

Base font size

Our base font size is 14pt, and that size is used in most non-headline contexts. WIC design selected 14pt after testing and evaluating 16pt, which is commonly recommended as the minimum accessible font size. (There is no required minimum font size for accessibility.)

Given the density of our data-driven product experience, 16pt makes the overall experience more cumbersome to interact with. A default size of 14pt allows us to fit more content on a single screen and be consistent with MUI's default font size. If users set their browser default font size larger, all font and spacing sizes are adjusted based on the size they set.

Style

Weight

Font weight is an important typographic variable that can add emphasis and differentiate content hierarchy. Odyssey weights are selected for readability and hierarchy or emphasis.

Use the bolder available font weight — Medium Aeonik or Semibold Inter — for a text element like a title or subheading to give it appropriate emphasis in the hierarchy.

Avoid using different weights, like bold or italic, for sections of text or individual words for emphasis.

Color

.

Neutral

All text, except for inline error messages, uses neutral.

 

Neutral 900

Use for titles and all primary content.

 

Neutral 700

Use for tag labels, table column headers, and areas of system design.

 

Neutral 600

Use for secondary, supporting content in the UI to set it back a level hierarchically and create more focus around primary content.

 

Semantic color

Color is used in typography specifically and consistently to provide semantic emphasis. There are only two colors allowed for the following specific uses.

Red

Used for inline error messages to draw attention and support the error message tone visually.

Semantic Red

Blue

Used for links to again draw attention and help users find secondary actions on a page.

Link Blue

Otherwise, semantic color is used only as a background surface in certain components to support the state and message: information, warning, error, and success. Learn more about color.

Tokens

Design tokens replace hardcoded visual style values, making it faster and easier to build and update designs. Tokens allow typography to be understood and used consistently across design and code.

Typography choices such as font, line height, size, tracking, and weight can be implemented using tokens. These tokens are directly integrated into our component libraries and UI kits.

Monospace

Ag
Roboto Mono 400 14px/150%
Body

Monospace / Body

Ag
Roboto Mono 400 14px/20px
FontWeightNormal

Sans Serif / Overline

Ag
Inter Medium 10px/130%, upper
Semibold

Sans Serif / Body

Ag
Inter 400 14px/20px
FontWeightNormal
Style used for paragraphs
Ag
Inter 600 14px/20px
FontWeightBold
Ag
Inter 400 14px/150%
Regular
Ag
Inter 600 14px/150%
Bold

Sans Serif / Caption

Ag
Inter 400 12px/20px
FontWeightNormal
Regular / 400
Ag
Inter 600 12px/20px
FontWeightBold
Semibold / 600
Ag
Inter 400 12px/150%
Regular

Sans Serif / Heading

Ag
Inter 600 32px/40px
Heading1
Ag
Inter 600 28px/36px
Heading2
Ag
Inter 600 25px/32px
Heading3
Ag
Inter 600 22px/28px
Heading4
Ag
Inter 600 18px/24px
Heading5
Ag
Inter 600 16px/20px
Heading6
Ag
Aeonik 500 32px/120%
Heading 1
Ag
Aeonik 500 28px/120%
Heading 2
Ag
Aeonik 500 25px/125%
Heading 3
Ag
Aeonik 500 22px/125%
Heading 4
Ag
Aeonik 500 18px/130%
Heading 5
Ag
Aeonik 500 16px/130%
Heading 6

Sans Serif / Button

Ag
Aeonik 500 14px/115%
Medium

Sans Serif / Labels / Body

Ag
Inter 400 14px/16px
FontWeightNormal
Regular / 400
Ag
Inter 600 14px/16px
FontWeightBold
Semibold / 600
Ag
Inter 400 14px/120%
Regular
Ag
Inter 600 14px/120%
Bold

Sans Serif / Labels / Caption

Ag
Public Sans 400 12px/16px
FontWeightNormal
Ag
Public Sans 600 12px/16px
FontWeightBold
Ag
Inter 600 12px/120%
Bold

Sans Serif / Labels / Overline

Ag
Inter 700 10px/130%, upper
Bold
Sparingly used for categories and titles that should be secondary to the primary focus.

Get the typography system

Odyssey Foundations Figma

Have questions or need support?

Oktanauts can use the following resources when building with Odyssey:

  • Check the Odyssey 1.0 FAQs.
  • Join #odyssey in Slack to ask questions and stay up to date about the design system.
  • Attend Odyssey Office Hours on Mondays and Wednesdays from 1-1:30 p.m. PT / 4-4:30 p.m. ET.
  • Submit feature requests to the Odyssey Jira board
  • Request a new component using the Odyssey component proposal.