Utilize type tokens when you need to adjust type manually. Alternatively, the text component offers robust customization options, efficiently optimized for both light and dark environments.
--font-size-xsmall | 11px |
--font-size-small | 12px |
--font-size-large | 13px |
--font-size-xlarge | 14px |
--font-weight-normal | 400 |
--font-weight-medium | 500 |
--font-weight-bold | 600 |
--font-lineHeight | 16px |
--font-lineHeight-large | 24px |
Positive application (light text on dark background)
--font-letter-spacing-pos-xsmall | 0.005em |
--font-letter-spacing-pos-small | 0 |
--font-letter-spacing-pos-large | -0.0025em |
--font-letter-spacing-pos-xlarge | -0.001em |
Negative application (dark text on light background)
--font-letter-spacing-neg-xsmall | 0.01em |
--font-letter-spacing-neg-small | 0.005em |
--font-letter-spacing-neg-large | 0.0025em |
--font-letter-spacing-neg-xlarge | -0.001em |