7 Free Tools for Building and Testing a Web Typography System

// TypeScript utility for generating clamp values
interface FluidScaleConfig {
  minViewport: number;
  maxViewport: number;
  minSize: number;
  maxSize: number;
  scaleRatio: number;
}

export function generateFluidToken(
  config: FluidScaleConfig,
  step: number
): string {
  const { minViewport, maxViewport, minSize, maxSize, scaleRatio } = config;
  
  const currentMin = minSize * Math.pow(scaleRatio, step);
  const currentMax = maxSize * Math.pow(scaleRatio, step);
  
  const slope = (currentMax - currentMin) / (maxViewport - minViewport);
  const intersection = -1 * minViewport * slope + currentMin;
  
  const clampMin = `${currentMin / 16}rem`;
  const clampVal = `${intersection / 16}rem + ${slope * 100}vw`;
  const clampMax = `${currentMax / 16}rem`;
  
  return `clamp(${clampMin}, ${clampVal}, ${clampMax})`;
}

s from optical size adjustments.

Configuration Example: Once axes are validated, configure the font loading and usage strategy.

@font-face {
  font-family: 'SystemSans';
  src: url('/fonts/system-sans-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-display: swap;
}

:root {
  --font-primary: 'SystemSans', system-ui, sans-serif;
  --font-weight-body: 400;
  --font-weight-heading: 700;
  --font-stretch-ui: 100%;
}

.heading-xl {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-heading);
  font-stretch: var(--font-stretch-ui);
  font-size: var(--type-scale-4);
  line-height: 1.1;
}

Step 4: Enforce Contrast Compliance

Color combinations must be validated against WCAG standards. Automated checks prevent accessibility regressions when design tokens are updated.

Validation Logic: Implement a contrast checker that calculates luminance ratios and flags violations.

function hexToRgb(hex: string): { r: number; g: number; b: number } {
  const bigint = parseInt(hex.slice(1), 16);
  return {
    r: (bigint >> 16) & 255,
    g: (bigint >> 8) & 255,
    b: bigint & 255,
  };
}

