Typography

Typography utilities let you override the base layer's defaults. The base layer already styles headings, paragraphs, and forms with sensible sizes and line-heights. You only need these utilities when you want something different.

Text Size

Axiom's type scale is controlled by --text-base (16px) and --type-scale (1.25). Sizes from md upward are mathematically derived from these two values. xs (12px) and sm (14px) are fixed -- they match the industry standard and stay usable regardless of how you gear the scale. These utilities set font-size only, leaving line-height for you to control separately:

.text-size-xs: The quick brown fox jumps over the lazy dog
.text-size-sm: The quick brown fox jumps over the lazy dog
.text-size-md: The quick brown fox jumps over the lazy dog
.text-size-lg: The quick brown fox jumps over the lazy dog
.text-size-xl: The quick brown fox jumps over the lazy dog
.text-size-2xl: The quick brown fox jumps over the lazy dog
.text-size-3xl: The quick brown fox jumps over the lazy dog
.text-size-4xl: The quick brown fox

Container-responsive variants are available: md:text-size-* applies below 900px and sm:text-size-* below 600px. These respond to the container width, not the viewport.

Fluid Headings

Add .headings-fluid to a container to make headings inside it scale smoothly with the container's width. This uses container query units (cqi) and clamp() to interpolate between a minimum and maximum size.

Drag the right edge of the box below to see fluid headings in action:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

To opt out of fluid headings for a nested section, use .headings-fixed.

Line Height

Line-height utilities use explicit named values. The base layer assigns appropriate line-heights to headings and body text, but these let you override:

.line-height-tight (1.1)
Tight line-height. Good for headings or display text where you want compact vertical rhythm.
.line-height-snug (1.3)
Snug line-height. Tighter than default but still readable for short passages.
.line-height-normal (1.5)
Normal line-height. The default for body text. Comfortable for extended reading.
.line-height-relaxed (1.625)
Relaxed line-height. Extra breathing room for dense or technical content.
.line-height-loose (1.8)
Loose line-height. Maximum vertical space for special layout needs.
.line-height-none (1)
No extra line-height. Use only for single lines or icons.

List Style

Override default list styling. Lists use their browser-default markers (disc for ul, decimal for ol) from the base layer. These utilities let you change or remove that:

.list-none - removes markers and left padding:
  • Item one
  • Item two
  • Item three
.list-inside - moves markers inside the content flow:
  • Item one
  • Item two
  • Item three

Also available: .list-disc, .list-decimal, .list-outside.

Font Weight

Control text weight from thin to black. The base layer uses weight 400 for body text and 600 for headings:

.font-thin (100): The quick brown fox jumps over the lazy dog
.font-light (300): The quick brown fox jumps over the lazy dog
.font-normal (400): The quick brown fox jumps over the lazy dog
.font-medium (500): The quick brown fox jumps over the lazy dog
.font-semibold (600): The quick brown fox jumps over the lazy dog
.font-bold (700): The quick brown fox jumps over the lazy dog
.font-extrabold (800): The quick brown fox jumps over the lazy dog
.font-black (900): The quick brown fox jumps over the lazy dog

Font Family

Axiom includes curated system font stacks. No web fonts, no loading delays. The base layer uses the system stack by default:

.font-system
System UI font. Default for the base layer. Uses each platform's native interface font.
.font-transitional
Transitional serif. Charter, Cambria. Classic book-style serif with excellent readability.
.font-old-style
Old-style serif. Iowan Old Style, Palatino. Traditional serif with historical character.
.font-humanist
Humanist sans-serif. Seravek, Gill Sans Nova, Ubuntu, Calibri. Warm, organic sans with calligraphic roots.
.font-geometric
Geometric sans-serif. Avenir, Montserrat, Corbel. Clean, modern sans with circular forms.
.font-classical
Classical humanist. Optima, Candara. Elegant hybrid between serif and sans.
.font-neo-grotesque
Neo-grotesque sans. Inter, Roboto, Helvetica Neue, Arial. Neutral, professional sans.
.font-monospace-code
Monospace code. Cascadia Code, Source Code Pro, Menlo, Consolas. For code and technical content.
.font-monospace-slab
Monospace slab. Nimbus Mono PS, Courier New. Traditional typewriter aesthetic.
.font-industrial
Industrial sans. Bahnschrift, DIN Alternate, Franklin Gothic. Strong, condensed, technical.
.font-rounded
Rounded sans. Hiragino Maru Gothic, Quicksand, Comfortaa. Friendly, approachable rounded terminals.
.font-slab-serif
Slab serif. Rockwell, Roboto Slab. Bold, mechanical serifs with strong presence.
.font-antique
Antique serif. Superclarendon, Bookman Old Style, Georgia. Heavy, vintage aesthetic.

