Typography

Overview

Let's keep our typography arsenal simple. Keeping things simple helps our development teams and creates visual consistency and hierarchy in our digital experiences. Reusing code helps our developers create experiences faster with a consistent look and feel. Establishing a visual hierarchy helps the user find what they are looking for easily when they visually scan a page.

Choosing a heading size

There are 5 sizes to choose from. This is to ensure a high level of flexibility and maintain visual hierarchy while keeping our CSS concise and consistent across platforms. Please use these sizes only. And no, you cannot use mobile font styles for desktop pages.

H1 - Page title


Font style: Omnes light
Size: 50pt (desktop), 42pt (mobile)
Line spacing: 100% = 50pt (desktop) / 42pt (mobile)
Color: Blue, #1790CC
Scenario usage: Identifies page name. Used at the top of the page, and nowhere else.
<h1>H1 - Page title</h1>

H2 - Section title


Font style: Omnes light
Size: 40pt (desktop), 35pt (mobile)
Line spacing: 100% = 40pt (desktop) / 35pt (mobile)
Color: Blue, #1790CC
Scenario usage: Used for section titles only.
<h2>H2 - Section title</h2>

H3 - Primary item title


Font style: Omnes light
Size: 30pt (desktop), 26pt (mobile)
Line spacing: 100% = 30pt (desktop) / 26pt (mobile)
Color: Grey, #5E5E5E
Scenario usage: Can be used in conjunction with H2. For use on white background to distinguish items within a section.
<h3>H3 - Primary item title</h3>

H4 - Secondary item title


Font style: Omnes medium
Size: 25pt (desktop), 22pt (mobile)
Line spacing: 108% = 27pt (desktop) / 23.76pt (mobile)
Color: Grey, #5E5E5E
Scenario usage: Can be used in conjunction with H2. Use sparingly. Helpful when emphasis is needed on a coloured background.
<h4>H4 - Secondary item title</h4>
H5 - Long item title

Font style: Omnes light
Size: 25pt (desktop), 22pt (mobile)
Line spacing: 108% = 27pt (desktop) / 23.76pt (mobile)
Size / Line spacing: 25pt/27pt
Color: Grey, #5E5E5E
Scenario usage: Use when there are multiple items on a page when more headline exphasis is needed beyond body text size, and space is limited within containers (ie sweepstakes CTAs).
<h5>H5 - Long item title</h5>

Overrides

In the rare case where you must use a specific heading and override the style (for SEO or table of contents purposes), you can override the headings with the following classes.

<!-- or use override using these classes -->
<h1 class="h1">H1 - Page title</h1>
<h1 class="h2">H2 - Section title</h1>
<h1 class="h3">H3 - Primary item title</h1>
<h1 class="h4">H4 - Secondary item title</h1>
<h1 class="h5">H5 - Long item title</h1>

Choosing a body text size

There are 3 sizes to choose from. And no, you cannot use mobile font sizes on desktop.

What if I want to use something different?
If you run into a scenario where a different size is needed, you must email your request to ux@loyalty.com. If it's not in the code, you cannot use it. If it's worth adding in, then it will be reviewed.

Intro body text


Font style: Omnes light
Size: 25pt (desktop), 21pt (mobile)
Line spacing: 116% = 29pt (desktop) / 24.36pt (mobile)
Color: Grey, #5E5E5E
Scenario usage: Only used in conjunction with H1 page title. Not used anywhere else.
<p class="am-body-text--intro">Intro body text</p>

Body text


Font style: Omnes regular
Size: 18pt
Line spacing: 122% = 22pt
Color: Grey, #5E5E5E
Scenario usage: Main body text size used throughout the site.
<p class="am-body-text">Body text</p>

Small body text


Font style: Omnes regular
Size: 14pt
Color: Grey, #5E5E5E
Scenario usage: Smallest body text size that can be used.
<p class="am-body-text--small">Small body text</p>

Bold body text


Font style: Omnes regular
Scenario usage: Used strategically for tertiary headers and in-line text emphasis. Font size same as body text, just thicker weight.
<p class="am-body-text--bold">Bold body text</p>

Font style: Omnes regular
Size: 14pt
Line spacing: 129% = 18pt
Color: Grey, #5E5E5E
Scenario usage: Used for legal copy (smallest size font can be). Usually located at the bottom of a page or displayed in a modal.
<p class="am-legal">Legal</p>

This is an example of a text link within a paragraph.


Font style: Omnes regular
Size: 18pt
Line spacing: 122% = 22pt
Color: Blue, #0A6FB3
Scenario usage: Used for text links that are embedded within paragraphs of body text.
<p>This is an example of a <a href="#">text link</a> within a paragraph. </p>

Text Colour Modifiers

To provide creative flexibility, we are providing several text colouring classes that can be applied with brand colours. If you use other colours than the standard heading colours, please make sure you are meeting accessibility contrast guidelines.

Heading coloured white

Heading coloured black

Heading coloured onyx

Heading coloured copy

Heading coloured copy-dark

Heading coloured grey

Heading coloured grey-dark

Heading coloured blue

Heading coloured blue-accent

Heading coloured blue-darker

Heading coloured teal

Heading coloured teal-accent

Heading coloured green

Heading coloured green-accent

Heading coloured orange

Heading coloured orange-accent

Heading coloured purple

Heading coloured purple-accent

Heading coloured pink

Heading coloured pink-accent

Heading coloured gold

<h4 class="am-text--white">Heading coloured white</h4>
<h4 class="am-text--black">Heading coloured black</h4>
<h4 class="am-text--onyx">Heading coloured onyx</h4>
<h4 class="am-text--copy">Heading coloured copy</h4>
<h4 class="am-text--copy-dark">Heading coloured copy-dark</h4>
<h4 class="am-text--link-blue">Heading coloured link-blue</h4>
<h4 class="am-text--grey">Heading coloured grey</h4>
<h4 class="am-text--grey-dark">Heading coloured grey-dark</h4>
<h4 class="am-text--blue">Heading coloured blue</h4>
<h4 class="am-text--blue-accent">Heading coloured blue-accent</h4>
<h4 class="am-text--blue-darker">Heading coloured blue-darker</h4>
<h4 class="am-text--teal">Heading coloured teal</h4>
<h4 class="am-text--teal-accent">Heading coloured teal-accent</h4>
<h4 class="am-text--green">Heading coloured green</h4>
<h4 class="am-text--green-accent">Heading coloured green-accent</h4>
<h4 class="am-text--orange">Heading coloured orange</h4>
<h4 class="am-text--orange-accent">Heading coloured orange-accent</h4>
<h4 class="am-text--purple">Heading coloured purple</h4>
<h4 class="am-text--purple-accent">Heading coloured purple-accent</h4>
<h4 class="am-text--pink">Heading coloured pink</h4>
<h4 class="am-text--pink-accent">Heading coloured pink-accent</h4>
<h4 class="am-text--gold">Heading coloured gold</h4>