Foundations
Typography and readable hierarchy
Use the actual Elza-based interface hierarchy, with practical limits for long course titles and lesson content.
On this page
Font contract
The app layout loads Adobe Typekit qff4wee.css and the body requests elza, sans-serif. The CSS also declares Geist-related theme variables, but they do not replace the body font. Local Font Awesome faces are icon fonts, not body text. Captures load the app’s configured font stylesheet; do not silently substitute an invented typography system.
Observed hierarchy
| Context | Source convention | Usage |
|---|---|---|
| PageHeading | text-3xl font-extrabold | One route-level heading. |
| Course and lesson titles | Prominent bold/black text within their compositions | Let long titles wrap in the actual responsive layout. |
| Section labels | Uppercase text-lg font-black with divider rules | Action checklist, links and downloads. |
| Learner body | text-lg and relaxed leading | Readable description and instructions. |
| Field labels and hints | Strong labels, muted subordinate text | Keep a persistent name outside placeholder text. |
| Navigation | Compact medium/bold text | Use names that identify a destination. |
Content constraints
- Course titles should name the outcome; lesson titles should explain the next concrete topic.
- Use real titles and descriptions for captures instead of replacing course content with generic copy.
- Avoid a fixed height that hides multiline text in a new card variant.
- Verify font loading, 200% zoom, and the longest available course title before approval.
Examples from the app
Actual TeachKit UI with Thomas McGee’s course content. Session, progress and connection specimens are simulated; no student data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision d8cf23d0a329 · Documentation v0.1