ual: Design System

Typography

Strong and consistent use of our typeface, Helvetica Neue, is an integral part of our brand, helping to build brand recognition since its introduction in 2012.

Overview

Our primary typeface is Helvetica Neue 75 Bold. We use this weight for main headings and Helvetica Neue 75 Roman for lower styles.

Typography, like other foundations in the design system, is designed to be simple, beautiful, and to take a back seat. This allows the content and student work to do the talking.

The design system allows for the scaling of typography across devices to happen seamlessly. Without breakpoints and large jumps in size from one device to another, we can maintain the relationship between different type styles. As well as type size scaling dynamically in the code, the space between different type styles also scales accordingly. Special attention has been paid to creating visual hierarchy so that text is closer to the content it belongs to than the text or content around it.

Type tokens

Type tokens are a composite token, which means they are made up of multiple text-related style properties combined into one token that can be applied all at once. In the context of UAL, each type token includes seven properties:

  • Font family
  • Font weight
  • Font size
  • Line height
  • Letter spacing
  • Paragraph spacing
  • Text decoration

Composite token structure of a text style with body hyperlink in the centre and its properties around the edges.

Example of the Body hyperlink type token, made up of multiple typography properties grouped into one reusable style.

With this token structure in place, you simply need to select the text style, and all the values inside the composite token will be applied automatically. There is no need to adjust each setting individually. This approach is designed to help everyone reuse typography more consistently and eliminate manual styling decisions.

Text styles

It is important to use the set text styles (shown below) when designing in Figma, as well as in the content development and build. Using these set styles ensures consistency and will set all the correct scales and spacing in your designs.

Text styles listed in size order from largest to smallest.

A list of all the text styles available to designers in Figma.

Applying text

Connect your Figma file to the UAL Figma UI Kit. This creates a live link between your designs and the system. When tokens update, your designs update automatically.

Accessibility

The finer details of the type spacing and sizing have been designed to meet accessibility WCAG 2.2 AA standards.

  • letter spacing is 0.12% in the code (0% in Figma)
  • headings are 110% line height
  • paragraphs of text are set to 150%.

The minimum type size for any scenario is 16px with body being 17px on mobile and 19px on desktop. This allows for better legibility, as well as larger touch areas where text is used for interactions.

We advise against using bold or italics as this is not accessible to screen readers.