Overview
Lambda UI Components uses a robust typography system driven by CSS variables. This approach ensures consistency and allows for easy customization of fonts, weights, and sizes to match your brand identity.
Base Settings
The library uses Manrope Variable as the default font family, providing a wide range of weights and excellent readability for UI interfaces.
Font Family
The primary font family is defined by the --font-family variable.
--font-familyThe quick brown fox jumps over the lazy dog
Value:
"Manrope Variable", sans-serifFont Weights
A comprehensive set of font weights is available via CSS variables, ranging from Extra Light (200) to Extra Bold (800).
| Variable | Value | Preview |
|---|---|---|
| --font-weight-extralight | 200 | Extra Light |
| --font-weight-light | 300 | Light |
| --font-weight-regular | 400 | Regular |
| --font-weight-medium | 500 | Medium |
| --font-weight-semibold | 600 | Semibold |
| --font-weight-bold | 700 | Bold |
| --font-weight-extrabold | 800 | Extra Bold |
Font Sizes
The type scale provides a wide range of sizes for any context, from tiny captions to massive display headings.
| Variable | Value | Preview |
|---|---|---|
| --font-size-2xs | 0.625rem | The quick brown fox |
| --font-size-xs | 0.75rem | The quick brown fox |
| --font-size-sm | 0.875rem | The quick brown fox |
| --font-size-md | 1rem | The quick brown fox |
| --font-size-lg | 1.125rem | The quick brown fox |
| --font-size-xl | 1.25rem | The quick brown fox |
| --font-size-2xl | 1.5rem | The quick brown fox |
| --font-size-3xl | 1.875rem | The quick brown fox |
| --font-size-4xl | 2.25rem | The quick brown fox |
| --font-size-5xl | 2.5rem | The quick brown fox |
| --font-size-6xl | 3rem | The quick brown fox |
| --font-size-7xl | 3.5rem | The quick brown fox |
| --font-size-8xl | 4rem | The quick brown fox |
| --font-size-9xl | 4.5rem | The quick brown fox |
Usage
You can easily use these typographic variables in your own CSS or CSS-in-JS solutions.
.my-heading {
font-family: var(--font-family);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-4xl);
color: var(--foreground-title-color);
}
.my-text {
font-family: var(--font-family);
font-weight: var(--font-weight-regular);
font-size: var(--font-size-md);
color: var(--foreground-color);
}