Typography system

A sophisticated, fluid type system with performance-optimized calculations.

Overview

Live Wires uses a sophisticated typography system that combines modern CSS features with practical flexibility. The system provides 13 type sizes (xs through 9xl) with fluid scaling, associated line-heights, and letter-spacing—all controlled through clean, maintainable tokens.

Key features

Complete packages: Single utility class applies font-size + line-height + letter-spacing
Fluid scaling: Smooth responsive typography using clamp()
Performance optimized: Pre-calculated values eliminate runtime calculations
Flexible modes: Choose ratio-based (automatic) or manual (baseline-aligned) line-heights
Modular files: Clean separation of tokens (user settings) and tools (calculations)
Semantic naming: Consistent naming across font sizes, line-heights, and letter-spacing
Modern CSS: Uses CSS @property for browser optimizations (with graceful fallback)
Progressive enhancement: Automatic text-wrap for balanced headings and fewer orphans

File structure

The typography system is organized into two folders:

Tokens (user-changeable settings)

typography-base.css: Font stacks, weights, measure, and baseline settings (always imported)
typography-scale-auto.css: Automatic ratio-based configuration (default) - just set the ratio and base size
typography-scale-manual.css: Manual baseline configuration (alternative) - set min/max values for each size

Tools (calculations and optimizations)

properties.css: CSS @property declarations for browser optimizations
typography-scale-auto.css: All clamp() calculations for auto mode (imported with auto mode)
typography-scale-manual.css: All clamp() calculations for manual mode (imported with manual mode)

Choose which scale mode to use in main.css. Auto mode is enabled by default.

To top

How it works

Performance-optimized calculations

The system uses smart pre-calculations for maximum performance:

/* Ratio mode: Pre-calculate ratio powers once */
--ratio-2: calc(var(--type-scale-ratio) * var(--type-scale-ratio));
--ratio-10: calc(var(--ratio-9) * var(--type-scale-ratio));

/* Then use them in clean, readable type definitions */
--text-9xl: clamp(
  calc(var(--text-base-min) * var(--ratio-10) / 16 * 1rem),
  /* ...fluid calculation... */,
  calc(var(--text-base-max) * var(--ratio-10) / 16 * 1rem)
);

Complete packages with unitless line-heights

Each .text-* utility applies three properties together, with line-heights pre-calculated as unitless numbers for best performance:

.text-lg {
  font-size: var(--text-lg);              /* Fluid 20-25px */
  line-height: var(--line-height-lg);     /* Pre-calculated unitless ratio (no runtime calc!) */
  letter-spacing: var(--tracking-lg);     /* -0.01em */
}

This means one class gives you perfectly balanced typography with zero runtime calculations—the browser can render faster.

Automatic text wrapping

Headings and paragraphs get modern text-wrap by default (Chrome 117+, Safari 17.5+):

Headings: text-wrap: balance for balanced line lengths
Paragraphs: text-wrap: pretty to reduce orphans

To top

Configuration modes

Live Wires provides two typography configuration modes in separate files. Choose the one that fits your workflow by importing it in main.css.

Mode 1: Auto (default)

File: typography-scale-auto.css

Best for: Prototyping, quick setup, consistent rhythm

Line-heights are automatically calculated using progressive ratios (1.5 for body, 1.3 for headings, 1.1 for display):

/* In main.css (enabled by default) */
@import './1_tokens/typography-scale-auto.css';

/* In typography-scale-auto.css - just set the ratio */
--type-scale-ratio: 1.25;  /* Major Third scale */
--line-height-ratio-body: 1.5;    /* Body text */
--line-height-ratio-heading: 1.3; /* Headings */
--line-height-ratio-display: 1.1; /* Display text */

/* Pre-calculated ratio powers for performance */
--ratio-2: calc(var(--type-scale-ratio) * var(--type-scale-ratio));
--ratio-10: /* ...calculated once... */;

/* Everything else auto-calculates */

Mode 2: Manual baseline-aligned

File: typography-scale-manual.css

Best for: Production, precise baseline grid alignment, editorial design

Define explicit line-height min/max values for pixel-perfect baseline grid alignment:

/* In main.css - uncomment to enable */
/* @import './1_tokens/typography-scale-auto.css'; */  /* Comment this out */
@import './1_tokens/typography-scale-manual.css';  /* Uncomment this */

/* In typography-scale-manual.css - define explicit values */
--size-lg-min: 20;   --size-lg-max: 25;
--line-lg-min: 24;   --line-lg-max: 32;

/* Line-heights snap to your 24px baseline grid */

Switching modes

In main.css, comment/uncomment the desired mode (both the tokens and tools files):

/* Default: Auto mode (for prototyping) */
@import './1_tokens/typography-scale-auto.css';
@import './2_tools/typography-scale-auto.css';
/* @import './1_tokens/typography-scale-manual.css'; */
/* @import './2_tools/typography-scale-manual.css'; */

/* Production: Manual baseline-aligned */
/* @import './1_tokens/typography-scale-auto.css'; */
/* @import './2_tools/typography-scale-auto.css'; */
@import './1_tokens/typography-scale-manual.css';
@import './2_tools/typography-scale-manual.css';

To top

Customization guide

Change the type scale

Edit min/max values for any size in your chosen scale file:

/* In typography-scale-auto.css or typography-scale-manual.css */

/* Make large text bigger */
--size-lg-min: 22;   /* Was 20 */
--size-lg-max: 28;   /* Was 25 */

Adjust line-height ratios (auto mode)

In typography-scale-auto.css, change the progressive ratios:

