Typefaces

Geograph

  • .f-geograph
    Geograph
  • .f-geograph-thin
    Geograph Thin
  • .f-geograph-light
    Geograph Light
  • .f-geograph-regular
    Geograph Regular
  • .f-geograph-medium
    Geograph Medium
  • .f-geograph-bold
    Geograph Bold
  • .f-geograph-black
    Geograph Black

Value Serif

  • .f-value-serif
    Value Serif
  • .f-value-serif-regular
    Value Serif Regular
  • .f-value-serif-medium
    Value Serif Medium
  • .f-value-serif-bold
    Value Serif Bold

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-hdr
    16px / 22px
    12px / 16px
    Bespoke Post
  • Navigation Header
    .t-navigation-hdr
    16px / 22px / 1.2px
    14px / 20px / 1.2px
    Uppercase
    Club Room
  • Meta Section Header
    .t-meta-section-hdr
    18px / 24px / 1.2px
    14px / 20px / 1.2px
    Uppercase
    Bespoke Post
  • Small Section Header
    .t-small-section-hdr
    24px / 28px
    18px / 24px
    Bespoke Post
  • Section Header
    .t-section-hdr
    36px / 40px
    24px / 32px
    Bespoke Post
  • Large Section Header
    .t-large-section-hdr
    48px / 52px
    36px / 40px
    Bespoke Post
  • Mega Section Header
    .t-mega-section-hdr
    60px / 60px
    36px / 40px
    Bespoke Post

Serif Headers

  • Serif Small Section Header
    .t-serif-small-section-hdr
    28px / 34px
    22px / 28px
    Bespoke Post
  • Serif Section Header
    .t-serif-section-hdr
    36px / 44px
    28px / 34px
    Bespoke Post
  • Serif Large Section Header
    .t-serif-large-section-hdr
    48px / 52px
    32px / 38px
    Bespoke Post

Paragraphs

  • Mini Body Sans
    .t-mini-body-sans
    10px / 12px
    Bespoke Post is the best place ever! You can shop and have a box subscription.
  • Tiny Body Sans
    .t-tiny-body-sans
    12px / 16px
    10px / 12px
    Bespoke Post is the best place ever! You can shop and have a box subscription.
  • Small Body Sans
    .t-small-body-sans
    14px / 20px
    13px / 17px
    Bespoke Post is the best place ever! You can shop and have a box subscription.
  • Body Sans
    .t-body-sans
    18px / 28px
    14px / 20px
    Bespoke Post is the best place ever! You can shop and have a box subscription.
  • Large Body Sans
    .t-large-body-sans
    24px / 28px
    18px / 24px
    Bespoke Post is the best place ever! You can shop and have a box subscription.
  • Mega Body Sans
    .t-mega-body-sans
    32px / 48px
    18px / 28px
    Bespoke Post is the best place ever! You can shop and have a box subscription.
  • Huge Body Sans
    .t-huge-body-sans
    36px / 48px
    24px / 32px
    Bespoke Post is the best place ever! You can shop and have a box subscription.

Footers

  • Small Body Footer
    .t-small-body-footer
    12px / 16px
    Bespoke Post

Buttons

  • Button Small
    .t-button-small
    10px / 12px / 1.2px
    10px / 12px / 1.2px
    Uppercase
    Get Started
  • Button
    .t-button
    14px / 20px / 1.2px
    12px / 20px / 1.2px
    Uppercase
    Get Started
  • Button Large
    .t-button-large
    12px / 20px / 1.2px
    14px / 20px / 1.2px
    Uppercase
    Get Started

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-static
    14px / 20px / 1.2px
    Uppercase
    Bespoke Post
  • Small Section Header
    .t-small-section-hdr-static
    18px / 24px
    Bespoke Post
  • Section Header
    .t-section-hdr-static
    24px / 28px
    Bespoke Post
  • Large Section Header
    .t-large-section-hdr-static
    36px / 40px
    Bespoke Post
  • Mega Section Header
    .t-mega-section-hdr-static
    36px / 40px
    Bespoke Post

Serif Headers

  • Serif Small Section Header
    .t-serif-small-section-hdr-static
    22px / 28px
    Bespoke Post
  • Serif Section Header
    .t-serif-section-hdr-static
    28px / 34px
    Bespoke Post

Paragraphs

  • Mini Body Sans
    .t-mini-body-sans-static
    10px / 12px
    Bespoke Post is the best place ever! You can shop and have a box subscription.
  • Tiny Body Sans
    .t-tiny-body-sans-static
    11px / 12px
    Bespoke Post is the best place ever! You can shop and have a box subscription.
  • Small Body Sans
    .t-small-body-sans-static
    13px / 17px
    Bespoke Post is the best place ever! You can shop and have a box subscription.
  • Body Sans
    .t-body-sans-static
    14px / 20px
    Bespoke Post is the best place ever! You can shop and have a box subscription.
  • Large Body Sans
    .t-large-body-sans-static
    18px / 24px
    Bespoke Post is the best place ever! You can shop and have a box subscription.
  • Mega Body Sans
    .t-mega-body-sans-static
    18px / 28px
    Bespoke Post is the best place ever! You can shop and have a box subscription.
  • Huge Body Sans
    .t-huge-body-sans-static
    24px / 32px
    Bespoke Post is the best place ever! You can shop and have a box subscription.

Footers

  • Small Body Footer
    .t-small-body-footer-static
    12px / 16px
    Bespoke Post

Buttons

  • Button
    .t-button-static
    14px / 20px / 1.2px
    Uppercase
    Get Started
  • Button Large
    .t-button-large-static
    12px / 20px / 1.2px
    Uppercase
    Get Started