Typography

Read all typography variables

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