Back to Devoured - June 03, 2026
DEVOURED
How to Create Variable Fonts: A Guide for Type Designers

How to Create Variable Fonts: A Guide for Type Designers

Design webfrontendtypography We and the Color
Variable fonts, now a professional standard with 92% browser compatibility and 40% website adoption, consolidate entire font families into a single OpenType file for infinite design control.
What: Variable fonts are single OpenType files (version 1.8+) that contain continuous ranges of design variants along defined axes like weight (wght), width (wdth), slant (slnt), and optical size (opsz), reducing file sizes by 30-65% for three or more weights. Professional tools like FontLab 8, Glyphs 3, and RoboFont are used to create them by defining a design space, creating compatible masters (with identical point counts and order), interpolating instances, and exporting to variable TTF, then WOFF2 for web.
Why it matters: The widespread adoption and performance benefits of variable fonts signify a fundamental shift in web typography, offering unparalleled design flexibility and efficiency, making proficiency a critical skill for type designers and front-end developers. The emergence of custom axes like 'GRAD' for dark mode without layout reflow points to future creative applications.
Takeaway: If you're a type designer, mastering variable font creation using tools like FontLab 8 or Glyphs 3 is crucial for career relevance; for web developers, understanding `font-variation-settings` and WOFF2 conversion is key for modern typography.
Deep dive
  • Variable fonts are single OpenType files (version 1.8+) containing continuous design variations along axes like weight, width, and optical size.
  • They replace multiple static font files, reducing total file size by 30-65% when three or more weights are needed.
  • The technology, originating from Apple's TrueType GX, was standardized in OpenType 1.8 by Apple, Google, Microsoft, and Adobe in 2016.
  • Browser compatibility for variable fonts is around 92%, with approximately 40% of websites now using them.
  • Five registered OpenType axes exist: wght (weight), wdth (width), ital (italic), slnt (slant), and opsz (optical size).
  • Designers can define custom axes using four-character uppercase tags, expanding creative possibilities (e.g., a GRAD axis for grade).
  • Key tools for creating variable fonts include FontLab 8 (Mac/Windows), Glyphs 3 (Mac), and RoboFont (Mac + Superpolator). FontForge is a free, open-source option.
  • The "Axis-Master-Instance Pipeline" involves defining the design space, creating compatible masters (identical point count and order), interpolating and testing instances, defining named instances, spacing/kerning across the design space, adding OpenType features, and exporting to variable TTF (then WOFF2 for web).
  • "Compatible masters" are critical, meaning every glyph in every master must have identical point counts, point order, and contour direction for successful interpolation.
  • For web use, variable fonts should be converted to WOFF2 for maximum compression and implemented with CSS properties like font-weight, font-stretch, font-style for registered axes, and font-variation-settings for custom axes.
  • Notable examples include Monotype's Helvetica Now Variable (three axes, 1.2 million styles) and Hoefler & Co.'s Gotham Variable. Rasmus Andersson's Inter is a widely used open-source variable font.
Decoder
  • Variable font: A single OpenType font file that contains continuous ranges of design variants, allowing for infinite control over typography parameters like weight, width, and slant, rather than using separate files for each style.
  • OpenType: A widely used font format developed by Microsoft and Adobe, offering advanced typographic features. OpenType version 1.8 introduced variable font technology.
  • Variation axis: A defined dimension of change within a variable typeface (e.g., weight, width, slant, optical size). Each axis has a minimum, default, and maximum value.
  • Registered axes: Five standardized variation axes defined by the OpenType specification: wght (weight), wdth (width), ital (italic), slnt (slant), and opsz (optical size).
  • Custom axes: Non-standardized variation axes defined by type designers using four-character uppercase tags, allowing for unique typographic behaviors beyond the registered axes.
  • Masters: The extreme design points within a variable font's design space (e.g., Light Condensed, Bold Extended). All glyphs across masters must be "compatible" (identical point count and order) for interpolation to work.
  • Instances: Specific variations generated from the masters along the axes. "Named instances" are predefined presets like "Regular" or "Bold" that appear in font menus.
  • WOFF2: Web Open Font Format 2, a highly compressed font format optimized for web delivery, offering significant file size reduction over other formats.
  • font-variation-settings: A CSS property used to control custom variable font axes, specified by the four-character axis tag and a numeric value.
  • font-weight, font-stretch, font-style: High-level CSS properties that automatically map to the registered wght, wdth, ital, and slnt variable font axes.
Original article

Full article content is not available for inline reading.

Read the original article →

Explore all 53 articles in today's digest

Fresh dev news, AI-digested daily. Never miss a trend at devoured.fyi