Typography tokens
Font
Family
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Aa |
Click to copy
--rh-font-family-heading |
Click to copy
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 |
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)
https://ux.redhat.com/tokens/typography/#rh-font-family-heading
|
| Aa |
Click to copy
--rh-font-family-body-text |
Click to copy
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 |
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)
https://ux.redhat.com/tokens/typography/#rh-font-family-body-text
|
| Aa |
Click to copy
--rh-font-family-code |
Click to copy
RedHatMono, "Red Hat Mono", "Courier New", Courier, monospace |
Code font family |
var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace)
https://ux.redhat.com/tokens/typography/#rh-font-family-code
|
Size
Body text
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Aa |
Click to copy
--rh-font-size-body-text-xs |
Click to copy
0.75rem |
12px font size |
var(--rh-font-size-body-text-xs, 0.75rem)
https://ux.redhat.com/tokens/typography/#rh-font-size-body-text-xs
|
| Aa |
Click to copy
--rh-font-size-body-text-sm |
Click to copy
0.875rem |
14px font size |
var(--rh-font-size-body-text-sm, 0.875rem)
https://ux.redhat.com/tokens/typography/#rh-font-size-body-text-sm
|
| Aa |
Click to copy
--rh-font-size-body-text-md |
Click to copy
1rem |
16px font size |
var(--rh-font-size-body-text-md, 1rem)
https://ux.redhat.com/tokens/typography/#rh-font-size-body-text-md
|
| Aa |
Click to copy
--rh-font-size-body-text-lg |
Click to copy
1.125rem |
18px font size |
var(--rh-font-size-body-text-lg, 1.125rem)
https://ux.redhat.com/tokens/typography/#rh-font-size-body-text-lg
|
| Aa |
Click to copy
--rh-font-size-body-text-xl |
Click to copy
1.25rem |
20px font size |
var(--rh-font-size-body-text-xl, 1.25rem)
https://ux.redhat.com/tokens/typography/#rh-font-size-body-text-xl
|
| Aa |
Click to copy
--rh-font-size-body-text-2xl |
Click to copy
1.5rem |
24px font size |
var(--rh-font-size-body-text-2xl, 1.5rem)
https://ux.redhat.com/tokens/typography/#rh-font-size-body-text-2xl
|
Code
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Aa |
Click to copy
--rh-font-size-code-xs |
Click to copy
0.75rem |
12px font size |
var(--rh-font-size-code-xs, 0.75rem)
https://ux.redhat.com/tokens/typography/#rh-font-size-code-xs
|
| Aa |
Click to copy
--rh-font-size-code-sm |
Click to copy
0.875rem |
14px font size |
var(--rh-font-size-code-sm, 0.875rem)
https://ux.redhat.com/tokens/typography/#rh-font-size-code-sm
|
| Aa |
Click to copy
--rh-font-size-code-md |
Click to copy
1rem |
16px font size |
var(--rh-font-size-code-md, 1rem)
https://ux.redhat.com/tokens/typography/#rh-font-size-code-md
|
| Aa |
Click to copy
--rh-font-size-code-lg |
Click to copy
1.125rem |
18px font size |
var(--rh-font-size-code-lg, 1.125rem)
https://ux.redhat.com/tokens/typography/#rh-font-size-code-lg
|
| Aa |
Click to copy
--rh-font-size-code-xl |
Click to copy
1.25rem |
20px font size |
var(--rh-font-size-code-xl, 1.25rem)
https://ux.redhat.com/tokens/typography/#rh-font-size-code-xl
|
| Aa |
Click to copy
--rh-font-size-code-2xl |
Click to copy
1.5rem |
24px font size |
var(--rh-font-size-code-2xl, 1.5rem)
https://ux.redhat.com/tokens/typography/#rh-font-size-code-2xl
|
Heading
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Aa |
Click to copy
--rh-font-size-heading-xs |
Click to copy
1.25rem |
h6 heading font size |
var(--rh-font-size-heading-xs, 1.25rem)
https://ux.redhat.com/tokens/typography/#rh-font-size-heading-xs
|
| Aa |
Click to copy
--rh-font-size-heading-sm |
Click to copy
1.5rem |
h5 heading font size |
var(--rh-font-size-heading-sm, 1.5rem)
https://ux.redhat.com/tokens/typography/#rh-font-size-heading-sm
|
| Aa |
Click to copy
--rh-font-size-heading-md |
Click to copy
1.75rem |
h4 heading font size |
var(--rh-font-size-heading-md, 1.75rem)
https://ux.redhat.com/tokens/typography/#rh-font-size-heading-md
|
| Aa |
Click to copy
--rh-font-size-heading-lg |
Click to copy
2.25rem |
h3 heading font size |
var(--rh-font-size-heading-lg, 2.25rem)
https://ux.redhat.com/tokens/typography/#rh-font-size-heading-lg
|
| Aa |
Click to copy
--rh-font-size-heading-xl |
Click to copy
2.5rem |
h2 heading font size |
var(--rh-font-size-heading-xl, 2.5rem)
https://ux.redhat.com/tokens/typography/#rh-font-size-heading-xl
|
| Aa |
Click to copy
--rh-font-size-heading-2xl |
Click to copy
3rem |
h1 heading font size |
var(--rh-font-size-heading-2xl, 3rem)
https://ux.redhat.com/tokens/typography/#rh-font-size-heading-2xl
|
Weight
Body text
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| regular |
Click to copy
--rh-font-weight-body-text-regular |
Click to copy
400
|
Regular font weight |
var(--rh-font-weight-body-text-regular, 400)
https://ux.redhat.com/tokens/typography/#rh-font-weight-body-text-regular
|
| medium |
Click to copy
--rh-font-weight-body-text-medium |
Click to copy
500
|
Medium font weight |
var(--rh-font-weight-body-text-medium, 500)
https://ux.redhat.com/tokens/typography/#rh-font-weight-body-text-medium
|
Code
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| regular |
Click to copy
--rh-font-weight-code-regular |
Click to copy
400
|
Regular font weight |
var(--rh-font-weight-code-regular, 400)
https://ux.redhat.com/tokens/typography/#rh-font-weight-code-regular
|
| medium |
Click to copy
--rh-font-weight-code-medium |
Click to copy
500
|
Medium font weight |
var(--rh-font-weight-code-medium, 500)
https://ux.redhat.com/tokens/typography/#rh-font-weight-code-medium
|
Heading
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| light |
Click to copy
--rh-font-weight-heading-regular |
Click to copy
300
|
Regular font weight for headings |
var(--rh-font-weight-heading-regular, 300)
https://ux.redhat.com/tokens/typography/#rh-font-weight-heading-regular
|
| medium |
Click to copy
--rh-font-weight-heading-medium |
Click to copy
500
|
Medium font weight for headings |
var(--rh-font-weight-heading-medium, 500)
https://ux.redhat.com/tokens/typography/#rh-font-weight-heading-medium
|
| bold |
Click to copy
--rh-font-weight-heading-bold |
Click to copy
700
|
Bold font weight for headings |
var(--rh-font-weight-heading-bold, 700)
https://ux.redhat.com/tokens/typography/#rh-font-weight-heading-bold
|
Line height
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
Click to copy
--rh-line-height-heading |
Click to copy
1.3 |
Line height for headings |
var(--rh-line-height-heading, 1.3)
https://ux.redhat.com/tokens/typography/#rh-line-height-heading
|
|
Click to copy
--rh-line-height-body-text |
Click to copy
1.5 |
Line height for body text |
var(--rh-line-height-body-text, 1.5)
https://ux.redhat.com/tokens/typography/#rh-line-height-body-text
|
|
Click to copy
--rh-line-height-code |
Click to copy
1.5 |
Line height for code |
var(--rh-line-height-code, 1.5)
https://ux.redhat.com/tokens/typography/#rh-line-height-code
|
Text
Primary
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Aa |
Click to copy
--rh-color-text-primary-on-light |
Click to copy
#151515 |
Primary text color for light theme |
var(--rh-color-text-primary-on-light, #151515)
https://ux.redhat.com/tokens/typography/#rh-color-text-primary-on-light
|
| Aa |
Click to copy
--rh-color-text-primary-on-dark |
Click to copy
#ffffff |
Primary text color for dark theme |
var(--rh-color-text-primary-on-dark, #ffffff)
https://ux.redhat.com/tokens/typography/#rh-color-text-primary-on-dark
|
Secondary
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Aa |
Click to copy
--rh-color-text-secondary-on-light |
Click to copy
#4d4d4d |
Secondary text color for light theme |
var(--rh-color-text-secondary-on-light, #4d4d4d)
https://ux.redhat.com/tokens/typography/#rh-color-text-secondary-on-light
|
| Aa |
Click to copy
--rh-color-text-secondary-on-dark |
Click to copy
#c7c7c7 |
Secondary text color for dark theme |
var(--rh-color-text-secondary-on-dark, #c7c7c7)
https://ux.redhat.com/tokens/typography/#rh-color-text-secondary-on-dark
|
Brand
| Ex. | Token name | Value | Use case | |
|---|---|---|---|---|
| Aa |
Click to copy
--rh-color-text-brand-on-light |
Click to copy
#ee0000 |
Brand text color for light theme |
var(--rh-color-text-brand-on-light, #ee0000)
https://ux.redhat.com/tokens/typography/#rh-color-text-brand-on-light
|
| Aa |
Click to copy
--rh-color-text-brand-on-dark |
Click to copy
#ee0000 |
Brand text color for dark theme |
var(--rh-color-text-brand-on-dark, #ee0000)
https://ux.redhat.com/tokens/typography/#rh-color-text-brand-on-dark
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
Other libraries
To learn more about our other libraries, visit the getting started page.
