Typography

Typography

HerarchyHeadingSubhedingBody textListsLists with an iconAlignment

Hierarchy

Use the typographic hierarchy system to establish a visual order of importance. Poppins and Bitter are available and accessible to download through Google Fonts. For alternative options available through Microsoft, please refer to the Typeface Fallback Option section. All typefaces are also available in italics.

Font Weight

Poppins Bold is used for headlines.

Heading size

Class name

Font Weight

Sample

Heading 800

800
Extra Bold

This is Extra Bold Heading

Heading 700

700
Bold

This is Bold Heading

Heading 600

600
Semi Bold

This is Semi Bold Heading

Heading 500

500
Medium

This is Medium Heading

Heading 400

400
Normal

This is Normal Heading

Heading 300

300
Light

This is Light Heading

Heading 200

300
Light

This is Light Heading

Font Size

Use the Font Weight with the Font Size to create different heading styles. Here are some examples.

Heading size

Class name

Font Weight

Sample

Heading 800

XXXL

800
Extra Bold

This is Extra Bold Heading

Heading 300

XXL

700
Bold

This is Bold Heading

Heading 600

XL

600
Semi Bold

This is Semi Bold Heading

Heading 500

L

500
Medium

This is Medium Heading

Heading 400

M

400
Normal

This is Normal Heading

Heading 300

S

300
Light

This is Light Heading

Heading 200

300
Light

This is Light Heading

Body text

Paragraph Size

Class name

Font

Sample

Paragraph

Bitter 400

This is Large (L) parapraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

Paragraph 500

Bitter 500

This is Large (L) parapraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

Paragraph 600

Bitter 600

This is the Default or Medium (M) parapraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

Paragraph 700

Bitter 700

This is Small (S) parapraph text. This is the Default or Medium (M) parapraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

Size Body text

Paragraph Size

Class name

Font Size

Sample

Paragraph

L

1.125 rem
(18px)

This is Large (L) parapraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

Default Paragraph
or

Paragraph

or

Paragraph

M

1 rem
(16 px)

This is the Default or Medium (M) parapraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

Paragraph

S

0.875 rem
(14 px)

This is Small (S) parapraph text. This is the Default or Medium (M) parapraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

Lists

style List

Class name

Sample

Size & Color

Sample

Circle List

  • This is a list item
  • This is a list item
  • This is a list item

Circle List

Paragraph

L

C T Navy 100

  • This is a list item
  • This is a list item
  • This is a list item

Square List

  • This is a list item
  • This is a list item
  • This is a list item

Square List

Paragraph

M

C T Red 100

  • This is a list item
  • This is a list item
  • This is a list item

Number List

  • This is a list item
  • This is a list item
  • This is a list item

Number List

Paragraph

S

C T Blue 100

Emphasis

  • This is a list item
  • This is a list item
  • This is a list item

Letter List

  • This is a list item
  • This is a list item
  • This is a list item

Letter List

Paragraph

L

C T Orange 100

  • This is a list item
  • This is a list item
  • This is a list item

Roman Number List

  • This is a list item
  • This is a list item
  • This is a list item

Roman Number List

Paragraph

M

C T Purple 100

  • This is a list item
  • This is a list item
  • This is a list item

No Bullet List

  • This is a list item
  • This is a list item
  • This is a list item

Roman Number List

Paragraph

M

C T Navy 100

Emphasis Bols

  • This is a list item
  • This is a list item
  • This is a list item

horizontal list

Class name

Sample text inside of a div block

Circle List

List Horizontal

  • This is a list item
  • This is a list item
  • This is a list item

Square List

List Horizontal

  • This is a list item
  • This is a list item
  • This is a list item

Number List

List Horizontal

  • This is a list item
  • This is a list item
  • This is a list item

Letter List

List Horizontal

  • This is a list item
  • This is a list item
  • This is a list item

Roman Number List

List Horizontal

  • This is a list item
  • This is a list item
  • This is a list item

No Bullet List

List Horizontal

  • This is a list item
  • This is a list item
  • This is a list item

Lists with an icon

List with icon

Class name

Sample text inside of a div block

Icon List

  • check
    This is a list item with an icon
  • check
    This is a list item with an icon
  • close
    This is a list item with an icon

T A R

  • check
    This is a list item with an icon
  • check
    This is a list item with an icon
  • close
    This is a list item with an icon

Alignment

text aligned

Class name

Sample text inside of a div block

T A L

Text aligned  left.

T A C

Text aligned center.

T A R

Text aligned right.