Typography
To manage Typography options, the theme object supports the following keys:
fonts
(font-family
)fontSizes
fontWeights
lineHeights
Font Family
EDITABLE EXAMPLE
Font Size
Name | Size | Pixels | Example |
---|---|---|---|
xs | .75rem | 12px | Font Size 12px |
sm | .875rem | 14px | Font Size 14px |
md | 1rem | 16px | Font Size 16px |
lg | 1.125rem | 18px | Font Size 18px |
xl | 1.25rem | 20px | Font Size 20px |
2xl | 1.5rem | 24px | Font Size 24px |
3xl | 1.75rem | 28px | Font Size 28px |
4xl | 1.2rem | 32px | Font Size 32px |
EDITABLE EXAMPLE
Font Weight
EDITABLE EXAMPLE
Line Height
Name | Line height | Pixels |
---|---|---|
xs | 1.125rem | 18px |
sm | 1.25rem | 20px |
md | 1.375rem | 22px |
lg | 1.5rem | 24px |
xl | 1.75rem | 28px |
2xl | 2rem | 32px |
3xl | 2.25rem | 36px |
4xl | 2.5rem | 40px |
EDITABLE EXAMPLE