Typography in Web Design: Performance, Readability, and Variable Fonts

Typography is the most impactful design element on the web. Text constitutes over 90% of the information on most websites, making font selection, sizing, spacing, and loading strategy critical to both user experience and performance. At Nexis Limited, we treat typography as a core engineering concern, not just an aesthetic choice.

Font Loading Strategies

Web fonts introduce a performance challenge: the browser must download font files before rendering text, which can cause either a Flash of Invisible Text (FOIT) or a Flash of Unstyled Text (FOUT). We prefer FOUT because it ensures content is always accessible, even before custom fonts load. The font-display: swap descriptor in the @font-face rule instructs the browser to immediately render text in a fallback font, then swap to the custom font once it loads.

Preloading Critical Fonts

For fonts used above the fold, we add link rel="preload" tags in the document head to begin downloading font files as early as possible. This reduces the time users see fallback fonts. We limit preloading to 1-2 font files to avoid competing with other critical resources. The crossorigin attribute is required on preload links for fonts, even when served from the same origin, due to how browsers handle font requests.

Self-hosting fonts rather than using Google Fonts or other CDNs eliminates a DNS lookup and connection to a third-party server, reducing latency. We download the font files, subset them to include only the character sets needed (Latin, for example), and serve them from the same domain with aggressive caching headers.

Font Subsetting and Formats

Most font files contain glyphs for hundreds of languages and special characters that most websites never use. Subsetting removes unused glyphs, often reducing file size by 60-80%. Tools like pyftsubset and glyphhanger automate this process. We generate subsets for the specific Unicode ranges needed—typically Basic Latin, Latin Extended, and any additional scripts required by the content language.

WOFF2 is the optimal font format for the web, offering 30% better compression than WOFF. All modern browsers support WOFF2, so we serve it as the primary format with WOFF as a fallback for legacy browsers. The @font-face rule lists WOFF2 first in the src descriptor, allowing browsers to select the most efficient format.

Variable Fonts

Variable fonts represent a paradigm shift in web typography. A single variable font file contains an entire family of styles along continuous axes—weight, width, slant, and custom axes defined by the type designer. Instead of loading separate files for Regular, Medium, Bold, and Extra Bold, a single variable font file covers all weights from 100 to 900 and everything in between.

This dramatically reduces the number of HTTP requests and total font payload when multiple weights or styles are needed. A variable font file is typically smaller than two or three static font files combined. In CSS, variable font axes are accessed through the font-variation-settings property or standard properties like font-weight with any numeric value, not just predefined stops.

Animating Variable Font Axes

Variable fonts enable smooth animations along their axes. A heading can animate from a thin weight to a bold weight on hover, or a text element can gradually widen as it enters the viewport. These animations are performant because the browser interpolates between axis values without loading additional font files. We use CSS transitions on font-variation-settings to create fluid typographic animations.

Establishing a Type Scale

A type scale defines the relationship between font sizes in a design system. We use modular scales based on musical intervals—a major third (1.25 ratio) or perfect fourth (1.333 ratio)—to generate harmonious size progressions. Each step in the scale is the previous step multiplied by the ratio. Combined with fluid typography using clamp(), this produces type scales that are both mathematically harmonious and viewport-adaptive.

Readability Optimization

Line length is the single most impactful readability factor. We constrain body text to 60-75 characters per line using max-width set in ch units, which relates directly to character count. Line height (leading) should be 1.5 to 1.75 for body text and tighter (1.1 to 1.3) for headings. Letter spacing adjustments are sometimes needed for all-caps text or specific fonts that are too tightly or loosely set at default tracking.

Typography is where design and engineering converge most visibly. Contact us to optimize your web application's typographic experience. See our typographic work in our portfolio.