Advanced Typography Guide

Axiom01's typography system is crafted for optimal readability, visual hierarchy, and flexibility. This guide explores how to effectively use and customize font stacks, sizes, weights, and line heights to create stunning and accessible text layouts.

Font Families

Axiom01 defines core font families using CSS variables, allowing for easy global changes and theme-specific overrides. By default, it uses a modern sans-serif stack for body text and a monospace font for code snippets.

:root {
    --a-font-family-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --a-font-family-mono: "JetBrains Mono", monospace;
    --a-font-family-serif: "Lora", serif; /* Example: if you add a serif font */
}

You can override these variables in your :root or within a [data-theme] block to change the entire application's typeface. Ensure that any custom fonts you use are properly loaded (e.g., via @import, @font-face, or <link> tags).

Font Showcase

Sans-serif

The quick brown fox jumps over the lazy dog. 1234567890

Monospace

The quick brown fox jumps over the lazy dog. 1234567890

Serif (Example)

The quick brown fox jumps over the lazy dog. 1234567890

Font Sizes: A Cascading Scale

Axiom01 uses a modular and cascading font size system, derived from a single --a-font-size-base variable and a --a-heading-scale. This ensures consistent visual rhythm and easy global adjustments. All font sizes are defined in rem units, making them scalable and responsive to user preferences.

:root {
    --a-font-size-base: 1rem; /* Default base font size (16px) */
    --a-heading-scale: 1.15; /* Modular scale factor for headings */

    /* Heading sizes derived from base and scale */
    --a-font-size-h6: calc(var(--a-font-size-base) / var(--a-heading-scale)); /* ~0.87rem */
    --a-font-size-h5: var(--a-font-size-base); /* 1rem */
    --a-font-size-h4: calc(var(--a-font-size-base) * var(--a-heading-scale)); /* ~1.15rem */
    --a-font-size-h3: calc(var(--a-font-size-h4) * var(--a-heading-scale)); /* ~1.32rem */
    --a-font-size-h2: calc(var(--a-font-size-h3) * var(--a-heading-scale)); /* ~1.52rem */
    --a-font-size-h1: calc(var(--a-font-size-h2) * var(--a-heading-scale)); /* ~1.75rem */

    /* General text sizes */
    --a-font-size-xs: calc(var(--a-font-size-base) * 0.75); /* ~0.75rem */
    --a-font-size-s: calc(var(--a-font-size-base) * 0.875); /* ~0.875rem */
    --a-font-size-m: var(--a-font-size-base); /* 1rem */
    --a-font-size-l: calc(var(--a-font-size-base) * 1.25); /* ~1.25rem */
    --a-font-size-xl: calc(var(--a-font-size-base) * 1.5); /* ~1.5rem */
    --a-font-size-xxl: calc(var(--a-font-size-base) * 2); /* 2rem */
}

By adjusting --a-font-size-base or --a-heading-scale, you can globally scale all text sizes in your application, making it easy to adapt to different design requirements or user preferences.

Text Size Examples

Text XXL (var(--a-font-size-xxl))

Text XL (var(--a-font-size-xl))

Text L (var(--a-font-size-l))

Text M (var(--a-font-size-m))

Text S (var(--a-font-size-s))

Text XS (var(--a-font-size-xs))

Font Weights

Control text emphasis with predefined font weight variables. These variables map to common font weights, ensuring consistency across your design.

:root {
    --a-font-weight-normal: 400;
    --a-font-weight-medium: 500;
    --a-font-weight-bold: 700;
    --a-font-weight-black: 900;
}

Normal weight text (--a-font-weight-normal)

Medium weight text (--a-font-weight-medium)

Bold weight text (--a-font-weight-bold)

Black weight text (--a-font-weight-black)

Line Heights

Ensure optimal readability and visual rhythm with consistent line height variables. These are unitless values, which is generally recommended for better scalability.

:root {
    --a-line-height-tight: 1.2;
    --a-line-height-normal: 1.6;
    --a-line-height-loose: 2;
}

This paragraph has a tight line height. It is suitable for headings or short lines of text where space is limited. (--a-line-height-tight)

This paragraph has a normal line height. This is the default and recommended line height for most body text to ensure good readability. (--a-line-height-normal)

This paragraph has a loose line height. It provides more vertical space between lines, which can be useful for certain design aesthetics or for content that requires extra visual separation. (--a-line-height-loose)

Text Utilities

Axiom01 provides a minimal set of utility classes for common text styling needs, promoting semantic HTML while offering quick adjustments.

Text Alignment

Apply these classes directly to any block-level element to control its text alignment.

Left aligned text.
Center aligned text.
Right aligned text.
Justified text. This text will attempt to fill the entire width of its container by adjusting the spacing between words. This can create a clean edge on both sides of the text block.
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>

Text Transformation

Use these classes to quickly change the case of text without modifying the HTML content.

This text is uppercase.

This text is lowercase.

This text is capitalized.

<p class="text-uppercase">This text is uppercase.</p>
<p class="text-lowercase">This text is lowercase.</p>
<p class="text-capitalize">This text is capitalized.</p>