Typography
Font Stack
Headings:
Gotham, sans-serif
Tungsten, sans-serif
Body: Gotham, sans-serif
Font Weights
Gotham
Light
Lighter
Normal
Medium
Bold
Bolder
Tungsten
Light
Lighter
Normal
Medium
Bold
Bolder
<p class="fw-light">Light</p>
<p class="fw-lighter">Lighter</p>
<p class="fw-normal">Normal</p>
<p class="fw-medium">Medium</p>
<p class="fw-bold">Bold</p>
<p class="fw-bolder">Bolder</p> <p class="fw-light ff-secondary">Light</p>
<p class="fw-lighter ff-secondary">Lighter</p>
<p class="fw-normal ff-secondary">Normal</p>
<p class="fw-medium ff-secondary">Medium</p>
<p class="fw-bold ff-secondary">Bold</p>
<p class="fw-bolder ff-secondary">Bolder</p>Headings <h1>
Heading 1
<h1 class="canon-h1"></h1>
Properties
Font Family:
Gotham
Font Size:
max 64px / min 40px
Font Weigh:
700 / Bold
Font Height:
max 74px / min 50px
Heading 1
<h1 class="canon-h1--big"></h1>
Properties
Font Family:
Gotham
Font Size:
max 48px / min 32px
Font Weigh:
700 / Bold
Font Height:
max 56px / min 40px
Heading 1
<h1 class="canon-h1--small"></h1>
Properties
Font Family:
Gotham
Font Size:
max 40px / min 28px
Font Weigh:
700 / Bold
Font Height:
max 50px / min 35px
Heading 1
<h1 canon-h1-tungsten canon-h1-tungsten--editorial"></h1>
Properties
Font Family:
Tungsten
Font Size:
52px
Font Weigh:
600 / Semibold
Font Height:
52px
Heading 1
<h1 canon-h1-tungsten canon-h1-tungsten--editorial
canon-h1-tungsten--editorial-a"></h1>
Properties
Font Family:
Tungsten
Font Size:
max 80px / min 52px
Font Weigh:
600 / Semibold
Font Height:
max 80px / min 52px
Heading 1
<h1 canon-h1-tungsten canon-h1-tungsten--editorial
canon-h1-tungsten--editorial-b"></h1>
Properties
Font Family:
Tungsten
Font Size:
max 64px / min 52px
Font Weigh:
600 / Semibold
Font Height:
max 64px / min 52px
Heading 1
<h1 canon-h1-tungsten canon-h1-tungsten--product"></h1>
Properties
Font Family:
Tungsten
Font Size:
52px
Font Weigh:
600 / Semibold
Font Height:
50px
Heading 1
<h1 canon-h1-tungsten canon-h1-tungsten--product canon-h1-tungsten--product-a"></h1>
Properties
Font Family:
Tungsten
Font Size:
max 80px / min 52px
Font Weigh:
600 / Semibold
Font Height:
max 75px / min 50px
Heading 1
<h1 canon-h1-tungsten canon-h1-tungsten--product canon-h1-tungsten--product-b"></h1>
Properties
Font Family:
Tungsten
Font Size:
max 64px / min 52px
Font Weigh:
600 / Semibold
Font Height:
max 60px / min 50px
Headings <h2>
Heading 2
<h2 class="canon-h2--medium"></h2>
Properties
Font Family:
Gotham
Font Size:
max 35px / min 28px
Font Weigh:
700 / Bold
Font Height:
max 40px / min 35px
Heading 2
<h2 class="canon-h2--big"></h2>
Properties
Font Family:
Gotham
Font Size:
max 35px / min 26px
Font Weigh:
700 / Bold
Font Height:
max 46px / min 33px
Heading 2
<h2 class="canon-h2--small"></h2>
Properties
Font Family:
Gotham
Font Size:
max 28px / min 26px
Font Weigh:
700 / Bold
Font Height:
max 35px / min 33px
Heading 2
<h2 class="canon-h2--small-alt"></h2>
Properties
Font Family:
Gotham
Font Size:
max 30px / min 24px
Font Weigh:
700 / Bold
Font Height:
max 38px / min 30px
Headings <h3>
Heading 3
<h3 class="canon-h3--big"></h3>
Properties
Font Family:
Gotham
Font Size:
max 28px / min 22px
Font Weigh:
700 / Bold
Font Height:
max 35px / min 28px
Body Content
Large (20px)
Medium (18px)
Normal (16px)
Small (14px)
Small xs (12px)
Small xxs (10px)
Properties
Font Family:
Gotham
Font Size:
max 20px / min 10px
Font Weigh:
400 / Regular
Font Height:
1.45 rem
<p class="fs-lg">Large</p>
<p class="fs-md">Medium</p>
<p class="fs-base">Normal</p>
<p class="fs-sm">Small</p>
<p class="fs-xs">Small xs</p>
<p class="fs-xxs">Small xxs</p>Labels
Large (20px)
Medium (18px)
Normal (16px)
Small (14px)
Small xs (12px)
Small xxs (10px)
Properties
Font Family:
Gotham
Font Size:
max 20px / min 10px
Font Weigh:
400 / Regular
Font Height:
1.45 rem
Text Transform
Uppercase
<p class="fs-lg text-uppercase">Large</p>
<p class="fs-md text-uppercase">Medium</p>
<p class="fs-base text-uppercase">Normal</p>
<p class="fs-sm text-uppercase">Small</p>
<p class="fs-xs text-uppercase">Small xs</p>
<p class="fs-xxs text-uppercase">Small xxs</p>Links
Properties
Font Family:
Gotham
Font Size:
max 20px / min 10px
Font Weigh:
400 / Regular
Font Height:
1.45 rem
<a href="" class="fs-lg">Large</a>
<a href="" class="fs-md">Medium</a>
<a href="" class="fs-base">Normal</a>
<a href="" class="fs-sm">Small</a>
<a href="" class="fs-xs">Small xs</a>
<a href="" class="fs-xxs">Small xxs</a>Buttons
Properties
Font Family:
Gotham
Font Size:
10px
Font Weigh:
500 / Regular
Font Height:
1.5 rem
Text Transform
Uppercase
Properties
Font Family:
Gotham
Font Size:
10px
Font Weigh:
500 / Regular
Font Height:
1.5 rem
Text Transform
Uppercase
Properties
Font Family:
Gotham
Font Size:
12px
Font Weigh:
500 / Regular
Font Height:
1.5 rem
Text Transform
Uppercase