Typefaces

Geograph

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

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-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 Meta Section Header
    .t-serif-meta-section-hdr
    24px / 28px
    18px / 22px
    Bespoke Post
  • 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
    16px / 24px
    14px / 20px
    Bespoke Post is the best place ever! You can shop and have a box subscription.
  • Large Body Sans
    .t-large-body-sans
    18px / 28px
    16px / 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.

Serif Body

  • Serif Body Sans
    .t-serif-body-sans
    18px / 22px
    14px / 18px
    Bespoke Post

Footers

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

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 Meta Section Header
    .t-serif-meta-section-hdr-static
    18px / 22px
    Bespoke Post
  • 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
    16px / 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.

Serif Body

  • Serif Body Sans
    .t-serif-body-sans-static
    14px / 18px
    Bespoke Post

Footers

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

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