Typography

The platform's system font MUST be used. Establish a type scale with clear roles — don't invent sizes ad-hoc.

Platform system fonts:

  • Apple: SF Pro (iOS/macOS), New York (serif alternative)
  • Android: Roboto, or system default via Material type system
  • Windows: Segoe UI Variable
  • Web: System font stack (system-ui, -apple-system, sans-serif)

Defaults when no design system exists:

  • Body text: 14-17pt (16px is the safest cross-platform default)
  • Minimum readable size: 11-12pt for captions/labels, text MUST NOT be smaller
  • Line height: 1.4x-1.5x font size for body text
  • Heading scale: Use the platform's built-in type scale (Dynamic Type, Material type tokens, Fluent type ramp) rather than inventing sizes

General principles:

  • Limit to 2-3 font weights per screen (regular, medium/semibold, bold)
  • All-caps SHOULD be avoided for more than a few words — harms readability and screen reader experience
  • Paragraph width: 45-75 characters for comfortable reading
  • See agentic-cookbook://guidelines/accessibility/accessibility for Dynamic Type / font scaling requirements

References:

version
1.0.0
platforms
ios, kotlin, macos, typescript, web, windows
tags
typography, ui
author
Mike Fullerton
modified
2026-03-27

Change History

Version Date Author Summary
1.0.0 2026-03-27 Mike Fullerton Initial creation