Typography
Text styles for headings and body content.
Example
Style
Size
Weight
Line
Overview
The Standard UI typography system is built on three font families and the Apps SDK type scale from 2xl down to 2xs. Text styles are Tailwind utilities that combine family, size, line height, and weight. Prefer these tokens over ad-hoc font properties.
Font families
Three families cover UI, display, and code.
| CSS variable | Tailwind class | Font | Usage |
|---|---|---|---|
| --font-sans | font-sans | Söhne | Default UI and body. Paragraphs, controls, and general content. |
| --font-display | font-display | Signifier | Serif display. Use with heading-*-serif for editorial titles. |
| --font-mono | font-mono | Söhne Mono | Monospace. Code, tokens, and technical identifiers. |
Type scale
Headings
Sizes lg through 2xl ship as both Söhne (sans) and Signifier (serif) variants. Smaller headings use Söhne only.
| Tailwind class | Font | Size | Line height | Weight | Usage |
|---|---|---|---|---|---|
| heading-2xl-sans / heading-2xl-serif | Söhne / Signifier | 36px (2xl) | 42px | 600 | Page titles and hero headings. Use sparingly. |
| heading-xl-sans / heading-xl-serif | Söhne / Signifier | 32px (xl) | 38px | 600 | Major section headings. |
| heading-lg-sans / heading-lg-serif | Söhne / Signifier | 24px (lg) | 28px | 600 | Subsection headings. |
| heading-md | Söhne | 20px (md) | 26px | 600 | Card titles, dialog headers. |
| heading-sm | Söhne | 18px (sm) | 26px | 600 | Small headings and list headers. |
| heading-xs | Söhne | 16px (xs) | 24px | 600 | Compact headings in dense UI. |
Body text
Body styles use Söhne. Each size has a regular and strong (medium weight) variant.
| Tailwind class | Size | Line height | Weight | Usage |
|---|---|---|---|---|
| text-lg / text-lg-strong | 18px (lg) | 29px | 400 / 500 | Lead paragraphs and intro copy. |
| text-md / text-md-strong | 16px (md) | 24px | 400 / 500 | Default body text and labels. |
| text-sm / text-sm-strong | 14px (sm) | 20px | 400 / 500 | Captions, helper text, button labels. |
| text-xs / text-xs-strong | 12px (xs) | 18px | 400 / 500 | Footnotes, timestamps, badges. |
| text-2xs / text-2xs-strong | 10px (2xs) | 14px | 400 / 500 | Dense metadata and compact chrome. |
Text colors
Pair type tokens with semantic text colors for hierarchy. See Colors for the full palette.
| Tailwind class | Usage |
|---|---|
| text-fg-primary | Headings and emphasized content. |
| text-fg-secondary | Body text and standard content. |
| text-fg-tertiary | Captions, labels, and supporting text. |
| text-fg-quaternary | Placeholders, disabled text, and subtle hints. |
Usage guidelines
Do
- Use
heading-*for titles to keep hierarchy consistent - Use
text-mdfor paragraphs,text-smfor secondary info - Pair type tokens with semantic colors (
text-fg-primary,text-fg-secondary) - Prefer
-strongvariants over arbitrary font weights - Pick
-serifor-sansexplicitly on lg–2xl headings - Keep heading levels sequential — don’t skip steps
Don't
- Don’t use raw sizes like
text-[17px]for content typography - Don’t mix arbitrary weights with type tokens
- Don’t use Signifier for body copy or sizes below
heading-lg - Don’t use
heading-2xl-*more than once per page - Don’t stack multiple type tokens on the same element
- Don’t use headings only for visual size — match semantic levels
Responsive typography
The scale works across breakpoints. Combine with Tailwind prefixes when you need a size jump.
| Pattern | Usage |
|---|---|
| heading-xl-serif md:heading-2xl-serif | Larger page title on medium+ screens. |
| text-sm md:text-md | Larger body text on medium+ screens. |