Type Systems for the Modern Web
Typography on the web requires a systematic approach that balances aesthetic intention with technical constraints. Here is how to build type systems that scale.
Typography Is Infrastructure
When we talk about type systems on the web, we are not talking about font selection—that is one decision in a much larger system. A type system encompasses the scale, the hierarchy, the spacing, the measure, the responsive behaviour, and the technical implementation of every piece of text on the site. It is infrastructure, not decoration.
The quality of a site's type system is evident in the details that most visitors never consciously notice but always feel. Consistent heading sizes across page types. Body text that reads comfortably at any viewport width. Labels and metadata that maintain legibility without competing with primary content. These qualities emerge from a system, not from ad hoc styling decisions.
This article covers the practical mechanics of building type systems for modern web projects, with an emphasis on the decisions that make the difference between a type system that works at launch and one that holds up through years of content growth and design evolution.
Choosing Typefaces for Web Use
Font selection for web projects operates under constraints that print typography does not face. Rendering engines, screen resolutions, subpixel antialiasing, and variable network conditions all affect how a typeface performs in production. A face that looks exquisite in a design tool may render poorly at body text sizes on a standard-resolution Windows display.
The evaluation criteria for web typefaces should include: hinting quality (how well the font renders at small sizes on low-resolution screens), weight range (whether the family includes enough weights for your hierarchy without requiring supplementary faces), character set coverage (does it handle the languages and special characters your content requires), and file size (each weight and style is a separate file that adds to page load).
For body text, prioritise readability over personality. The body face will be read at length by people on a wide range of devices. Generous x-heights, open counters, and consistent stroke widths improve readability. Quirky display faces that look striking in a headline become fatiguing over sustained reading.
For headings and display use, more personality is appropriate. This is where a typeface can carry brand character and create visual impact. The heading face should contrast clearly with the body face—different classification (sans vs serif), different weight distribution, or different proportions.
The Google Fonts library provides a practical starting point for exploring typefaces with web-appropriate licensing and performance. But selection from any source should be tested in the browser, at production sizes, on production content, before committing.
Defining the Type Scale
A type scale is a set of font sizes that form a deliberate relationship. Rather than choosing sizes ad hoc—24px here, 18px there, 14px for that label—a type scale establishes sizes mathematically, producing visual consistency across the hierarchy.
The most common approaches are ratio-based scales. A scale based on a ratio of 1.25 (Major Third) starting from a 16px base produces: 16, 20, 25, 31.25, 39, 48.8. A ratio of 1.333 (Perfect Fourth) produces: 16, 21.3, 28.4, 37.9, 50.5. Steeper ratios create more dramatic contrast between hierarchy levels; shallower ratios create more subtle transitions.
For most web projects, a scale with five to seven steps covers the full hierarchy: body text, small text (labels, captions), and four to five heading levels. Not every project will use all levels, but defining them in advance prevents the drift that occurs when new heading sizes are introduced ad hoc.
The scale should be implemented as design tokens or CSS custom properties, not as hard-coded pixel values in component styles. This centralises the scale definition and makes global adjustments—responsive scaling, proportion tweaks, future redesigns—manageable.
Responsive Typography
Fixed font sizes fail on the web because the reading context varies enormously. A 48px heading that fills a desktop viewport dramatically overwhelms a mobile screen. A 16px body size that reads comfortably on a desktop monitor may feel cramped on a large tablet held at arm's length.
The modern solution is fluid typography using CSS clamp(), which defines a minimum size, a preferred size calculated as a viewport-relative value, and a maximum size. The font size scales smoothly between the minimum and maximum as the viewport changes, without abrupt breakpoint jumps.
A clamp() declaration for a primary heading might look like: font-size: clamp(2rem, 5vw, 4rem). This means the heading is never smaller than 2rem, never larger than 4rem, and between those bounds it scales proportionally to the viewport width. The result is typography that feels appropriately sized at every viewport without requiring breakpoint-specific overrides.
Apply fluid sizing to the type scale systematically. If the body text uses clamp(1rem, 1.1vw, 1.125rem), the heading sizes should use proportionally scaled clamp() values that maintain the hierarchy ratio across viewports.
Line Height and Vertical Rhythm
Line height (leading) has an outsized impact on readability that is frequently underestimated. Body text that is too tightly set feels dense and laborious. Text that is too loosely set loses cohesion—the eye struggles to track from the end of one line to the beginning of the next.
For body text at web sizes (15-18px), a line height between 1.5 and 1.75 is typically comfortable. The ideal value depends on the specific typeface (faces with taller x-heights need more leading), the line length (longer lines need more leading to help the eye track), and the content density (technical content with frequent code snippets may benefit from slightly more space).
Headings use tighter line heights than body text. A display heading at 1.0 to 1.15 line height feels compact and impactful. A heading at 1.5 line height feels slack and uncertain. The larger the type size, the tighter the proportional leading can be.
Vertical rhythm—the consistent spacing between text blocks—creates a sense of order that permeates the entire page. Establish a base unit (8px is common) and derive all vertical spacing from multiples of that unit. Paragraph margin, section padding, heading spacing, and list item gaps should all reference the base unit, creating a consistent pulse through the vertical dimension of the page.
Measure and Reading Comfort
The measure—the width of a text block expressed in characters per line—has a direct relationship to reading comfort. Lines that are too long force the eye to travel an excessive distance from line end to line beginning, increasing the likelihood of losing place. Lines that are too short create too many line breaks, interrupting the reading flow.
The generally accepted comfortable range is 45 to 75 characters per line for body text. For web layouts, this translates to a content width of roughly 550 to 700 pixels at a 16px font size, depending on the typeface's character width.
Implement measure control through max-width on the text container rather than through the overall page grid. This allows the page grid to be wider than the text measure, creating the generous margins and negative space that editorial layouts depend on.
Font Loading Strategy
How fonts load affects both performance and visual stability. The browser's default behaviour when a web font is still loading varies: some browsers show invisible text (FOIT—Flash of Invisible Text), others show fallback text (FOUT—Flash of Unstyled Text). Neither is ideal, but FOUT is preferable because it allows the user to read content immediately.
The font-display: swap descriptor tells the browser to show fallback text immediately and swap to the web font when it loads. This optimises time-to-readable-content at the cost of a visible text reflow when the font swap occurs.
To minimise the visual impact of the swap, select a fallback font that closely matches the web font's metrics (x-height, character width, line height). Modern CSS allows fine-tuning of fallback font metrics using size-adjust, ascent-override, and descent-override descriptors, which can nearly eliminate the layout shift caused by font swapping.
Preload the most critical font files (typically the body regular weight and the primary heading weight) using to reduce the time before the font is available.
Frequently Asked Questions
How many typefaces should a web project use?
Two is the most common pairing—one for headings and one for body text. Adding a monospace face for code and labels makes three. More than three faces creates visual fragmentation and loading overhead that is rarely justified.
Should I use variable fonts?
Variable fonts offer multiple weights and styles in a single file, which can reduce total font payload. They are worth considering if you need three or more weights of the same family. For projects using only two weights, the file size advantage is marginal.
Is system font stacking still a valid approach?
For projects where performance is the overriding priority and brand typography is not a requirement, system font stacks provide excellent readability with zero loading cost. They are a legitimate choice, not a compromise.