Skip to main content
Typography is non-negotiable. Bad typography will kill an otherwise good design. Reference: Paco Coursey’s work. Minimal and focused. Hierarchy is achieved through the fewest possible changes — font weight and color contrast, nothing more. No decorative type treatments unless they serve a clear purpose.

Rules

  • Establish a clear typographic hierarchy and follow it consistently.
  • Achieve contrast through weight and color, not by multiplying font sizes or styles.
  • Every typographic choice must be intentional and justifiable.
  • When in doubt, do less.
  • Define a constrained type scale and use only values from it. Don’t hand-pick arbitrary font sizes. In Sundial that scale is the 15 typography tokens — 5 categories × 3 sizes, full stop.
  • Keep body text line length between 45–75 characters. Wider degrades readability.
  • Line-height is contextual: tighter for large headings (1–1.2), looser for body (1.5–2). One line-height for everything will always feel wrong somewhere. Sundial encodes this: display styles are 1.0, body is 1.5, titles/overlines/buttons 1.2.
  • When mixing font sizes on the same line, align by baseline, not center.
  • Not every link needs a color treatment. In navigation or obviously interactive contexts, weight or underline-on-hover is cleaner than link-blue.
  • Right-align numbers in tables and use tabular figures so columns line up.

Line length and line height, precisely

Headings have line-length limits too — roughly 20–30 characters for large display sizes. Don’t run any text the full width of a large viewport.

In Sundial

The type system already embodies these rules — your job is to not fight it:
  • Use context.textTheme tokens only; never construct a TextStyle with a hand-picked size.
  • The two-typeface split is intentional: Libertinus Serif display styles are Ash’s warm voice for hero moments; Inter does everything functional. Don’t use display styles for UI chrome.
  • The body weight of 425 exists precisely to tune contrast between body and semibold titles — respect it rather than bolding body text.