BoardCN

Typography

One composite utility per style. text-body-medium sets size, line height, letter spacing, and weight together, so a type choice is a single class.

Generated from registry/boardcn/styles/typography.css. Every style exists in four weights — regular, medium, semibold, and bold — named text-<family>-<weight>. There is no bare text-body; the weight is always explicit.

Large Title

4rem / 5rem
  • text-large-title-regularRegularThe quick brown fox
  • text-large-title-mediumMediumThe quick brown fox
  • text-large-title-semiboldSemiboldThe quick brown fox
  • text-large-title-boldBoldThe quick brown fox

Display 1

3.5rem / 4.5rem
  • text-display-1-regularRegularThe quick brown fox
  • text-display-1-mediumMediumThe quick brown fox
  • text-display-1-semiboldSemiboldThe quick brown fox
  • text-display-1-boldBoldThe quick brown fox

Display 2

3rem / 4rem
  • text-display-2-regularRegularThe quick brown fox
  • text-display-2-mediumMediumThe quick brown fox
  • text-display-2-semiboldSemiboldThe quick brown fox
  • text-display-2-boldBoldThe quick brown fox

Display 3

2.5rem / 3.375rem
  • text-display-3-regularRegularThe quick brown fox
  • text-display-3-mediumMediumThe quick brown fox
  • text-display-3-semiboldSemiboldThe quick brown fox
  • text-display-3-boldBoldThe quick brown fox

Display 4

2rem / 2.75rem
  • text-display-4-regularRegularThe quick brown fox
  • text-display-4-mediumMediumThe quick brown fox
  • text-display-4-semiboldSemiboldThe quick brown fox
  • text-display-4-boldBoldThe quick brown fox

Title 1

1.5rem / 2.125rem
  • text-title-1-regularRegularThe quick brown fox
  • text-title-1-mediumMediumThe quick brown fox
  • text-title-1-semiboldSemiboldThe quick brown fox
  • text-title-1-boldBoldThe quick brown fox

Title 2

1.25rem / 1.625rem
  • text-title-2-regularRegularThe quick brown fox
  • text-title-2-mediumMediumThe quick brown fox
  • text-title-2-semiboldSemiboldThe quick brown fox
  • text-title-2-boldBoldThe quick brown fox

Title 3

1.125rem / 1.5rem
  • text-title-3-regularRegularThe quick brown fox
  • text-title-3-mediumMediumThe quick brown fox
  • text-title-3-semiboldSemiboldThe quick brown fox
  • text-title-3-boldBoldThe quick brown fox

Headline

1rem / 1.375rem
  • text-headline-regularRegularThe quick brown fox
  • text-headline-mediumMediumThe quick brown fox
  • text-headline-semiboldSemiboldThe quick brown fox
  • text-headline-boldBoldThe quick brown fox

Body

0.875rem / 1.25rem
  • text-body-regularRegularThe quick brown fox
  • text-body-mediumMediumThe quick brown fox
  • text-body-semiboldSemiboldThe quick brown fox
  • text-body-boldBoldThe quick brown fox

Body 2

0.8125rem / 1.125rem
  • text-body-2-regularRegularThe quick brown fox
  • text-body-2-mediumMediumThe quick brown fox
  • text-body-2-semiboldSemiboldThe quick brown fox
  • text-body-2-boldBoldThe quick brown fox

Caption 1

0.75rem / 1rem
  • text-caption-1-regularRegularThe quick brown fox
  • text-caption-1-mediumMediumThe quick brown fox
  • text-caption-1-semiboldSemiboldThe quick brown fox
  • text-caption-1-boldBoldThe quick brown fox

Caption 2

0.6875rem / 0.9375rem
  • text-caption-2-regularRegularThe quick brown fox
  • text-caption-2-mediumMediumThe quick brown fox
  • text-caption-2-semiboldSemiboldThe quick brown fox
  • text-caption-2-boldBoldThe quick brown fox