Skip to main content

Typography

Typography for UHC brands.

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 UHC branding. More in-depth guidance on typography can be found below and on the UHC 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 updates​

Abyss versions [v1.59.0] and above​

Following brand's directive, Abyss is reverting the default font back to UHC Sans. For teams, this means the Enterprise Sans font will no longer be the default font for the uhc theme.

The deprecatedFont flag will no longer be available. Instead, teams looking to utilize Enterprise Sans can do so by setting the enterpriseFont property to true in the themeOverride object.

For example, to use the Enterprise Sans font, you could create the theme like this:

const themeOverride = {
  enterpriseFont: true, // only use this flag for UHC theme
};


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

Abyss versions [v1.52.0] to [v1.58.0]​

The built-in default font for UHC was changed to Enterprise Sans in version Abyss v1.52.0 and remains so through version 1.58.0.

We recommend upgrading to the latest version of Abyss, but if you decide to remain on versions 1.52.0 - 1.58.0 and want to utilize UHC Sans you must set the deprecatedFont property to true in the themeOverride object:

const themeOverride = {
  deprecatedFont: true,
};


const theme = createTheme('uhc', themeOverride);
Note

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

Info

As detailed in the previous section the deprecatedFont flag is no longer available for the uhc theme in Abyss versions [v1.59.0] and later.

For more information on fonts and other brand related information, please see the following Brand documentation.

Serif headings (UHC Sans only)​

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.

Display​

Desktop​

Mobile​

Sans-serif headings​

Desktop​

Mobile​

Paragraph​

Size is the same in both desktop and mobile.

Size is the same in both desktop and mobile.

Table of Contents