Typography is the primary vehicle for content in the Alius ecosystem. Given that much of the platform revolves around documentation, configuration, and code, the type system must prioritize readability, clarity, and technical precision.

Font Layers

The Alius type system is organized into four layers, each optimized for its context of use.

Display / Brand

Used for hero titles, brand pages, promotional materials, and landing page headlines.

  • Purpose: Make a strong first impression and establish brand personality
  • Characteristics: Large sizes, bold weights, tight letter spacing
  • Context: Homepages, product launches, event banners, marketing sections

UI

Used for the software client, console, configuration pages, buttons, form labels, and interface controls.

  • Purpose: Provide clear, scannable, and actionable text in interactive interfaces
  • Characteristics: Medium sizes, regular to medium weights, moderate line heights
  • Context: Navigation, buttons, menus, forms, tooltips, status bars, settings panels

Docs

Used for long-form reading including documentation, guides, tutorials, and reference pages.

  • Purpose: Maximize readability over extended periods
  • Characteristics: Comfortable body sizes, generous line heights, clear paragraph spacing
  • Context: Documentation center, tutorials, API references, changelogs, knowledge base articles

Mono / Code

Used for CLI output, code blocks, configuration files, inline code, logs, terminal displays, and technical identifiers.

  • Purpose: Clearly distinguish code and technical content from prose
  • Characteristics: Monospaced, distinct from body font, ligature support optional
  • Context: Code snippets, terminal output, file paths, variable names, config keys, log entries, command examples

Typographic Scale

Heading Sizes

  • H1: Used once per page for the main title
  • H2: Major section headings
  • H3: Subsection headings within a section
  • H4: Detail headings within a subsection
  • H5/H6: Rarely used; for deeply nested content only

Body Sizes

  • Large body: Introductory paragraphs, lead text
  • Standard body: Default reading text for documentation and descriptions
  • Small body: Secondary descriptions, helper text, metadata

Annotation Sizes

  • Caption: Image captions, table headers, figure labels
  • Overline: Category labels, version tags, section markers (typically uppercase, small size, wide letter spacing)
  • Footnote: Legal text, disclaimers, fine print

Line Heights

  • Headings: tighter line height for visual density
  • Body text: generous line height (1.5-1.7x) for comfortable reading
  • Code blocks: consistent line height that aligns with the baseline grid

Weights

  • Regular (400): Body text, descriptions, documentation content
  • Medium (500): Emphasized body text, navigation items, form labels
  • Semibold (600): Subheadings, button text, table headers
  • Bold (700): Page titles, major headings, key callouts

Letter Spacing

  • Tight: Large display headings
  • Normal: Body text, UI labels
  • Wide: Overlines, uppercase labels, small caps

Font Selection Principles

  • Prefer open-source, commercially available fonts
  • Fonts must render consistently across platforms (macOS, Windows, Linux, mobile)
  • Web fonts should have optimized subsets for fast loading
  • Fallback font stacks must be defined for every font layer
  • Avoid fonts with excessive personality that distract from content