Typography

@summonware/ui · typography · P0 · Core UI

Usage

The type scale, rendered from live tokens. Sizes are computed from a base and a named ratio rather than hand-picked, so changing `baseSize` or `scale` in a brand retunes the whole hierarchy consistently. `text-xs` and `text-sm` are deliberately base−2 and base−1 rather than ratio steps — at small sizes a geometric ratio collapses the distinctions.
import { TypographySpecimen } from '@summonware/ui';

Best practices

DoSize text with the tokens, never with raw pixel values, or a rebrand will skip whatever you hardcoded.
DoUse `text-[length:var(--sw-text-sm)]`, not `text-[var(--sw-text-sm)]`. Without the `length:` hint, tailwind-merge treats it as the same group as `text-text` and silently drops one of them.
Don'tAssume a 16px base. The reference measures 14px, and a 16px default would scale the entire UI up by a seventh.

Examples

Common configurations, variations and states.

The scale

The quick brown fox--sw-text-3xl · Display
The quick brown fox--sw-text-2xl · Page title
The quick brown fox--sw-text-xl · Section title
The quick brown fox--sw-text-lg · Subsection
The quick brown fox--sw-text-base · Body
The quick brown fox--sw-text-sm · Secondary
The quick brown fox--sw-text-xs · Caption
Every step from Display down to Caption, rendered at whatever the current brand computes. Switch theme and this table changes with it.

Reference variants

2 of 9 labels from the reference are demonstrated above.
HeadingsDisplay HeadingsInline Text ElementsContextual Text ColorsUnorderedOrderedUnstyledBlockquotesHorizontal Description