Typography

TL;DRPermalink to: TL;DR

The Bedrock typographical hierarchy does not match Canvas. This is due to historical design patterns that are not easily changed. Once we have control over our grid on all pages, we can look into making the font sizes match.

OverviewPermalink to: Overview

The type hierarchy is built using rem values with the base font size set to 16px (1rem), aligning to our spacing system.

Bedrock uses Roboto as its primary typeface to match Canvas. We do differ on the type scale due to design debt.

To use the font on web download it(external link) and add this code snippet to your CSS:

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: local("Roboto-Regular"),
    url("INSERT/PATH/TO/Roboto-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  src: local("Roboto-Bold"),
    url("INSERT/PATH/TO/Roboto-Bold.woff2") format("woff2");
}

html {
  font-family: "Roboto", "Helvetica Neue", "Helvetica", Arial, sans-serif;
}

(Remember to replace the "INSERT/PATH/TO" part of the string so that it matches your own folder structure.)

StatusPermalink to: Status

The current hierarchy is a pragmatic mix of a proper typographic hierarchy, and “what was possible” when wanting to clean up the old non-centralised font handling. If we were to adopt the Canvas type size tokens, it would lead to a lot of line breaks.

Road mapPermalink to: Road map

Restructure hierarchy and move towards Canvas font sizes
Remove 13px font size from <body>

Font StackPermalink to: Font Stack

The font stack contains a number of similar typefaces to support a series of fallbacks for circumstances when Roboto cannot be loaded on a user's device.

'Roboto', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;

HeadlinesPermalink to: Headlines

Our headline styles are decoupled from the h1, h2, h3, etc. tags. This allows designers and engineers to control things like tab-order separately from styling.

It is therefore fine to have a h3-tag with Heading 2 styling if the feature needs it.

Variant	Font	Font size	Line height
Hero	Roboto Bold	40dp	125%
Heading 1	Roboto Bold	32dp	125%
Heading 2	Roboto Bold	24dp	125%
Heading 3	Roboto Bold	20dp	125%
Heading 4	Roboto Bold	16dp	125%

ParagraphsPermalink to: Paragraphs

These styles are by far the most used. Text paragraphs, inputs, navigation elements, etc.

Variant	Font	Font size	Line height
Large	Roboto	40dp	140%
Large Bold	Roboto Bold	40dp	140%
Medium	Roboto	32dp	140%
Medium Bold	Roboto Bold	32dp	140%
Small	Roboto	24dp	140%
Small Bold	Roboto Bold	24dp	140%

ExtraPermalink to: Extra

Small infoPermalink to: Small info

Used for short, informative text.

Variant	Font	Font size	Line height
Small info	Roboto	10dp	auto
Small info Bold	Roboto Bold	10dp	auto

ScorePermalink to: Score

The score numbers are used when showing an actual score. Driver scores, question scores, benchmarks, difference to benchmark. It should not be used on other metrics like participation.

Yes, the naming with 2x medium is suboptimal.

The gigantic score number on the Hero header is not used in any other features, so the styling doesn’t need to be global, and is handled in the feature.

Variant	Font	Font size	Line height
Large 32	Peakon Brand Numbers	32dp	auto
Medium 24	Peakon Brand Numbers	24dp	auto
Medium 16	Peakon Brand Numbers	16dp	auto
Small 12	Peakon Brand Numbers	12dp	auto

LabelPermalink to: Label

Only used for labels on form controls. Small has been deprecated after the transition to Workday’s UI aesthetic. We no longer have small controls.

Variant	Font	Font size	Line height
Large	Roboto Bold	14dp	auto
Medium	Roboto Bold	12dp	auto

SizesPermalink to: Sizes

We recommend using the styles above for as much as possible, but if overrides are needed, here are the size variables:

Figma size (px)	Name	Value (rem)
10	font-size-3xs	0.625rem
12	font-size-xs	0.75rem
14	font-size-sm	0.875rem
16	font-size-md	1rem
20	font-size-lg	1.25rem
24	font-size-xl	1.5rem
32	font-size-2xl	2rem
40	font-size-3xl	2.5rem

AccessibilityPermalink to: Accessibility

There is no minimum text size success criteria in WCAG 2.1 AA, however we must ensure that the text respects zooming in the browser. Refer to Color usage › Text to pick the text colors with correct contrast.