Typography

Create readable, accessible, and beautiful text with Axiom01's typography system.

Typography Philosophy

Axiom01's typography system is crafted for optimal readability and visual hierarchy. Every typographic choice is made to enhance user experience and accessibility.

Core Principles

  • Readability First: Clear, legible text across all devices
  • Semantic Structure: Proper heading hierarchy and text elements
  • Consistent Scale: Harmonious font sizes and spacing
  • Accessibility: WCAG 2.1 AA compliant contrast and sizing

Type Scale & Hierarchy

Axiom01 uses a carefully crafted type scale that ensures visual hierarchy and readability:

Heading 1 - Main Page Title

var(--a-font-size-h1) | font-weight: var(--a-font-weight-bold)

Heading 2 - Section Title

var(--a-font-size-h2) | font-weight: var(--a-font-weight-bold)

Heading 3 - Subsection

var(--a-font-size-h3) | font-weight: var(--a-font-weight-bold)

Heading 4 - Component Title

var(--a-font-size-h4) | font-weight: var(--a-font-weight-bold)

Lead Paragraph - Introductory text that stands out

font-size: 1.25rem | font-weight: 300

Body Text - Standard paragraph text for content

var(--a-font-size-base) | line-height: var(--a-line-height-base)
Small Text - Captions, disclaimers, metadata font-size: 0.875rem | opacity: 0.8

Font Families

Axiom01 uses a carefully selected font stack that provides excellent readability across all platforms:

Sans Serif (Primary)

Used for headings, body text, and UI elements. Provides excellent readability on screens.

var(--a-font-family-sans) 
-apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Helvetica, Arial,
sans-serif

Monospace (Code)

Used for code blocks, technical content, and the Axiom brand logo.

var(--a-font-family-mono) 
ui-monospace, Menlo, Monaco,
"Cascadia Code", "Roboto Mono",
monospace

Text Styles & Utilities

Axiom01 provides semantic text styling classes for common text treatments:

Text can be bold using strong element, emphasized using em element, muted for less emphasis, or formatted as code.

"This is a blockquote for highlighting important quotes or testimonials." — Author Name

Semantic HTML Examples

<p>Regular paragraph text</p>
<p class="lead">Lead paragraph for introductions</p>
<strong>Important text</strong>
<em>Emphasized text</em>
<code>Inline code</code>
<small>Small text</small>

<blockquote>
  "Quote text"
  <cite>Author</cite>
</blockquote>

Lists & Content Structure

Proper list formatting for organized content:

Unordered List

  • First item with enough text to wrap
  • Second item
    • Nested item one
    • Nested item two
  • Third item

Ordered List

  1. First step in the process
  2. Second step with details
  3. Final step to completion

Responsive Typography

Axiom01 typography automatically adapts to different screen sizes for optimal readability:

Fluid Type Scaling

Font sizes scale smoothly between breakpoints using CSS clamp() function:

  • Mobile (320px+): Smaller, more compact text for limited space
  • Tablet (768px+): Increased sizing for comfortable reading
  • Desktop (1024px+): Full sizing for optimal desktop experience

Line Height & Spacing

Text spacing automatically adjusts for readability:

  • Line Height: 1.7 for body text, 1.2 for headings
  • Paragraph Spacing: Consistent margins using spacing variables
  • Letter Spacing: Optimized for each font size

Typography Accessibility

Visual Accessibility

  • Minimum 16px font size for body text
  • WCAG AA contrast ratios (4.5:1 minimum)
  • Clear font choices for dyslexia support
  • Adequate line spacing for readability

Screen Reader Support

  • Semantic HTML structure
  • Proper heading hierarchy
  • Descriptive link text
  • Meaningful list structures

User Preferences

  • Respects system font size preferences
  • Supports zoom up to 200%
  • Maintains readability at all sizes
  • High contrast mode support

Typography Customization

Customize Axiom01's typography by overriding CSS variables:

Custom Font Example

:root {
  /* Custom font families */
  --a-font-family-sans: 'Inter', system-ui, sans-serif;
  --a-font-family-mono: 'Fira Code', monospace;

  /* Custom font sizes */
  --a-font-size-base: 1.125rem;  /* 18px base */
  --a-font-size-h1: 3rem;        /* 48px */
  --a-font-size-h2: 2.25rem;     /* 36px */

  /* Custom line heights */
  --a-line-height-base: 1.8;     /* More spacious */
  --a-line-height-heading: 1.1;  /* Tighter headings */

  /* Custom font weights */
  --a-font-weight-normal: 400;
  --a-font-weight-bold: 600;     /* Less heavy bold */
}

Typography Best Practices

✅ Do

  • Use semantic HTML elements for structure
  • Maintain consistent heading hierarchy
  • Test with different font sizes
  • Ensure sufficient color contrast
  • Use CSS variables for consistency
  • Test with screen readers

❌ Don't

  • Skip heading levels (h1 to h3)
  • Use color alone to convey meaning
  • Set text smaller than 16px
  • Use low contrast text
  • Ignore responsive scaling
  • Rely only on visual formatting