Typography
Read all typography variablesFont family​
Variable | Value |
---|---|
--rbrh-font-family-sans | -apple-system, "Helvetica", system-ui, sans-serif, "Segoe UI", "Arial", "Verdana" |
--rbrh-font-family-serif | Serif, Times, 'Georgia', "Times New Roman" |
Font size​
Variable | Value | Pixels |
---|---|---|
--rbrh-font-size-xxs | 0.75rem | 12px |
--rbrh-font-size-xs | 0.875rem | 14px |
--rbrh-font-size-sm | 1rem | 15.2px |
--rbrh-font-size-md | 1.125rem | 16.32px |
--rbrh-font-size-lg | 1.25rem | 19.44px |
--rbrh-font-size-xl | 1.375rem | 20.8px |
--rbrh-font-size-2xl | 1.5rem | 23px |
--rbrh-font-size-3xl | 1.625rem | 27px |
--rbrh-font-size-4xl | 2.25rem | 34px |
--rbrh-font-size-5xl | 2.625rem | 41px |
--rbrh-font-size-6xl | 3.625rem | 61px |
--rbrh-font-size-7xl | 4.125rem | 72px |
Line Height​
To use the line-height, you can place the variables inside the selector in this way below.
Variable | Value | Pixels |
---|---|---|
--rbrh-line-h-xxs | 1rem | 16px |
--rbrh-line-h-xs | 1.5rem | 18px |
--rbrh-line-h-sm | 1.5rem | 24px |
--rbrh-line-h-md | 1.625rem | 26px |
--rbrh-line-h-lg | 1.75rem | 27px |
--rbrh-line-h-xl | 2rem | 29px |
--rbrh-line-h-2xl | 2rem | 34px |
--rbrh-line-h-3xl | 2.5rem | 36px |
--rbrh-line-h-4xl | 2.75rem | 44px |
--rbrh-line-h-5xl | 3rem | 48px |
--rbrh-line-h-6xl | 4rem | 66px |
--rbrh-line-h-7xl | 4.25rem | 76px |
Font weight​
To use the font-weight, you can place the variables inside the selector in this way below.
Variable | Value |
---|---|
--rbrh-font-weight-extrabold | 800 |
--rbrh-font-weight-bold | 700 |
--rbrh-font-weight-semibold | 600 |
--rbrh-font-weight-medium | 500 |
--rbrh-font-weight-default | 400 |
Letter Spacing​
To use letter-spacing, you can place the variables inside the selector in this way below.
Variable | Value |
---|---|
--rbrh-letter-spacing-xs | -0.075rem |
--rbrh-letter-spacing-sm | -0.05rem |
--rbrh-letter-spacing-md | -0.025rem |
--rbrh-letter-spacing-lg | .0125rem |
--rbrh-letter-spacing-xl | .025rem |
Usage​
To use the typography variables, you can place these variables inside the selector in this way below.
With mixin​
@define-mixin text-sm {
font-size: var(--rbrh-font-size-sm);
line-height: var(--rbrh-line-h-sm);
}
With CSS selector​
body {
font-family: var(--rbrh-font-family-sans);
}
With utility class selector​
.caption {
font-size: var(--rbrh-font-size-md);
font-weight: var(--rbrh-font-weight-medium);
}
Customize typography variables​
--rbrh-font-family-sans: -apple-system, "Helvetica", system-ui, sans-serif,
"Segoe UI", "Arial", "Verdana";
--rbrh-font-family-serif: serif, "Times", "Georgia", "Times New Roman";
--rbrh-font-weight-extrabold: 800;
--rbrh-font-weight-bold: 700;
--rbrh-font-weight-semibold: 600;
--rbrh-font-weight-medium: 500;
--rbrh-font-weight-default: 400;
--rbrh-font-weight-light: 300;
--rbrh-font-size-7xl: 4.125rem;
--rbrh-font-size-6xl: 3.625rem;
--rbrh-font-size-5xl: 2.625rem;
--rbrh-font-size-4xl: 2.25rem;
--rbrh-font-size-3xl: 1.625rem;
--rbrh-font-size-2xl: 1.5rem;
--rbrh-font-size-xl: 1.375rem;
--rbrh-font-size-lg: 1.25rem;
--rbrh-font-size-md: 1.125rem;
--rbrh-font-size-sm: 1rem;
--rbrh-font-size-xs: 0.875rem;
--rbrh-font-size-xxs: 0.75rem;
--rbrh-line-h-7xl: 4.25rem;
--rbrh-line-h-6xl: 4rem;
--rbrh-line-h-5xl: 3rem;
--rbrh-line-h-4xl: 2.75rem;
--rbrh-line-h-3xl: 2.5rem;
--rbrh-line-h-2xl: 2rem;
--rbrh-line-h-xl: 2rem;
--rbrh-line-h-lg: 1.85rem;
--rbrh-line-h-md: 1.625rem;
--rbrh-line-h-sm: 1.5rem;
--rbrh-line-h-xs: 1.5rem;
--rbrh-line-h-xxs: 1rem;
--rbrh-letter-spacing-xl: 0.025rem;
--rbrh-letter-spacing-lg: 0.0125rem;
--rbrh-letter-spacing-md: -0.025rem;
--rbrh-letter-spacing-sm: -0.05rem;
--rbrh-letter-spacing-xs: -0.075rem;