Variable fonts

Variable fonts are a modern CSS technology that allows a single font file to dynamically adjust visual characteristics such as weight, width, italics, and more by modifying axis parameters. This technology significantly reduces font file size while providing more flexible typographic control.

Core Concepts of Variable Fonts

The core of variable fonts lies in the variable axes defined by font designers. The OpenType specification defines five registered axes:

1. Weight axis (wght): Controls stroke thickness
2. Width axis (wdth): Controls character width
3. Italic axis (ital): Controls italicization
4. Slant axis (slnt): Controls character slant angle
5. Optical size axis (opsz): Optimizes display for different font sizes

Additionally, font designers can create custom axes, such as serif intensity or x-height. These axes are controlled via the CSS font-variation-settings property:

h1 {
  font-family: 'InterVariable';
  font-variation-settings: 'wght' 650, 'slnt' -10;
}

Browser Support and Performance Advantages

Modern browsers, including Chrome, Firefox, Safari, and Edge, all support variable fonts. Compared to traditional web font solutions, variable fonts offer distinct advantages:

• Smaller file size: A single variable font file can replace multiple static font files
• Finer control: Allows setting arbitrary values within axis ranges instead of fixed steps
• Dynamic adjustment: Enables smooth transitions when combined with CSS animations

@font-face {
  font-family: 'SourceSansVariable';
  src: url('SourceSansVariable.woff2') format('woff2');
}

body {
  font-family: 'SourceSansVariable';
  transition: font-variation-settings 0.3s ease;
}

body:hover {
  font-variation-settings: 'wght' 700;
}

Practical Applications

Responsive Typography

Variable fonts are particularly suited for responsive design, allowing dynamic adjustments based on viewport size:

:root {
  --viewport-scale: calc(100vw / 1440);
}

h1 {
  font-variation-settings: 
    'wght' calc(300 + (900 - 300) * var(--viewport-scale)),
    'wdth' calc(80 + (120 - 80) * var(--viewport-scale));
}

Dynamic Effects

Combining with CSS animations enables unique text effects:

@keyframes weight-shift {
  0% { font-variation-settings: 'wght' 100; }
  50% { font-variation-settings: 'wght' 900; }
  100% { font-variation-settings: 'wght' 100; }
}

.animated-text {
  animation: weight-shift 3s infinite;
}

Advanced Techniques and Considerations

Fallback Strategies

While variable fonts are well-supported, compatibility should still be considered:

/* Traditional font stack */
body {
  font-family: 'StaticFont', 'VariableFont', sans-serif;
}

/* Feature query approach */
@supports (font-variation-settings: 'wght' 400) {
  body {
    font-family: 'VariableFont';
  }
}

Performance Optimization

Despite smaller file sizes, optimizations are still necessary:

1. Use woff2 format compression
2. Set font-display: swap to avoid layout shifts
3. Preload critical fonts

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Creative Application Examples

Interactive Font Adjustment

Create sliders to control font parameters:

<input type="range" id="weightControl" min="100" max="900" value="400">
<p id="demoText">Adjustable text example</p>

<script>
  const weightControl = document.getElementById('weightControl');
  const demoText = document.getElementById('demoText');
  
  weightControl.addEventListener('input', (e) => {
    demoText.style.fontVariationSettings = `'wght' ${e.target.value}`;
  });
</script>

3D Text Effects

Combine variable fonts with CSS transforms:

.perspective-text {
  font-variation-settings: 'wght' 800, 'wdth' 85;
  transform: perspective(500px) rotateY(15deg);
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

Collaboration Between Designers and Developers

Close coordination is essential:

1. Identify axes to expose to CSS
2. Establish mappings in the design system
3. Create style guide documentation examples:

| Use Case    | wght Value | wdth Value | Notes          |
|-------------|------------|------------|----------------|
| Headings    | 700        | 110        | For large screens |
| Body Text   | 400        | 100        | Default value    |
| Emphasized  | 600        | 100        | Alternative to `<strong>` |

Debugging and Testing Tools

Chrome DevTools provides specialized panels for variable fonts:

1. Inspect font-variation-settings in the Elements panel
2. View applied font variants in the Computed tab
3. Preview effects in real-time using sliders

For more complex testing, use online tools like:

• Axis-Praxis
• Wakamai Fondue
• FontGoggles