function relativeLuminance({ r, g, b }: { r: number; g: number; b: number }): number {
  const [rs, gs, bs] = [r, g, b].map((c) => {
    const srgb = c / 255;
    return srgb <= 0.03928 ? srgb / 12.92 : Math.pow((srgb + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
}

export function checkContrast(fg: string, bg: string, isLargeText: boolean = false): boolean {
  const lumFg = relativeLuminance(hexToRgb(fg));
  const lumBg = relativeLuminance(hexToRgb(bg));
  const ratio = (Math.max(lumFg, lumBg) + 0.05) / (Math.min(lumFg, lumBg) + 0.05);
  
  const threshold = isLargeText ? 3.0 : 4.5;
  return ratio >= threshold;
}

Step 5: Tokenize and Implement

Centralize typography definitions using CSS custom properties. This enables theme switching, consistent application across components, and easy maintenance.

Architecture Decision: Use a flat token structure for scale steps and semantic tokens for roles. This decouples design intent from implementation details.

:root {
  /* Scale Tokens */
  --type-scale-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --type-scale-1: clamp(1.125rem, 1.05rem + 0.375vw, 1.3125rem);
  --type-scale-2: clamp(1.3125rem, 1.15rem + 0.8125vw, 1.6875rem);
  --type-scale-3: clamp(1.6875rem, 1.35rem + 1.6875vw, 2.5rem);
  --type-scale-4: clamp(2.5rem, 1.65rem + 4.25vw, 4.5rem);

  /* Semantic Tokens */
  --text-body: var(--type-scale-0);
  --text-subtitle: var(--type-scale-1);
  --text-heading-sm: var(--type-scale-2);
  --text-heading-md: var(--type-scale-3);
  --text-heading-lg: var(--type-scale-4);
}

Pitfall Guide

1. Ignoring Variable Font Axes

   • Explanation: Developers often load variable fonts but only use the weight axis, missing opportunities for width or optical size adjustments that improve readability and layout density.
   • Fix: Inspect font files using an axis inspector tool. Map available axes to design tokens (e.g., --font-stretch-compact) and apply them contextually.

2. Hardcoding clamp() Bounds Without Viewport Context

   • Explanation: Setting arbitrary minimum and maximum sizes without considering the actual viewport range of the application leads to text that is too small on mobile or too large on desktop.
   • Fix: Define explicit viewport bounds based on analytics or design constraints. Generate clamp() values that map precisely to these bounds.

3. Contrast Tunnel Vision

   • Explanation: Testing contrast only on white backgrounds ignores dark mode, gradients, and image overlays where text may fail accessibility requirements.
   • Fix: Validate contrast pairs against all background variations in the design system. Implement automated checks in the CI/CD pipeline for token updates.

4. Scale Ratio Mismatch

   • Explanation: Using different ratios for body text and headings creates a disjointed visual rhythm. The scale should be harmonious across all levels.
   • Fix: Select a single ratio for the entire system. If multiple ratios are needed, ensure they share a mathematical relationship (e.g., square root of the primary ratio).

5. Over-Reliance on External Font Hosting

   • Explanation: Loading fonts from third-party CDNs introduces latency, privacy concerns, and dependency risks.
   • Fix: Self-host variable fonts whenever possible. Use font-display: swap to prevent FOIT and optimize loading performance.

6. Missing Fallback Strategies

   • Explanation: Relying solely on variable fonts without fallbacks can cause rendering issues in older browsers or when font files fail to load.
   • Fix: Define robust font stacks with system fallbacks. Use @supports queries to apply variable font features only when supported.

7. Inconsistent Line Height Scaling

   • Explanation: Scaling font size without adjusting line height results in cramped headings or loose body text, harming readability.
   • Fix: Inverse-scale line heights relative to font size. Larger text requires tighter leading; smaller text requires more breathing room.

Production Bundle

Action Checklist

• Define viewport bounds and base font size for the fluid scale.
• Select a modular scale ratio using a visualizer tool.
• Generate clamp() values for all scale steps.
• Inspect candidate variable fonts for required axes.
• Validate all text/background color pairs against WCAG AA/AAA.
• Implement CSS custom properties for scale and semantic tokens.
• Test typography at minimum, midpoint, and maximum viewports.
• Audit font loading performance and fallback behavior.

Decision Matrix

Scenario	Recommended Approach	Why	Cost Impact
Marketing / Content Site	Fluid Scale + Google Fonts	Rapid development, extensive font library, acceptable performance trade-offs.	Low
Enterprise Dashboard	Fluid Scale + Self-Hosted Variable	Performance optimization, strict consistency, data density requirements.	Medium
Legacy Browser Support	Static Breakpoints + Fallbacks	Compatibility with older rendering engines that lack clamp() or variable font support.	High
Design System Library	Tokenized Fluid + Automated Contrast	Reusability, maintainability, and guaranteed accessibility across consuming applications.	Medium

Configuration Template

/* typography-system.css */

:root {
  /* Viewport Configuration */
  --vp-min: 320;
  --vp-max: 1440;
  
  /* Scale Configuration */
  --scale-base: 16;
  --scale-ratio: 1.25;
  
  /* Fluid Scale Tokens */
  --type-0: clamp(1rem, 0.9375rem + 0.3125vw, 1.125rem);
  --type-1: clamp(1.125rem, 1.03125rem + 0.46875vw, 1.3125rem);
  --type-2: clamp(1.3125rem, 1.125rem + 0.9375vw, 1.6875rem);
  --type-3: clamp(1.6875rem, 1.3125rem + 1.875vw, 2.5rem);
  --type-4: clamp(2.5rem, 1.6875rem + 4.0625vw, 4.5rem);
  
  /* Line Height Tokens */
  --lh-body: 1.5;
  --lh-heading: 1.15;
  
  /* Semantic Mapping */
  --text-body: var(--type-0);
  --text-caption: var(--type-0);
  --text-heading: var(--type-3);
  
  /* Font Configuration */
  --font-primary: 'InterVar', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrainsMono', monospace;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    /* Disable fluid scaling for users preferring reduced motion */
    --type-0: 1rem;
    --type-1: 1.125rem;
    --type-2: 1.3125rem;
    --type-3: 1.6875rem;
    --type-4: 2.5rem;
  }
}

Quick Start Guide

1. Initialize Scale: Use a modular scale visualizer to select a ratio. Input your base size and ratio to generate step values.
2. Generate Fluid CSS: Input viewport bounds and scale values into a fluid generator to produce clamp() CSS custom properties.
3. Select Typeface: Browse font libraries filtered by classification. Inspect variable axes to ensure they meet your functional needs.
4. Validate Contrast: Run your text and background color combinations through a contrast checker. Adjust colors until WCAG AA compliance is achieved.
5. Deploy Tokens: Copy the generated CSS variables into your project. Apply semantic tokens to components and verify rendering across viewports.