Typography - Keep React

Typography in Keep React is a reusable className that simplifies text styling, offering a consistent way to format and present text across a web application. It allows developers to easily add properties like font size, line height and letter spacing.

Table of Contents#

Heading Typography#

The Heading Typography component in Keep React allows you to style headings easily.

export const HeadingTypography = () => {
  return (
    <div className="space-y-4">
      <h1 className="text-heading-1">The quick brown fox</h1>
      <h2 className="text-heading-2">The quick brown fox</h2>
      <h3 className="text-heading-3">The quick brown fox</h3>
      <h4 className="text-heading-4">The quick brown fox</h4>
      <h5 className="text-heading-5">The quick brown fox</h5>
      <h6 className="text-heading-6">The quick brown fox</h6>
    </div>
  )
}

Utilities for controlling the font size of an element.

ClassProperties
text-heading-1font-size: 4rem; /* 64px */
line-height: 4.875rem; /* 78px */
letter-spacing: -2.3px;
text-heading-2font-size: 3.5rem; /* 56px */
line-height: 4.125rem; /* 66px */
letter-spacing: -1.75px;
text-heading-3font-size: 3rem; /* 48px */
line-height: 3.75rem; /* 60px */
letter-spacing: -1.75px;
text-heading-4font-size: 2.5rem; /* 40px */
line-height: 3rem; /* 48px */
letter-spacing: -1.5px;
text-heading-5font-size: 2rem; /* 32px */
line-height: 2.625rem; /* 42px */
letter-spacing: -0.75px;
text-heading-6font-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.

export const BodyTypography = () => {
  return (
    <div className="space-y-4">
      <p className="text-body-1">The quick brown fox jumps over the lazy dog</p>
      <p className="text-body-2">The quick brown fox jumps over the lazy dog</p>
      <p className="text-body-3">The quick brown fox jumps over the lazy dog</p>
      <p className="text-body-4">The quick brown fox jumps over the lazy dog</p>
      <p className="text-body-5">The quick brown fox jumps over the lazy dog</p>
    </div>
  )
}

Utilities for controlling the font size of an element.

ClassProperties
text-body-1font-size: 1.25rem; /* 20px */
line-height: 1.75rem; /* 28px */
letter-spacing: -0.4px;
text-body-2font-size: 1.125rem; /* 18px */
line-height: 1.5rem; /* 24px */
letter-spacing: -0.4px;
text-body-3font-size: 1rem; /* 16px */
line-height: 1.5rem; /* 24px */
letter-spacing: -0.3px;
text-body-4font-size: 0.875rem; /* 14px */
line-height: 1.375rem; /* 22px */
letter-spacing: -0.2px;
text-body-5font-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.

export const Display = () => {
  return <h1 className="text-display">Display</h1>
}

Utilities for controlling the font size of an element.

ClassProperties
text-displayfont-size: 6rem; /* 96px */
line-height: 6.875rem; /* 110px */
letter-spacing: -2.5px;
Edit this pageColors