Typography

Font Styles

Headers

Main Title

Paragraphs/Lists

Text Decoration

Banner/Slider Copy

Font Families, Weights & Sizes

The site uses rem for font sizes, but they are specified first as pixels and converted through a sass mixin.

Base Font Size : 16px

Primary Font: Aktiv Grotesk Ex (from TypeKit)

Primary font weight regular: 400

Primary font weight medium: 500

Primary font weight bold: 700

Primary font weight xbold: 800

Primary font italic: This is italic text

Primary font weight: 400

"Strong/bold" tags are set to xbold (800) automatically

Secondary Font: Didot - (italicised, used for sub headings inside CTAs and titles)

Standard Headers

Default styling for headers

text-transform: uppercase; font-weight: 500; font-style: normal; line-height: 1.2;

h1. This is a very large header. (1.875rem desktop / 1.375rem mobile/tablet portrait)

h2. This is a large header. (1.375rem desktop / 1.125rem mobile/tablet portrait)

h3. This is a medium header. (1.125rem desktop / 1rem mobile/tablet portrait)

h4. This is a moderate header. (1rem desktop / 16px mobile/tablet portrait)

h5. This is a small header. (0.875rem desktop / 0.875rem mobile/tablet portrait)

h6. This is a tiny header. (0.875rem)

Main Title (.main-title)

Text is centered by default, the underline stretches 50% across. A span tag must be included to wrap around the text. Works best with short titles that don't go over 2 lines

New In

Base Paragraphs & Lists

Paragraphs have line heights and bottom margins. ul's have everything removed, unless specified with a class. ol's show numbers unless specified with a class

Paragraphs font-size: 0.875rem; line-height: 1.6; bottom-margin: 20px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin felis ut felis tristique convallis. Aenean vulputate, nisi vel suscipit pharetra, nulla eros pulvinar sem, in blandit lacus lectus nec nibh.

Unordered List

List item
List item
List item

Unordered List with bullets

List item
List item
List item

Ordered List

List item
List item
List item

Ordered List without numbers

List item
List item
List item

Text Decoration

Some simple styles for adding underlines to text.

Standard Underline (.under)

Styled Underline (.underline)

Compact Styled Underline (.underline.compact)

Banner/Slider Copy

1px letter spacing has been added to the body copy on banners/sliders

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada libero in leo faucibus bibendum. Etiam auctor.