Typography Utilities
Utilities for font sizing, font weights, line heights, text alignment, and typography styling.
Font Size
| Class | Font Size | Line Height |
|---|---|---|
text-xs | 0.75rem (12px) | 1rem (16px) |
text-sm | 0.875rem (14px) | 1.25rem (20px) |
text-base | 1rem (16px) | 1.5rem (24px) |
text-lg | 1.125rem (18px) | 1.75rem (28px) |
text-xl | 1.25rem (20px) | 1.75rem (28px) |
text-2xl | 1.5rem (24px) | 2rem (32px) |
text-3xl | 1.875rem (30px) | 2.25rem (36px) |
text-4xl | 2.25rem (36px) | 2.5rem (40px) |
Font Weight
| Class | Properties |
|---|---|
font-thin | font-weight: 100; |
font-light | font-weight: 300; |
font-normal | font-weight: 400; |
font-medium | font-weight: 500; |
font-semibold | font-weight: 600; |
font-bold | font-weight: 700; |
font-extrabold | font-weight: 800; |
Text Alignment & Transform
| Class | Properties |
|---|---|
text-left | text-align: left; |
text-center | text-align: center; |
text-right | text-align: right; |
uppercase | text-transform: uppercase; |
lowercase | text-transform: lowercase; |
capitalize | text-transform: capitalize; |
truncate | overflow: hidden; text-overflow: ellipsis; white-space: nowrap; |