/* Adjust line-heights for different text styles */
--line-height-ratio-body: 1.4;    /* Tighter body text (was 1.5) */
--line-height-ratio-heading: 1.2; /* Tighter headings (was 1.3) */
--line-height-ratio-display: 1.0; /* Tighter display (was 1.1) */

Set baseline-aligned line-heights (manual mode)

In typography-scale-manual.css, edit explicit values to snap to your baseline grid:

/* Baseline is 24px, use multiples */
--line-xs-min: 18;   --line-xs-max: 24;   /* 0.75-1× */
--line-sm-min: 21;   --line-sm-max: 24;   /* 0.875-1× */
--line-base-min: 24; --line-base-max: 27; /* 1-1.125× */
--line-lg-min: 24;   --line-lg-max: 36;   /* 1-1.5× */

Customize letter-spacing

Adjust tracking for any size (uses semantic names now):

/* Tighter tracking for display text */
--tracking-3xl: -0.03em;  /* Was -0.025em */
--tracking-6xl: -0.05em;  /* Tighter for very large text */

Change viewport scaling rate

Control how quickly type scales across viewports:

/* Slower scaling */
--type-scale-rate: 0.3vw;  /* Was 0.5vw */

/* Faster scaling */
--type-scale-rate: 0.8vw;

To top

Override utilities

Sometimes you need to break the rules. Override utilities use !important to modify complete packages:

Line-height overrides

<h1 class="text-3xl leading-tight">Tighter headline</h1>
<p class="text-lg leading-relaxed">More spacious paragraph</p>

Available: .leading-none, .leading-tight, .leading-snug, .leading-normal, .leading-relaxed, .leading-loose

Letter-spacing overrides

<h2 class="text-2xl tracking-wider">Spaced out title</h2>
<p class="text-base tracking-tight">Tighter body text</p>

Available: .tracking-tighter, .tracking-tight, .tracking-normal, .tracking-wide, .tracking-wider, .tracking-widest

To top

Modern CSS features

Automatic text wrapping (enabled by default)

All headings and paragraphs get modern text-wrap automatically (Chrome 117+, Safari 17.5+):

/* Already applied to all headings */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;  /* Balanced line lengths */
}

/* Already applied to all paragraphs and list items */
p, li {
  text-wrap: pretty;  /* Reduces orphans */
}

You can also apply these manually with utility classes:

.text-balance - Balances line lengths (great for headings)
.text-pretty - Reduces orphans (great for paragraphs)

To top

Performance optimizations

Pre-calculated ratio powers (auto mode)

Instead of multiplying the ratio 10 times for each size, we calculate powers once:

/* Calculate once */
--ratio-10: calc(var(--ratio-9) * var(--type-scale-ratio));

/* Use many times - much faster! */
--text-9xl: clamp(
  calc(var(--text-base-min) * var(--ratio-10) / 16 * 1rem),
  /* ... */
);

Unitless line-heights

Line-heights are pre-calculated as unitless numbers (CSS best practice):

/* Pre-calculated in tokens (once) */
--line-height-lg: 1.5;  /* or calc(var(--leading-lg) / var(--text-lg)) in manual mode */

/* Used in utilities (no runtime calculation) */
.text-lg {
  line-height: var(--line-height-lg);  /* Just a number - instant! */
}

CSS @property declarations

The system uses CSS @property for better browser optimization (Chrome 85+, Safari 16.4+). Defined in 2_tools/properties.css:

@property --type-scale-ratio {
  syntax: "<number>";
  initial-value: 1.25;
  inherits: true;
}

Older browsers gracefully ignore these declarations (no breaking changes).

To top

Browser support

Core features (all modern browsers)

Fluid typography: clamp() supported in all modern browsers
Unitless line-heights: Universal CSS feature (best practice)
Custom properties: Universal support

Progressive enhancements

CSS @property: Chrome 85+, Safari 16.4+ (gracefully ignored by older browsers)
text-wrap: Chrome 117+, Safari 17.5+ (ignored by older browsers, no breaking changes)

Bottom line: The system works everywhere. Modern browsers get performance optimizations and better typography automatically.

To top

Code examples

Basic usage

<h1 class="text-4xl">Hero headline</h1>
<p class="text-lg">Lead paragraph</p>
<p class="text-base">Body text</p>

With overrides

<h2 class="text-3xl leading-tight tracking-tighter">
  Tight, condensed heading
</h2>

Display typography

<h1 class="text-9xl text-balance">
  Massive hero text
</h1>

Semantic HTML (zero classes)

<article>
  <h1>Automatically sized (3xl)</h1>
  <p>Body text with perfect measure</p>
  <h2>Subheading (2xl)</h2>
  <p>More content</p>
</article>

To top

Overview

Key features

File structure

Tokens (user-changeable settings)

Tools (calculations and optimizations)

How it works

Performance-optimized calculations

Complete packages with unitless line-heights

Automatic text wrapping

Configuration modes

Mode 1: Auto (default)

Mode 2: Manual baseline-aligned

Switching modes

Customization guide

Change the type scale

Adjust line-height ratios (auto mode)

Set baseline-aligned line-heights (manual mode)

Customize letter-spacing

Change viewport scaling rate

Override utilities

Line-height overrides

Letter-spacing overrides

Modern CSS features

Automatic text wrapping (enabled by default)

Performance optimizations

Pre-calculated ratio powers (auto mode)

Unitless line-heights

CSS @property declarations

Browser support

Core features (all modern browsers)

Progressive enhancements

Code examples

Basic usage

With overrides

Display typography

Semantic HTML (zero classes)

Related documentation