Typography - Keep React
Table of Contents#
Heading Typography#
The Heading Typography component in Keep React allows you to style headings easily.
Utilities for controlling the font size of an element.
| Class | Properties |
|---|---|
| text-heading-1 | font-size: 4rem; /* 64px */ line-height: 4.875rem; /* 78px */ letter-spacing: -2.3px; |
| text-heading-2 | font-size: 3.5rem; /* 56px */ line-height: 4.125rem; /* 66px */ letter-spacing: -1.75px; |
| text-heading-3 | font-size: 3rem; /* 48px */ line-height: 3.75rem; /* 60px */ letter-spacing: -1.75px; |
| text-heading-4 | font-size: 2.5rem; /* 40px */ line-height: 3rem; /* 48px */ letter-spacing: -1.5px; |
| text-heading-5 | font-size: 2rem; /* 32px */ line-height: 2.625rem; /* 42px */ letter-spacing: -0.75px; |
| text-heading-6 | font-size: 1.5rem; /* 24px */ line-height: 2.125rem; /* 34px */ letter-spacing: -0.4px; |
Body Typography#
Elevate the readability of your text with the Body Typography component in Keep React.
Utilities for controlling the font size of an element.
| Class | Properties |
|---|---|
| text-body-1 | font-size: 1.25rem; /* 20px */ line-height: 1.75rem; /* 28px */ letter-spacing: -0.4px; |
| text-body-2 | font-size: 1.125rem; /* 18px */ line-height: 1.5rem; /* 24px */ letter-spacing: -0.4px; |
| text-body-3 | font-size: 1rem; /* 16px */ line-height: 1.5rem; /* 24px */ letter-spacing: -0.3px; |
| text-body-4 | font-size: 0.875rem; /* 14px */ line-height: 1.375rem; /* 22px */ letter-spacing: -0.2px; |
| text-body-5 | font-size: 0.75rem; /* 12px */ line-height: 1.375rem; /* 22px */ letter-spacing: -0.2px; |
Display Typography#
Make a visual impact with the Display Typography component in Keep React.
Utilities for controlling the font size of an element.
| Class | Properties |
|---|---|
| text-display | font-size: 6rem; /* 96px */ line-height: 6.875rem; /* 110px */ letter-spacing: -2.5px; |