Skip to content

Interface typography

Use the shared --hq-text-* roles from src/workspace.css instead of one-off pixel sizes. The scale is relative to the browser's root font preference; do not fix the root size or simulate readable text by zooming the application.

RoleSizeUse
Caption0.75remEyebrows, compact status labels, event timestamps
Metadata0.8125remAttribution, secondary facts, identifiers
Supporting copy0.875remField help, detail descriptions, form labels
Interface copy0.9375remActivity descriptions, navigation, ordinary controls
Body1remDefault text, item titles, mobile text inputs
Section heading1.125remGoal objectives and section headings

Tailwind's text-xs, text-sm, and text-base utilities map to metadata, interface, and body roles in src/index.css, so shared shadcn controls follow the same scale. Geist Sans remains the reading face; use Geist Mono for short identifiers and timestamps, not paragraphs.

Keep Activity descriptions and event titles the same size on desktop and mobile. Preserve their complete text, wrapping long identifiers instead of truncating descriptions or goals. Let narrow form rows stack and navigation scroll rather than reducing text to fit. Pair larger copy with comfortable line height, and preserve visible keyboard focus.

The typography browser checks cover both themes, narrow layouts, exact goal and description text, keyboard dialogs, and an enlarged root font. They complement the full form and accessibility suites.