Fonts & Typography

Text Style Name

Font

Character Styles

Download Font

Desktop HD

1801 - 2550 +

Desktop HD

1501-1800

Desktop

901-1500

Tablet

751-900

Mobile

320-750

Font Sizes per Screen Breakpoint

Description

Heading /  Paragraph Label

Epic Title

60

60

50

35

25

Used for making a bold statement. Example Welcome Section or graphic representation to represent something really important. Displayed in either blue or white depending on the background color this title is presented against. See Example

Avenir

None

download icon

Heading 1

Section Title

50

50

40

30

20

Used for the main title of each section on the page. Displayed in either blue or white depending on the background color this title is presented against. See Example

Avenir

None

download icon

Heading 2 / Heading 3

Section Subtitle

40

40

30

20

20

Used for the subtitles of each section. Usually before any written paragraph descriptions. Can be used in blue or white depending on the background. See Example

Avenir

None

download icon

Heading 2 / Heading 3

Paragraph

20

20

15

15

15

Use for any paragraph descriptions. Can also be used for infographic, icon or table labels. See Example

Avenir Light

None

download icon

Paragraph 1 / Paragraph 3

Labels

15

15

12

12

12

Use for small print labels on infographics. Can also be applied to icon labels when there is a large group used together. Other use cases are fine print text. Maybe be displayed in blue or white depending on the background color. See Example

Avenir Light

None

download icon

Paragraph 2

Fonts

Epic Title Home Landing Page

Used as the "Bold" variation of Epic Title. It is okay to use for the home page because this page is meant to stand out apart from all other pages as the main source of the website. But at the same time, it keeps within the font styles of all other Welcome Sections found on the website. This variation may also be used to emphasize a really important title or to make a bold statement when using text as a graphical image.

Common Color Uses

Commonly used as dark blue (#000E32F). This is in place of the use of black text. Whenever black text is needed, revert to using this dark blue color. Especially against white background.

May also be used with white font color. This is against any dark colored backgrounds. See white font examples here.

Epic Title

Font: Avenir

Character Styles: None

Font Size Used:

  • 60 (Desktop HD 1801 - 2551+)

  • 60 (Desktop HD 1501 - 1800)

  • 50 (Desktop 901-1500)

  • 35 (Tablet 751 - 900)

  • 25 (Mobile 320 - 750)

Section Title Uses

Used for the main title of each section on the page. Often used as the main title if the section contains multiple subtitles or paragraphs.

Common Color Uses

Commonly used as dark blue (#000E32F). This is in place of the use of black text. Whenever black text is needed, revert to using this dark blue color. Especially against white background.

May also be used with white font color. This is against any dark colored backgrounds. See white font examples here.

Section Title

Font: Avenir

Character Styles: None

Font Size Used:

  • 15 (Desktop HD 1801 - 2551+)

  • 15 (Desktop HD 1501 - 1800)

  • 12 (Desktop 901-1500)

  • 12 (Tablet 751 - 900)

  • 12 (Mobile 320 - 750)

Section Subtitle Uses

Used for the subtitles of each section. Usually before any written paragraph descriptions. May also be used as an emphasized label in an infographic.

Common Color Uses

Commonly used as dark blue (#000E32F). This is in place of the use of black text. Whenever black text is needed, revert to using this dark blue color. Especially against white background.

May also be used with white font color. This is against any dark colored backgrounds. See white font examples here.

Section Subtitle

Font: Avenir

Character Styles: None

Font Size Used:

  • 40 (Desktop HD 1801 - 2551+)

  • 40 (Desktop HD 1501 - 1800)

  • 30 (Desktop 901-1500)

  • 20 (Tablet 751 - 900)

  • 20 (Mobile 320 - 750)

Paragraph Uses

Used for any paragraph descriptions or long sentences. Can also be used for infographic, icon or table lables.

Common Color Uses

Commonly used as dark blue (#000E32F). This is in place of the use of black text. Whenever black text is needed, revert to using this dark blue color. Especially against white background.

May also be used with white font color. This is against any dark colored backgrounds. See white font examples here.

Paragraph

Font: Avenir Light

Character Styles: None

Font Size Used:

  • 20 (Desktop HD 1801 - 2551+)

  • 20 (Desktop HD 1501 - 1800)

  • 15 (Desktop 901-1500)

  • 15 (Tablet 751 - 900)

  • 15 (Mobile 320 - 750)

Paragraph Uses

Used for small print labels on infographics or fine print text. Can also be applied to icon labels when there is a large group used together.

Common Color Uses

Commonly used as dark blue (#000E32F). This is in place of the use of black text. Whenever black text is needed, revert to using this dark blue color. Especially against white background.

May also be used with white font color. This is against any dark colored backgrounds. See white font examples here.

Labels

Font: Avenir Light

Character Styles: None

Font Size Used:

  • 20 (Desktop HD 1801 - 2551+)

  • 20 (Desktop HD 1501 - 1800)

  • 15 (Desktop 901-1500)

  • 15 (Tablet 751 - 900)

  • 15 (Mobile 320 - 750)

Desktop

For all desktop layouts, we are using Left Justified Alignment. 

Tablet & Mobile

For all tablet and mobile layouts, we are using Center Justified Alignment.

Do's / Dont's

DO:

  • Adjust the width of the text box by small scaling adjustments in order to stack titles and paragraphs to create an aesthetic visual.

  • Use left justified on the tablet screens if the graphics for the section are the same alignment as desktop versions.

DON'T:

  • Use column or left justified on the mobile screen.

  • Use

Alignment