| Weight | Sample Text | |
|---|---|---|
| 100 | Thin | Bespoke Post |
| 300 | Light | Bespoke Post |
| 400 | Regular | Bespoke Post |
| 500 | Medium | Bespoke Post |
| 700 | Bold | Bespoke Post |
| 900 | Black | Bespoke Post |
Typefaces
Geograph
Value Serif
| Weight | Sample Text | |
|---|---|---|
| 400 | Regular | Bespoke Post |
| 500 | Medium | Bespoke Post |
| 700 | Bold | Bespoke Post |
Type Scale
The typography scales according to the chart below. The baseline is set at 4px. Note: for screen widths < 1000px , an alternative size is used.
Sans-Serif Headers
-
Tiny Section Header
.t-tiny-section-hdr16px / 22px12px / 16pxBespoke Post -
Navigation Header
.t-navigation-hdr16px / 22px / 1.2px14px / 20px / 1.2pxUppercase -
Meta Section Header
.t-meta-section-hdr18px / 24px / 1.2px14px / 20px / 1.2pxUppercase -
Small Section Header
.t-small-section-hdr24px / 28px18px / 24pxBespoke Post -
Section Header
.t-section-hdr36px / 40px24px / 32pxBespoke Post -
Large Section Header
.t-large-section-hdr48px / 52px36px / 40pxBespoke Post -
Mega Section Header
.t-mega-section-hdr60px / 60px36px / 40pxBespoke Post
Serif Headers
-
Serif Meta Section Header
.t-serif-meta-section-hdr24px / 28px18px / 22px -
Serif Small Section Header
.t-serif-small-section-hdr28px / 34px22px / 28pxBespoke Post -
Serif Section Header
.t-serif-section-hdr36px / 44px28px / 34pxBespoke Post -
Serif Large Section Header
.t-serif-large-section-hdr48px / 52px32px / 38pxBespoke Post
Paragraphs
-
Mini Body Sans
.t-mini-body-sans10px / 12pxBespoke Post is the best place ever! You can shop and have a box subscription. -
Tiny Body Sans
.t-tiny-body-sans12px / 16px10px / 12pxBespoke Post is the best place ever! You can shop and have a box subscription. -
Small Body Sans
.t-small-body-sans14px / 20px13px / 17pxBespoke Post is the best place ever! You can shop and have a box subscription. -
Body Sans
.t-body-sans16px / 24px14px / 20pxBespoke Post is the best place ever! You can shop and have a box subscription. -
Large Body Sans
.t-large-body-sans18px / 28px16px / 24pxBespoke Post is the best place ever! You can shop and have a box subscription. -
Mega Body Sans
.t-mega-body-sans32px / 48px18px / 28pxBespoke Post is the best place ever! You can shop and have a box subscription. -
Huge Body Sans
.t-huge-body-sans36px / 48px24px / 32pxBespoke Post is the best place ever! You can shop and have a box subscription.
Serif Body
-
Serif Body Sans
.t-serif-body-sans18px / 22px14px / 18pxBespoke Post
Footers
-
Small Body Footer
.t-small-body-footer12px / 16px
Buttons
-
Button Small
.t-button-small10px / 12px / 1.2px10px / 12px / 1.2pxUppercase -
Button
.t-button14px / 20px / 1.2px12px / 20px / 1.2pxUppercase -
Button Large
.t-button-large12px / 20px / 1.2px14px / 20px / 1.2pxUppercase
Static Type Scale
An alternative set of typography scale that do no have responsive sizing changes. This is largely a subset of the "main" typescale (i.e. not all type classes have a static variation).
Sans-Serif Headers
-
Meta Section Header
.t-meta-section-hdr-static14px / 20px / 1.2pxUppercase -
Small Section Header
.t-small-section-hdr-static18px / 24pxBespoke Post -
Section Header
.t-section-hdr-static24px / 28pxBespoke Post -
Large Section Header
.t-large-section-hdr-static36px / 40pxBespoke Post -
Mega Section Header
.t-mega-section-hdr-static36px / 40pxBespoke Post
Serif Headers
-
Serif Meta Section Header
.t-serif-meta-section-hdr-static18px / 22px -
Serif Small Section Header
.t-serif-small-section-hdr-static22px / 28pxBespoke Post -
Serif Section Header
.t-serif-section-hdr-static28px / 34pxBespoke Post
Paragraphs
-
Mini Body Sans
.t-mini-body-sans-static10px / 12pxBespoke Post is the best place ever! You can shop and have a box subscription. -
Tiny Body Sans
.t-tiny-body-sans-static11px / 12pxBespoke Post is the best place ever! You can shop and have a box subscription. -
Small Body Sans
.t-small-body-sans-static13px / 17pxBespoke Post is the best place ever! You can shop and have a box subscription. -
Body Sans
.t-body-sans-static14px / 20pxBespoke Post is the best place ever! You can shop and have a box subscription. -
Large Body Sans
.t-large-body-sans-static16px / 24pxBespoke Post is the best place ever! You can shop and have a box subscription. -
Mega Body Sans
.t-mega-body-sans-static18px / 28pxBespoke Post is the best place ever! You can shop and have a box subscription. -
Huge Body Sans
.t-huge-body-sans-static24px / 32pxBespoke Post is the best place ever! You can shop and have a box subscription.
Serif Body
-
Serif Body Sans
.t-serif-body-sans-static14px / 18pxBespoke Post
Footers
-
Small Body Footer
.t-small-body-footer-static12px / 16px
Buttons
-
Button
.t-button-static14px / 20px / 1.2pxUppercase -
Button Large
.t-button-large-static12px / 20px / 1.2pxUppercase