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

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.

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.

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.

Roboto Mono

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

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.

Blue

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

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.

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.