Font

BCLC uses the Fort font family for the main body of the corporate website.

Page headers use the Lubalin Graph Demi typeface.

Avoid mixing typeface use; for example, Lubalin Graph Demi should not be used in any part of the page content other than the header.

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.

This is text in Heading 6 styling.

Please note that the headers above are for use within the page body, and not as a main page header. For page headers, we use the following components:

L1 Header

L2 Header

L3 Header

L4 Header

For article page headers, we use the following component:

Article Header

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 - 22px - Often used for introductory paragraphs

Medium - 18px - Sometimes used for bodies of text on pages that are high level (L1 or L2)

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

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

Introductory paragraphs

Introductory paragraphs use 22px type on desktop and are added through the Content Block: Intro component rather than using a regular text box. Only use this component 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 are orange by default and 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. Begin each item with a lowercase letter.

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