Skip to main content

Typography

Typography for UHC brands

Submit feedback
Edit this page

Overview​

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

Setting Global Fonts​

Fonts can be set globally throughout an application by using the createTheme function in conjunction with the ThemeProvider component. The second argument of createTheme function allows you to extend the base theme. Below is an example of setting a token named customFont.

import { ThemeProvider } from '@uhg-abyss/mobile';
import { createTheme } from '@uhg-abyss/mobile';


const theme = createTheme('uhc', {
  theme: {
    fonts: {
      customFont: 'RobotoFlex',
    },
  },
});


const App = () => {
  return <ThemeProvider theme={theme}>...</ThemeProvider>;
};

This would allow you to consume the font as a token globally.

<Text fontFamily="$customFont">Filler Text</Text>

There are 2 tokens that are reserved for consumer usage: $text and $heading. Setting the tokens for these two will set the default font for the Text and Heading components globally. If no font is set, the Text and Heading components will default to the system font.

import { ThemeProvider } from '@uhg-abyss/mobile';
import { createTheme } from '@uhg-abyss/mobile';


const theme = createTheme('uhc', {
  theme: {
    fonts: {
      heading: 'UHCSerif',
      text: 'UHCSans',
    },
  },
});


const App = () => {
  return <ThemeProvider theme={theme}>...</ThemeProvider>;
};

Headings​

Headings identify chunks of related content on a page and establish the hierarchy showing how those chunks of content relate to each other. If someone reads only the headings on a page, they will get a general understanding of the information presented.

HTML defines six heading levels: H1 to H6.

H1 identifies an entire page, or overall topic, and is the most important level. There should only be 1 H1 per page.

Find further documentation in the Heading component.

Recommendations​

  • Always have an H1 heading for the page title

  • Keep headings scannable
  • Headings are always sentence-case
  • Do not use punctuation in headings

IMPORTANT: For way-finding, every page must have an H1 available (especially for screen readers) that describes the main purpose of the page such as “Claims & Benefits”

Body Copy Text​

SF Pro is our primary iOS typeface and Roboto is our primary Android typeface for body copy. All weights are available in italics.

Regular copy is the default style for the majority of text on pages. Small copy is the secondary style for context on pages and is used for secondary text styles, as well as footnotes and legal messaging or less important content. Find further documentation in the Text Component.

Table of Contents