Typography and font choices in a design system establish a consistent and visually cohesive language, enhancing readability and reinforcing the brand's identity across various digital interfaces.
Font family
Our design system uses the Roboto font family, with Roboto Condensed Medium for specific headings, to create a modern, clean, and versatile appearance across all platforms.
RobotoFor body text and general content
Roboto Condensed Medium:For specific headings requiring a compact style
Body font
Roboto RegularRoboto is our main font for all our digital products and services.
Roboto is a sans-serif typeface created by Google's Christian Robertson in 2011.
Initially designed for Android, Roboto has become popular for its clean, modern look. Its versatility and readability make it suitable for various applications, and the font family includes different weights and styles.
Roboto - Condensed MediumEmphasis: Condensed fonts for headings and titles emphasize their importance by drawing attention with thicker strokes and tighter spacing. Visual Hierarchy: These fonts establish a clear visual hierarchy by creating contrast with the body text, guiding readers' eyes and aiding navigation.
Display, headings, titles
Where emphasis is required
Adds visual hierarchy
Text spacing
Line heightDivisible by 4 and ≥ font size
Line height should be divisible by 4 and equal or greater than the font size. This ensures that text of all styles aligns with a 4px grid.
TrackingUse 0.2x font size by default
Body fonts and labels use 0.2x the font size. Display, heading and title all use zero tracking by default
Paragraph spacing2 times the font size
Paragraph spacing is 2x font size by default but this may be reduced for larger styles like ‘Display’ and ‘Heading’. All paragraph spacing is rounded to be a multiple of 4.
Default colors are specified for use on the following containers: surface, surface-container, surface-container-low, surface-container-lowest, surface-container-high, and surface-container-highest.
Body texton-surface on-surface-variant
Body font color is on-surface. As a variant with slightly less contrast, on-surface-variant can be used as an option
On all surfaces, the default heading font color is on-surface. For slightly less contrast, use on-surface-variant.
Category
Color name
hex value
on-surface
neutral-variant.10
#232C53
on-surface-variant
neutral-variant.30
Text styles
Hierarchy is conveyed through variances in font weight, size, line height, and letter spacing. The updated type scale categorizes styles into five roles, Display, Headline, Title, Label, and Body, each representing a specific purpose.
The default type scale includes three size for each style: Large, Medium, and Small.
The sizes below are shown using rem. 1rem. (1 times the root font-size)
If the declared root's font-size to be 16px, 1rem=16px.
Pixel sizes for base font 16 are show further down this page
Style
Font
Weight
Size
Line height
Paragraph
Tracking
Display Large
Roboto
Regular
3.5rem
5rem
6.75rem
0rem
Display Medium
Roboto
Regular
3rem
4.25rem
6rem
0rem
Display Small
Roboto
Regular
2.6rem
3.75rem
5rem
0rem
Heading Large
Roboto
Regular
2.25rem
3.25rem
4.5rem
0rem
Heading Medium
Roboto
Regular
2rem
3rem
4rem
0rem
Heading Small
Roboto
Regular
1.8rem
2.75rem
3.5rem
0rem
Title Large
Roboto
Regular
1.6rem
2.25rem
3.25rem
0rem
Title Medium
Roboto
Regular
1.4rem
2rem
2.75rem
0.rem
Title Small
Roboto
Regular
1.25rem
1.75rem
2.5rem
0.rem
Body large
Roboto
Regular
1rem
1.5rem
2rem
+0.12rem
Body mediun
Roboto
Regular
0.875rem
1.25rem
1.75rem
+0.105rem
Body small
Roboto
Regular
0.75rem
1.125rem
1.5rem
+0.09rem
Label xlarge
Roboto
Regular
1.125rem
1.75rem
2.25rem
+0.15
Label large
Roboto
Regular
1rem
1.5rem
2rem
+0.12rem
Label medium
Roboto
Regular
0.875rem
1.25rem
1.75rem
+0.105rem
Label small
Roboto
Regular
0.75rem
1.125rem
1.5rem
+0.09rem
Usage
DisplayDisplay styles are specifically designed for the largest text on the screen and are primarily used for concise and significant text or numbers.
’Display’ styles are most effective when displayed on larger screens.
HeadlineHeadlines work well for concise, impactful text on smaller screens.
They are effective for highlighting key information or significant sections of content.
TitleTitles are smaller than headline styles and are suitable for medium-emphasis text that is relatively concise.
Title styles can be used to separate secondary passages of text or secondary content areas.
BodyBody styles are used for longer blocks of text such as paragraphs, articles, or general content.
It is the primary text style used for conveying information and is typically optimized for readability and legibility.
LabelLabel styles are smaller and functional, mainly employed for text inside components or small text in the content body, like captions.
Rem and Root unit matrix
1rem = 1 times the root font-size.
Rem, root em,' a unit measuring the font-size relative to the root element (typically the html element) in a document. As a relative unit, its values adjust proportionally when the root's font-size changes.
This table outlines the font size, line height, and paragraph spacing for root font size of 16px.
rem
px @ base 16px
Style
Size
Line Height
Paragraph spacing
Tracking
Size
Line Height
Paragraph spacing
Tracking
Display Large
3.5
5
6.75
0
56
80
108
0
Display Medium
3
4.25
6
0
48
68
84
0
Display Small
2.6
3.75
5
0
42
60
80
0
Heading Large
2.25
3.25
4.5
0
36
52
72
0
Heading Medium
2
3
4
0
32
48
64
0
Heading Small
1.8
2.75
3.5
0
28
44
56
0
Title Large
1.6
2.25
3.25
0
26
40
52
0
Title Medium
1.4
2
2.75
+0.011
22
32
44
0
Title Small
1.25
1.75
2.5
+0.007
20
28
40
0
Body Large
1
1.5
2
+0.12
16
24
32
+1.92
Body Medium
0.875
1.25
1.75
+0.105
14
20
28
+1.68
Body Small
0.75
1.125
1.5
+0.09
12
20
24
+1.44
Label xLarge
1.125
1.75
2.25
+0.15
18
28
36
+2.16
Label Large
1
1.5
2
+0.12
16
24
32
+1.92
Label Medium
0.875
1.25
1.75
+0.105
14
20
28
+1.68
Label Small
0.75
1.125
1.5
+0.09
12
20
24
+1.44
Contact us.If you have any questions or feedback relating to the Core Design System or have suggestions to help our commitment to continuous improvement, please contact: simon.andrews@joinedup.com aysha.miskin@beeline.com