Convictional

Typography

Our type system uses two families: a serif accent for headings and a clean sans-serif for everything else. The combination signals editorial confidence, more magazine than SaaS dashboard.

Source of truth: app/styles/main.css

Typefaces

Loretta (Accent / Headings)

  • Family: "loretta", "serif"
  • CSS variable: --font-accent
  • Weight: 400 (regular) for headings
  • Source: Adobe Typekit (use.typekit.net/lbl4dtu.css)
  • Usage: Page titles, section headings, hero text. Loretta is the personality, used sparingly and with intention.

Inter (Body / UI)

  • Family: Tailwind system default sans-serif stack
  • Weights: 400 (regular), 600 (semibold for emphasis, buttons)
  • Usage: All body copy, UI elements, navigation, labels, form fields. Inter is the workhorse: clear, neutral, invisible.

Material Symbols Outlined (Icons)

  • Family: Google Material Symbols Outlined
  • Variable axes: opsz (20-48), wght (100-700), FILL (0-1), GRAD (-50-200)
  • Source: Google Fonts
  • Usage: All UI icons. Outlined style, not filled. Weight matches surrounding text weight.

Hierarchy

Page titles: Loretta, semibold (600), large. These set the editorial tone.

Section headings: Loretta, semibold (600), medium. Used to divide major content areas.

Body text: Inter, regular (400), base size. The default for everything.

UI text / Buttons: Inter, semibold (600), text-xs (0.75rem). Compact, confident.

Captions / Secondary: Inter, regular (400), small. Muted color (base-500 or base-600).

Spacing philosophy

The spacing system uses a hierarchical ratio: sections get the most breathing room, subsections less, individual elements the least. The general ratio is 8:4:2. If sections are separated by 8 units of space, subsections get 4, and elements within get 2.

This prevents the two most common spacing failures: everything equidistant (no hierarchy) or random spacing (no system).

Mobile considerations

  • Minimum input text size: 16px, which prevents browser zoom on focus in iOS Safari
  • This is enforced in CSS: input, textarea, select { font-size: 16px; } within mobile container queries

Principles

  • Serif for personality, sans-serif for work. The Loretta headings say "we have taste." The Inter body says "we have things to tell you." Never reverse this: no serif body text, no sans-serif hero headlines.
  • Tight but not cramped. We use compact spacing for UI density, but every element has breathing room. If text feels squeezed, add space.
  • Consistent weight. Don't use bold for emphasis in body text. Use bold sparingly, for structural emphasis (labels, section headers). In body copy, prefer phrasing for emphasis.