Typography

Typography across the site should be consistent. Whilst exceptions can be made on edge cases, ideally all content should be uniform in it's presentation, from heading usage to button and font usage. There is one font used across the site, the bold weight of which is used purely on headings and titles. Below is a table containing the two fonts and their uses.

Additionally, due to the fact that there are many list items across the site, forcing list styling became less useful than one might hope as most of the time these lists were not using the normal list styling as they often dictated bespoke elements. In order to bring through the correct list item style, please use the "wysiwyg" class on the parent div of the URL in order to bring through the styling for these elements.

FontVariableUsage
Century Gothic W01 Bold$font_headingUsed for headings.
Century Gothic W01$font_defaultUsed as the standard body font and on H6 titles.

Below you can find a combination of the text tags that can be found across the site, typically generated from CKEditors. If any of the below tags are missing, then there is nothing that presently uses these tags and should they be needed should be styled at a global level. Use this page to style your content or adjust any content to ensure that it all works together. Global tag styles should be targeted from within _default.scss


Heading 1

Heading 1 is 44px at desktop resolution and uses the following settings: color: $font_colour_alt; font-family: $font_heading; font-size: 44px; font-weight: normal; letter-spacing: 0.5px; line-height: 56px;

Heading 2

Heading 2 is 36px at desktop resolution and uses the following settings: color: $font_colour_alt; font-family: $font_heading; font-size: 36px; font-weight: normal; letter-spacing: 0.71px; line-height: 40px;

Heading 3

Heading 3 is 28px at desktop resolution and uses the following settings: color: $primary_alt; font-family: $font_heading; font-size: 28px; font-weight: normal; letter-spacing: 0.45px; line-height: 36px;

Heading 4

Heading 4 is 16px at desktop resolution and uses the following settings: color: $grey_dark; font-family: $font_heading; font-size: 16px; font-weight: normal; line-height: 20px;

Heading 5

Heading 5 is 14px at desktop resolution and uses the following settings: color: $primary_alt; font-family: $font_heading; font-size: 14px; font-weight: normal; letter-spacing: 0.28px;

Heading 6

Heading 6 is 12px at desktop resolution and uses the following settings: color: $burgundy_light; font-family: $font_default; font-weight: normal; font-size: 12px; line-height: 15px; margin: 0;


Intro Text

The "intro" class is applied to a paragraph and is used for styling the first paragraph in a large amount of text or to highlight a prominent section of information

Used with other standard paragraph elements. Mauris rhoncus consequat felis non finibus. Maecenas urna mi, ornare sed semper in, aliquam non dui. Integer imperdiet dictum maximus. Ut sollicitudin scelerisque erat, vel consequat massa

Mauris rhoncus consequat felis non finibus. Maecenas urna mi, ornare sed semper in, aliquam non dui. Integer imperdiet dictum maximus. Ut sollicitudin scelerisque erat, vel consequat massa


Blockquote

A quote inside a div using the "quote" class.
Mauris rhoncus consequat felis non finibus. Maecenas urna mi, ornare sed semper in, aliquam non dui. Integer imperdiet dictum maximus. Ut sollicitudin scelerisque erat, vel consequat massa commodo commodo. Mauris interdum fermentum ornare. Sed elementum justo viverra, ultricies odio in, tempor magna. Ut laoreet ut diam id ultrices.

Followed by a div with "author" class.
And another div with "company" class.

List Styles

Unordered List

  • List item 1
  • List item 2
  • List item 3
  • List item 4

Ticked Unordered List

  • List item 1
  • List item 2
  • List item 3
  • List item 4

Ordered List

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4