Overview

Typography is the art and technique of arranging type to make written language legible. In the Abyss library, Heading, Text, and Link dive into the detail behind text formatting for Optum branding. More in-depth guidance on typography can be found below and on the Optum Brand Page.

---

Principles

Readability: ensure readability by keeping it simple with two typefaces that complement and contrast with one another.

Scalability: define and apply a typography scale that works in different platforms, no matter the screen size.

Hierarchy: creating a strong hierarchy is paramount to helping users identify where to look first, guiding them to the most important elements of the screen.

Abyss typography uses Minor Third scaling. The base is 16px for desktop and 14px for mobile.

Important: Font Deprecation

The built-in fonts for each brand theme have changed as of Abyss v1.52.0. The Optum Sans font is being decommissioned in favor of the new Enterprise Sans font. For more information on the new font, please see the following Brand documentation.

The existing legacy, Optum Sans, font will remain available for the time being and can be enabled by setting the deprecatedFont property to true in the themeOverride object:

const themeOverride = {
  deprecatedFont: true,
};

const theme = createTheme('optum', themeOverride);

Note

Any customization to the fonts field in the theme object will still override the deprecatedFont setting.

Sans-serif headings

Note

The term "Abyss" prefixes fonts such as "Enterprise Sans VF" in the documentation under Font Family. This is because from a code perspective, Abyss hosts the font files provided directly from Brand on our own CDN.

Desktop

Mobile

Paragraph

Size is the same in both desktop and mobile.

Links

Size is the same in both desktop and mobile.