Skip to main content

Typography

Read all typography variables

Font family

VariableValue
--rbrh-font-family-sans-apple-system, "Helvetica", system-ui, sans-serif, "Segoe UI", "Arial", "Verdana"
--rbrh-font-family-serifSerif, Times, 'Georgia', "Times New Roman"

Font size

VariableValuePixels
--rbrh-font-size-xxs0.75rem12px
--rbrh-font-size-xs0.875rem14px
--rbrh-font-size-sm1rem15.2px
--rbrh-font-size-md1.125rem16.32px
--rbrh-font-size-lg1.25rem19.44px
--rbrh-font-size-xl1.375rem20.8px
--rbrh-font-size-2xl1.5rem23px
--rbrh-font-size-3xl1.625rem27px
--rbrh-font-size-4xl2.25rem34px
--rbrh-font-size-5xl2.625rem41px
--rbrh-font-size-6xl3.625rem61px
--rbrh-font-size-7xl4.125rem72px

Line Height

To use the line-height, you can place the variables inside the selector in this way below.

VariableValuePixels
--rbrh-line-h-xxs1rem16px
--rbrh-line-h-xs1.5rem18px
--rbrh-line-h-sm1.5rem24px
--rbrh-line-h-md1.625rem26px
--rbrh-line-h-lg1.75rem27px
--rbrh-line-h-xl2rem29px
--rbrh-line-h-2xl2rem34px
--rbrh-line-h-3xl2.5rem36px
--rbrh-line-h-4xl2.75rem44px
--rbrh-line-h-5xl3rem48px
--rbrh-line-h-6xl4rem66px
--rbrh-line-h-7xl4.25rem76px

Font weight

To use the font-weight, you can place the variables inside the selector in this way below.

VariableValue
--rbrh-font-weight-extrabold800
--rbrh-font-weight-bold700
--rbrh-font-weight-semibold600
--rbrh-font-weight-medium500
--rbrh-font-weight-default400

Letter Spacing

To use letter-spacing, you can place the variables inside the selector in this way below.

VariableValue
--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;