21-Typography — Typography System

Character-level and paragraph-level typography with semantic structure.

Character Typography

Inline text styling at the character level.

Base Styles

Normal text · Emphasized text · Strong text · Deleted text · Inserted text

Variants

Inline code · Ctrl+S · Sample output · variable

Semantic Styles

HTML · Citation · Inline quote · · Highlighted

Paragraph Typography

Block-level text styling for paragraphs and text containers.

Hierarchy

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Base Paragraphs

Lead paragraph — This is introductory text that stands out from body copy with larger size and lighter weight.

Body paragraph — Regular body text used for the main content. Optimized for readability at standard sizes.

Small paragraph — Secondary information, captions, and fine print.

Semantic Blocks

"This is a blockquote. It represents quoted content from another source."

— Author Name
123 Example Street
City, State 12345

Layout Styles

Left aligned text

Center aligned text

Right aligned text

Typography Structure

The typography layer is organized into nested components:

21-typography/
├── character/
│   ├── base/       # Normal, emphasized, strong, delete, insert
│   ├── variant/    # Code, keyboard, sample, variable
│   └── semantic/   # Abbreviation, cite, quote, time, highlight
├── paragraph/
│   ├── base/       # Body, lead, small
│   ├── hierarchy/  # H1–H6, subheadings
│   ├── semantic/   # Blockquote, address, definition
│   └── layout/     # Alignment, columns, spacing
└── _index.scss