Typography

A comprehensive typography system with role-based font definitions, Tailwind v4 integration, and context-specific application rules.

Production

The Ontopix typography system provides five font roles — each mapped to semantic CSS variables and Tailwind classes. Fonts are loaded automatically via @nuxt/fonts from Google Fonts declarations.

Font Families

RoleFamilyTailwind ClassUsage
LogoHelvetica—Logo wordmark only
UiGeist Sansfont-uiSite-wide default body font, Web application interfaces, Navigation and controls, Form elements and labels
DocsLiteratafont-proseDocumentation and long-form content, Technical specifications, Blog posts and articles, Prose sections rendered by ContentRenderer
CodeGeist Monofont-codeCode blocks and snippets, Terminal output, Technical identifiers (file paths, commands), Inline code references
ActionableMondafont-actionButtons and CTAs, Actionable links, Interactive elements, Menu items and navigation actions

For full font specifications, weights, and fallbacks, see Fonts. For the complete type scale, see Type Scale.

Typography by Context

Different contexts require different typographic treatment. The same brand voice adapts to context-specific needs.

Website & Marketing

Marketing site, landing pages, blog posts

SettingValue
Min Body Size16px
Max Line Length75ch
Heading Line Height1.2
Body Line Height1.6
Paragraph Spacing1.5em

Font Usage:

  • Headings: ui
  • Body: docs
  • Code: code
  • Actionable: actionable
Marketing content prioritizes readability and brand expression. Use larger sizes and generous spacing for impact.

Printed Materials

Business cards, letterheads, brochures, reports

SettingValue
Min Body Size11pt
Bleed3mm
Safe Zone5mm
Heading Line Height1.15
Body Line Height1.4

Font Usage:

  • Headings: ui
  • Body: docs
Print requires slightly tighter spacing than screen. Ensure adequate margins and bleed for professional output.

Application Interfaces

Desktop apps, web apps, dashboards, forms

SettingValue
Min Label Size12px
Min Body Size14px
Touch Target44px
Heading Line Height1.25
Body Line Height1.5
Compact Line Height1.3

Font Usage:

  • Primary: ui
  • Secondary: ui
  • Code: code
  • Actionable: actionable
UI typography prioritizes scannability and information density. Use clear hierarchy to guide user attention.

Documentation

Technical docs, API references, guides, READMEs

SettingValue
Max Line Length80ch
Min Body Size16px
Code Block Size14px
Heading Line Height1.3
Body Line Height1.7

Font Usage:

  • Headings: docs
  • Body: docs
  • Code: code
Documentation requires excellent readability for extended reading. Code blocks should be clearly distinguished from prose.

Internal Communications

Presentations, reports, internal memos, Slack

SettingValue
Min Body Size14px
Presentation Min Size24px
Heading Line Height1.3
Body Line Height1.5

Font Usage:

  • Headings: docs
  • Body: docs
Internal content can be slightly more compact. Presentations require larger sizes for visibility.

Commercial Documents

Proposals, contracts, quotes, invoices

SettingValue
Min Body Size10pt
Heading Line Height1.2
Body Line Height1.4
Table Cell Padding4pt

Font Usage:

  • Headings: docs
  • Body: docs
Commercial documents balance professionalism with density. Tables and structured data are common.

Responsive Typography

Typography scales responsively based on viewport:

BreakpointMultiplierNotes
lg1.0xNo change for large screens
md1.0xBase scale
sm0.9375xSmall screens
xl1.0625xSlightly larger for very large screens
xs0.875xSlightly smaller for mobile

Usage Guidelines

Hierarchy

Establish clear visual hierarchy using size, weight, and spacing.

Readability

Maintain optimal line length (45-75 characters) and line height (1.5-1.75) for body text.

Accessibility

All typography must meet WCAG 2.1 AA requirements:

  • Minimum body size: 16px
  • Minimum contrast ratio: 4.5:1
  • Line height minimum: 1.5
  • Zoom support: 200%

Surfaces

Design tokens for backgrounds, text, and borders — the foundational layers of the Ontopix visual system.

Font Families

Font families, weights, and specimens for each role