Three shorthand utilities provide quick access to common categories:

.font-sans: Maps to system stack (default)
.font-serif: Maps to transitional serif stack
.font-mono: Maps to monospace code stack

Text Decoration

Control underlines and strikethrough. Links have underlines by default from the base layer:

.underline: This text is underlined
.line-through: This text has strikethrough

Text Alignment

Control horizontal text alignment. Includes container-responsive variants for adapting alignment based on available space:

.text-left: Left-aligned text (default for LTR)
.text-center: Centered text
.text-right: Right-aligned text
.text-justify: Justified text stretches to fill the full width of its container, adjusting spacing between words

Responsive variants: .md:text-left, .md:text-center, .md:text-right, .md:text-justify and corresponding .sm: variants. Common pattern: .text-left .sm:text-center for left-aligned text that centers on narrow containers.

Letter Spacing

Control the spacing between characters. Values are em-based, so they scale proportionally with font size. Tighter spacing suits large display text; wider spacing suits small labels and uppercase text.

.letter-spacing-tight (-0.025em)

Tightens character spacing. Best on large headings and display text.

.letter-spacing-normal (0)

Default browser spacing. Resets to baseline.

.letter-spacing-wide (0.05em)

Opens up character spacing. Good for small text and uppercase labels.

.letter-spacing-wider (0.1em)

Maximum spacing. For small caps, badges, and overlines.

Responsive variants: .md:letter-spacing-* and .sm:letter-spacing-*. Tokens: --letter-spacing-tight, --letter-spacing-normal, --letter-spacing-wide, --letter-spacing-wider.

Text Overflow

Control how text behaves when it overflows its container. Useful for table cells, card titles, navigation items, and anywhere content might exceed the available space.

Truncate

Single-line truncation with an ellipsis. Clips the text and adds "..." when it overflows:

.truncate: This is a long piece of text that will be cut off with an ellipsis

Line Clamp

Multi-line truncation. Allows text to wrap to a set number of lines, then clips with an ellipsis. Great for article previews, product descriptions, or any card content:

.line-clamp-1

This text is clamped to one line. Any content beyond the first line will be hidden and replaced with an ellipsis to indicate truncation.

.line-clamp-2

This text is clamped to two lines. The content wraps naturally up to the limit, then gets truncated. Good for card descriptions where you want a consistent preview height across a grid of items.

.line-clamp-3

This text is clamped to three lines. It allows for a slightly longer preview while still keeping the layout tidy. Works well for blog post excerpts, product summaries, or any content where you want to show a taste of the full text without letting it run away.

Also available: .line-clamp-4, .line-clamp-5, .line-clamp-6.

Text Wrapping

Control how the browser wraps lines of text. These use the modern text-wrap property:

.text-wrap

Normal wrapping. Text flows to the next line when it reaches the container edge.

.text-nowrap

No wrapping. Text stays on a single line regardless of container width.

.text-balance

Balanced wrapping. The browser distributes text evenly across lines so no single line is much longer than others. Best for headings and short text.

.text-pretty

Pretty wrapping. Avoids orphans (single words on the last line) for more polished paragraphs.

Word Breaking

Control where the browser is allowed to break words. Useful for handling long URLs, technical strings, or CJK text:

.break-normal

Default word-breaking rules.

.break-words

Breaks long words that would otherwise overflow. Preserves normal break points but adds mid-word breaks as a fallback: supercalifragilisticexpialidocious

.break-all

Breaks between any two characters. Aggressive, but handles long unbroken strings like URLs or hashes: a]3kf9x2mw7vb8nq1zy6plc0di5ohrj4etgu

.break-keep

Keeps CJK characters together at natural word boundaries instead of breaking between any character.

Whitespace

Control how whitespace and newlines inside an element are handled:

.whitespace-normal - Collapses whitespace, wraps text normally.
.whitespace-nowrap - Collapses whitespace, prevents wrapping.
.whitespace-pre - Preserves whitespace and newlines exactly as written. No wrapping.
.whitespace-pre-line - Collapses spaces but preserves newlines. Text wraps normally.
.whitespace-pre-wrap - Preserves whitespace and newlines. Text wraps when needed.