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.
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.
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.
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.
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.
For situations where code is displayed or any other context that might require a monospace font.
Our typography system uses a major second (1.125) scale to provide logical steps between sizes that fit our common UI needs.
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.
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.
All text, except for inline error messages, uses neutral.
Use for titles and all primary content.
Use for tag labels, table column headers, and areas of system design.
Use for secondary, supporting content in the UI to set it back a level hierarchically and create more focus around primary content.
Color is used in typography specifically and consistently to provide semantic emphasis. There are only two colors allowed for the following specific uses.
Used for inline error messages to draw attention and support the error message tone visually.
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.
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 / Body
Sans Serif / Overline
Sans Serif / Body
Sans Serif / Heading
Sans Serif / Caption
Sans Serif / Button
Sans Serif / Labels / Caption
Sans Serif / Labels / Body
Sans Serif / Labels / Overline
Oktanauts can use the following resources when building with Odyssey: