Typography tokens

Font#

Family#

Ex. Token name Value Use case
Aa Heading font family var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif) Copy Link
Aa Body text font family var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif) Copy Link
Aa Code font family var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace) Copy Link

Size#

Body text#

Ex. Token name Value Use case
Aa 12px font size var(--rh-font-size-body-text-xs, 0.75rem) Copy Link
Aa 14px font size var(--rh-font-size-body-text-sm, 0.875rem) Copy Link
Aa 16px font size var(--rh-font-size-body-text-md, 1rem) Copy Link
Aa 18px font size var(--rh-font-size-body-text-lg, 1.125rem) Copy Link
Aa 20px font size var(--rh-font-size-body-text-xl, 1.25rem) Copy Link
Aa 24px font size var(--rh-font-size-body-text-2xl, 1.5rem) Copy Link

Code#

Ex. Token name Value Use case
Aa 12px font size var(--rh-font-size-code-xs, 0.75rem) Copy Link
Aa 14px font size var(--rh-font-size-code-sm, 0.875rem) Copy Link
Aa 16px font size var(--rh-font-size-code-md, 1rem) Copy Link
Aa 18px font size var(--rh-font-size-code-lg, 1.125rem) Copy Link
Aa 20px font size var(--rh-font-size-code-xl, 1.25rem) Copy Link
Aa 24px font size var(--rh-font-size-code-2xl, 1.5rem) Copy Link

Heading#

Ex. Token name Value Use case
Aa h6 heading font size var(--rh-font-size-heading-xs, 1.25rem) Copy Link
Aa h5 heading font size var(--rh-font-size-heading-sm, 1.5rem) Copy Link
Aa h4 heading font size var(--rh-font-size-heading-md, 1.75rem) Copy Link
Aa h3 heading font size var(--rh-font-size-heading-lg, 2.25rem) Copy Link
Aa h2 heading font size var(--rh-font-size-heading-xl, 2.5rem) Copy Link
Aa h1 heading font size var(--rh-font-size-heading-2xl, 3rem) Copy Link

Weight#

Body text#

Ex. Token name Value Use case
regular Regular font weight var(--rh-font-weight-body-text-regular, 400) Copy Link
medium Medium font weight var(--rh-font-weight-body-text-medium, 500) Copy Link

Code#

Ex. Token name Value Use case
regular Regular font weight var(--rh-font-weight-code-regular, 400) Copy Link
medium Medium font weight var(--rh-font-weight-code-medium, 500) Copy Link

Heading#

Ex. Token name Value Use case
light Regular font weight for headings var(--rh-font-weight-heading-regular, 300) Copy Link
medium Medium font weight for headings var(--rh-font-weight-heading-medium, 500) Copy Link
bold Bold font weight for headings var(--rh-font-weight-heading-bold, 700) Copy Link

Line height#

Ex. Token name Value Use case
Line height for headings var(--rh-line-height-heading, 1.3) Copy Link
Line height for body text var(--rh-line-height-body-text, 1.5) Copy Link
Line height for code var(--rh-line-height-code, 1.5) Copy Link

Text#

Primary#

Ex. Token name Value Use case
Aa Primary text color for light theme var(--rh-color-text-primary-on-light, #151515) Copy Link
Aa Primary text color for dark theme var(--rh-color-text-primary-on-dark, #ffffff) Copy Link

Secondary#

Ex. Token name Value Use case
Aa Secondary text color for light theme var(--rh-color-text-secondary-on-light, #4d4d4d) Copy Link
Aa Secondary text color for dark theme var(--rh-color-text-secondary-on-dark, #c7c7c7) Copy Link

Brand#

Ex. Token name Value Use case
Aa Brand text color for light theme var(--rh-color-text-brand-on-light, #ee0000) Copy Link
Aa Brand text color for dark theme var(--rh-color-text-brand-on-dark, #ff442b) Copy Link
© 2021-2023 Red Hat, Inc. Deploys by Netlify