Rhetoric-ds

Typography

A typography system providing consistent text hierarchy and sizing across all components.

Display Large

Heading Medium

Body Medium - Default body text

Label Medium - Form labels

Code

Usage

// Display text (page titles) <h1 className="text-display-lg">Page Title</h1> // Heading text (sections) <h2 className="text-heading-md">Section Title</h2> // Body text (content) <p className="text-body-md">Default body text</p> // Label text (UI elements) <label className="text-label-md">Form Label</label>

Reference

Display Text

text-display-2xl
Size: 4.375rem (70px)
Line Height: 1.1
Weight: 700
Usage: Huge headings
text-display-2xl
text-display-xl
Size: 3.625rem (58px)
Line Height: 1.1
Weight: 700
Usage: Large headings
text-display-xl
text-display-lg
Size: 2.875rem (46px)
Line Height: 1.2
Weight: 700
Usage: Main page titles (default)
text-display-lg
text-display-md
Size: 2.125rem (34px)
Line Height: 1.2
Weight: 700
Usage: Hero section headings
text-display-md

Heading Text

text-heading-xl
Size: 2.375rem (38px)
Line Height: 1.4
Weight: 600
Usage: Section headings
text-heading-xl
text-heading-lg
Size: 2.125rem (34px)
Line Height: 1.4
Weight: 600
Usage: Subsection headings
text-heading-lg
text-heading-md
Size: 1.875rem (30px)
Line Height: 1.4
Weight: 600
Usage: Section titles
text-heading-md
text-heading-sm
Size: 1.625rem (26px)
Line Height: 1.4
Weight: 600
Usage: Subsection titles
text-heading-sm
text-heading-xs
Size: 1.375rem (22px)
Line Height: 1.4
Weight: 600
Usage: Small headings
text-heading-xs

Body Text

Body BODY - Emphasis and important content

text-body-lg

Body BODY - Default body text

text-body-md

Body BODY - Secondary information

text-body-sm

Label Text

Label LABEL - Navigation labels

text-label-lg

Label LABEL - Form labels

text-label-md

Label LABEL - UI element labels

text-label-sm

Usage Guidelines

When to Use

Use display text for main page titles and hero sections. Use heading text for section and subsection titles with clear hierarchy. Use body text for content and paragraphs, with body-md as the default.

Label text is designed for UI elements like form labels, navigation items, and small interface text. Always maintain the text hierarchy for better readability.

Best Practices

  • Use text-display-lg for main page titles (default h1)
  • Use text-body-md as the default body text
  • Maintain consistent hierarchy (display → heading → body → label)
  • Use semantic HTML tags with typography classes
  • Ensure sufficient line height for readability