Typography

Font

Casinos BC uses the Fort font family for the main body of the website.

Headers use the GT Eesti typeface.

Headings

Use headings to create a clear hierarchy throughout the site. Write all headings in sentence case.

The following headings are available:

 

This is text in Heading 1 styling.

This is text in Heading 2 styling.

This is text in Heading 3 styling.

This is text in Heading 4 styling.

This is text in Heading 5 styling.
 

Please note that aside from the Header 1 style on select pages, the headers above are for use within the page body, and not as a main page header. For page headers, we use the CTA Full Width component.

Paragraphs

Body

The default paragraph font size is 16px across all devices. However, there are smaller and larger versions depending on the needs of each page. 

The following options include:

 

Large - 20px - Often used for introductory paragraphs

Medium - 18px - Often used for bodies of text inside components or as header subtitles

Regular - 16px - Default size used for bodies of text

Small - 14px - Often used for fine print or secondary information

 

Introductory paragraphs

Introductory paragraphs use 20px type on desktop and are added through the text configuration window. To do this, select Intro Text from the styles dropdown (S icon).

Only use this style as an introduction to a page or large section of content.

 

Bold text

Bold text emphasizes particular words in a paragraph. Use it to highlight important information that you don't want readers to miss.

Use bold sparingly, as overuse will make it harder for users to know what to pay attention to. 

Our bold style uses the Medium font-weight of the Fort typeface.

Links

In-text links use the Ruby colour by default and are underlined in its hover state. If a link appears at the end of a sentence, be sure not to include the punctuation at the end of the sentence as part of the link.

Here is an example of an in-text link. Navigation links do not apply this styling as their position on a page (or other signifier) already makes their purpose clear to a user.

Lists

Bulleted lists

Introduce bulleted lists with a related line of text ending in a colon.

Example of the beginning of a bulleted list:

  • Bullet 1
  • Bullet 2
  • Bullet 3

 

Numbered lists

Use numbered lists when the order of the items are relevant.

Example of the beginning of a numbered list:

  1. Numbered item
  2. Numbered item
  3. Numbered item