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
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
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
Links
Properties
Font Family:
Gotham
Font Size:
max 20px / min 10px
Font Weigh:
400 / Regular
Font Height:
1.45 rem
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