Typography Style Guide

Text Sizes

Text Small (text-sm) - 14px
Text Base (text-base) - 16px
Text Large (text-lg) - 18px
Text Extra Large (text-xl) - 20px
Text 22px (text-2xl) - 22px
Text 2XL (text-2xl) - 24px
Text 3XL (text-3xl) - 30px
Text 4XL (text-4xl) - 36px
Text 5XL (text-5xl) - 48px

Font Weights

Font Thin (font-thin) - 100
Font Extra Light (font-extralight) - 200
Font Light (font-light) - 300
Font Normal (font-normal) - 400
Font Medium (font-medium) - 500
Font Semi Bold (font-semibold) - 600
Font Bold (font-bold) - 700
Font Extra Bold (font-extrabold) - 800
Font Black (font-black) - 900

All Combinations

Small (14px)

Thin (100) - Sample text
Light (300) - Sample text
Normal (400) - Sample text
Medium (500) - Sample text
Semibold (600) - Sample text
Bold (700) - Sample text
Extrabold (800) - Sample text
Black (900) - Sample text

Base (16px)

Thin (100) - Sample text
Light (300) - Sample text
Normal (400) - Sample text
Medium (500) - Sample text
Semibold (600) - Sample text
Bold (700) - Sample text
Extrabold (800) - Sample text
Black (900) - Sample text

Large (18px)

Thin (100) - Sample text
Light (300) - Sample text
Normal (400) - Sample text
Medium (500) - Sample text
Semibold (600) - Sample text
Bold (700) - Sample text
Extrabold (800) - Sample text
Black (900) - Sample text

XL (20px)

Thin (100) - Sample text
Light (300) - Sample text
Normal (400) - Sample text
Medium (500) - Sample text
Semibold (600) - Sample text
Bold (700) - Sample text
Extrabold (800) - Sample text
Black (900) - Sample text

22px

Thin (100) - Sample text
Light (300) - Sample text
Normal (400) - Sample text
Medium (500) - Sample text
Semibold (600) - Sample text
Bold (700) - Sample text
Extrabold (800) - Sample text
Black (900) - Sample text

2XL (24px)

Thin (100) - Sample text
Light (300) - Sample text
Normal (400) - Sample text
Medium (500) - Sample text
Semibold (600) - Sample text
Bold (700) - Sample text
Extrabold (800) - Sample text
Black (900) - Sample text

3XL (30px)

Thin (100) - Sample text
Light (300) - Sample text
Normal (400) - Sample text
Medium (500) - Sample text
Semibold (600) - Sample text
Bold (700) - Sample text
Extrabold (800) - Sample text
Black (900) - Sample text

4XL (36px)

Thin (100) - Sample text
Light (300) - Sample text
Normal (400) - Sample text
Medium (500) - Sample text
Semibold (600) - Sample text
Bold (700) - Sample text
Extrabold (800) - Sample text
Black (900) - Sample text

5XL (48px)

Thin (100) - Sample text
Light (300) - Sample text
Normal (400) - Sample text
Medium (500) - Sample text
Semibold (600) - Sample text
Bold (700) - Sample text
Extrabold (800) - Sample text
Black (900) - Sample text