typography.*Typography
A four-font hierarchy built around F37 Lineca. Each typeface has a single primary role and should not stray from it.
Font families
typography.fontFamily.displaytypography.fontFamily.bodytypography.fontFamily.editorialtypography.fontFamily.monotypography.scale.lg = 24px
motion.duration.normal = 200ms
typography.fontFamily.body-fallbacktypography.fontFamily.display-fallbackSize scale — 14px to 80px
4xl3xl2xlxllgmdbasesmxsHeading hierarchy — minimum sizes
Each semantic heading level maps to a required minimum token. Strong hierarchy depends on perceptible size gaps between levels — never compress adjacent levels to the same or adjacent scale steps.
h1 · display3xl – 4xlh12xlh2xlh3lgh4mdh5 · h6Rule: Each heading level must be visually distinct from the one below it. If a page title and a section heading look the same size, one of them is wrong. Hierarchy is not decoration — it is navigation.
Lists — ul & ol
Lists inherit body size and family. Markers recede to var(--text-3) so the content — not the chrome — holds visual weight.
ul — unorderedlist-style: disc- Guest research completed before the call
- Signal questions for the first 10 minutes
- Production notes and show description
- Nested list — one level only:
- Episode title and guest bio
- Sponsor read timing
li::marker { color: var(--text-3); }
li + li { margin-top: 8px; }
ul ul { padding-left: 16px; list-style-type: circle; }
ol — orderedlist-style: decimal- Brief the guest on format and length
- Open with the context-setting question
- Follow the planned arc — adapt as needed
- Nested steps use alpha markers:
- Check audio levels
- Start Riverside recording
li::marker { color: var(--text-3); }
li + li { margin-top: 8px; }
ol ol { padding-left: 16px; list-style-type: lower-alpha; }
Marker color is always var(--text-3) — it recedes behind content. Never use signal orange as a list marker; it treats every item as equally urgent.
List text is var(--text-2), not var(--text-1). Lists are supporting content. Reserve text-1 for headings and critical UI labels.
Use ordered lists only when sequence genuinely matters. If shuffling the items doesn't break meaning, use ul.
Nest a maximum of one level. If you need sub-sub-items, reconsider the information architecture — a card or definition list is likely a better pattern.
Preserve 24px bottom margin on the list container to maintain paragraph rhythm with surrounding prose.
Line height
typography.lineHeight.tight1.1typography.lineHeight.snug1.3typography.lineHeight.normal1.5typography.lineHeight.relaxed1.7Usage rules
F37 Lineca is the canonical display face for all headings across product, print, cover art, episode title cards, slide decks, and documents.
Space Grotesk is the digital fallback where Lineca cannot be embedded or licensed. It should never appear alongside Lineca in the same context.
Aktiv Grotesk handles all body copy, UI labels, captions, and metadata. Inter Tight is the fallback when Adobe Fonts cannot load. Never use a display font for body text.
Source Serif 4 is italic-only. Use it for pull quotes, editorial deck subtitles, and moments that need a magazine register. Never use it roman.
JetBrains Mono is reserved for code, token names, timestamps, and technical metadata. Do not use it for UI copy.
No new typefaces. The four-face stack is the system. If you think you need a fifth face, you need to make the case.