Typography Style Guide

The current breakpoint will be in highlighted under font sizes as you resize the window.

Title text. Lorem ipsum et dolar
  • Font Weight: 300
  • Line Height: 100% (NaNpx at this breakpoint)
  • Letter Spacing: -2.5% (NaNpx at this breakpoint)
  • Font Sizes:
    • default (greater than 0px): 45px
    • sm (greater than 640px): 70px
    • md (greater than 768px): 85px
    • lg (greater than 1024px): 110px
    • xl (greater than 1280px): 140px
    • 2xl (greater than 1536px): 170px
Heading text. Lorem ipsum et dolar
  • Font Weight: 300
  • Line Height: 100% (NaNpx at this breakpoint)
  • Letter Spacing: -2.5% (NaNpx at this breakpoint)
  • Font Sizes:
    • default (greater than 0px): 35px
    • sm (greater than 640px): 35px
    • md (greater than 768px): 45px
    • lg (greater than 1024px): 50px
    • xl (greater than 1280px): 60px
    • 2xl (greater than 1536px): 80px
Alternate heading text. Lorem ipsum et dolar
  • Font Weight: 300
  • Line Height: 100% (NaNpx at this breakpoint)
  • Letter Spacing: -2.5% (NaNpx at this breakpoint)
  • Font Sizes:
    • default (greater than 0px): 35px
    • sm (greater than 640px): 35px
    • md (greater than 768px): 35px
    • lg (greater than 1024px): 40px
    • xl (greater than 1280px): 50px
    • 2xl (greater than 1536px): 60px
Subheading text. Lorem ipsum et dolar
  • Font Weight: 400
  • Line Height: 100% (NaNpx at this breakpoint)
  • Letter Spacing: -2.5% (NaNpx at this breakpoint)
  • Font Sizes:
    • default (greater than 0px): 25px
    • sm (greater than 640px): 25px
    • md (greater than 768px): 30px
    • lg (greater than 1024px): 35px
    • xl (greater than 1280px): 40px
    • 2xl (greater than 1536px): 50px
Small subheading text. Lorem ipsum et dolar
  • Font Weight: 400
  • Line Height: 100% (NaNpx at this breakpoint)
  • Letter Spacing: -2.5% (NaNpx at this breakpoint)
  • Font Sizes:
    • default (greater than 0px): 30px
    • sm (greater than 640px): 30px
    • md (greater than 768px): 30px
    • lg (greater than 1024px): 35px
    • xl (greater than 1280px): 40px
    • 2xl (greater than 1536px): 45px
Body text. Lorem ipsum et dolar
  • Font Weight: 400
  • Line Height: 125% (NaNpx at this breakpoint)
  • Letter Spacing: 0% (NaNpx at this breakpoint)
  • Font Sizes:
    • default (greater than 0px): 14px
    • sm (greater than 640px): 14px
    • md (greater than 768px): 16px
    • lg (greater than 1024px): 24px
    • xl (greater than 1280px): 28px
    • 2xl (greater than 1536px): 28px
Body small text. Lorem ipsum et dolar
  • Font Weight: 400
  • Line Height: 125% (NaNpx at this breakpoint)
  • Letter Spacing: 0% (NaNpx at this breakpoint)
  • Font Sizes:
    • default (greater than 0px): 14px
    • sm (greater than 640px): 14px
    • md (greater than 768px): 16px
    • lg (greater than 1024px): 18px
    • xl (greater than 1280px): 24px
    • 2xl (greater than 1536px): 24px
Body small base. Lorem ipsum et dolar
  • Font Weight: 400
  • Line Height: 150% (NaNpx at this breakpoint)
  • Letter Spacing: 0% (NaNpx at this breakpoint)
  • Font Sizes:
    • default (greater than 0px): 14px
    • sm (greater than 640px): 14px
    • md (greater than 768px): 14px
    • lg (greater than 1024px): 16px
    • xl (greater than 1280px): 16px
    • 2xl (greater than 1536px): 16px

Type Pairing Tester

Select styles you want to pair. Text is editable.