10 font combinations that elevate a design - and the technical adjustment that 90% of designers forget

Variable typography has changed everything - and a number to correct

If I had to keep just one criterion by which to judge a web design, it would be typography: it occupies most of the surface area of a page, yet too many designers treat it as secondary. The most profound change in recent years has been the arrival of variable fonts, defined by the OpenType 1.8 specification. A single WOFF2 file now contains all variations of weight, width and style, where previously four or five separate files had to be loaded. Standardized axes - wght for weight, wdth for width, ital, slnt for tilt, opsz for optical size - offer continuous control over rendering.

By the way, let's correct a statistic that's been floating around: no, Google Fonts doesn't offer "more than a thousand" variable fonts. As I write, there are 288. That's already a lot, and the browser compatibility of variable fonts exceeds 95%, but quoting the right number counts - an inflated number is exactly what casts doubt on the rest of an article. The practical benefits are real: fewer HTTP requests, lighter files after subsetting with Fonttools or glyphhanger, and the ability to animate fluidly between axis values via font-variation-settings.

Pairing is the easy step

Successful pairing depends on a balance between contrast and harmony. Two fonts too close together create ambiguous tension; two too far apart, a tiresome conflict. The right balance is a deliberate, complementary contrast - an expressive serif with a neutral sans-serif, a geometric display with a humanistic body. My rule for years: never more than two families per project, exploiting the weights and styles within each.

But here's what 90% of designers overlook, and what makes all the difference: the matching of x-heights between the two fonts. If the body sans-serif has a much higher x-height than the titling serif, the relative sizes seem to be wrong for no reason. The tool to fix this is called font-size-adjust, and the good news is that it went Baseline in July 2024 - it now works on recent versions of all major browsers. It serves two purposes: to harmonize x-heights between titling and body, and above all to align the fallback font with the web font to reduce layout lag on loading. It's invisible, and it's precisely what distinguishes a professional rendering from an amateur one.

10 combinations I really use

Here are the combinations I keep coming back to, from the safest to the most assertive. The right-hand column indicates the context in which each shines.

| Body | Ideal for | |---|---|---| | Playfair Display | Inter | premium editorial, long reading | | Space Grotesk | Source Sans 3 | tech & SaaS | | Recursive (axis MONO) | Plus Jakarta Sans | technical interfaces | | General Sans | Contemporary tradition | Clash Display | DM Sans | Clash Display | DM Sans | portfolios créatifs | | Fraunces (wonky axis) | Work Sans | artisanal brands, food | | Cabinet Grotesk | Satoshi | sleek contemporary | | Syne | General Sans | strong visual identity | | Instrument Serif | Inter | editorial contrast × interface | | Space Mono | Outfit | startups tech, digital products |

Three favorites deserve a word. Playfair Display on Inter remains my go-to for premium content: elegant serifs in the headline, Inter's optical legibility in the body. Fraunces on Work Sans is my favorite for brands that want an organic touch - Fraunces' wonky axis adds a lively irregularity to the serifs. And Recursive is worth a detour in its own right: a single variable font that covers the whole spectrum from monospace to sans-serif thanks to its MONO axis, perfect when you want an expressive palette without multiplying files.

Implement without sacrificing performance

The choice of typeface is only complete once it has been successfully implemented. With a variable font, @font-face accepts a range of values per axis, and I systematically combine font-display: swap, the critical font preload, and text-wrap: balance on headlines - a property passed to Baseline in March 2024 that balances the number of characters per line and beautifies headlines on two or three lines effortlessly.

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/Fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

h1 {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "wght" 600, "SOFT" 0, "WONK" 1;
  text-wrap: balance;
}

As for file size, I use glyphhanger to load only the Latin characters required - this reduces a file by around 70% on average. The WOFF2 format is a must, with about 30% more compression than WOFF and universal support. I define a fallback font stack whose metrics approach the web font to minimize cumulative layout shift, and I leave font-optical-sizing active so that opsz-axis fonts adjust their design according to render size. These optimizations are invisible to the user, and essential.

Animating typography, with restraint

Variable fonts open up a whole new world of animation. With font-variation-settings, you can thicken a title on hover or vary the width of a text on scroll; the CSS @property rule lets you define typed custom properties that interpolate correctly, making these animations declarative and effective. I recommend caution: a subtle variation in weight at the hover adds life, while a constantly undulating typography becomes an obstacle to reading. As with any micro-interaction, animation either serves or hinders communication - and I always respect prefers-reduced-motion.

A final sign that typography and interface are converging: Google's Material Symbols is distributed as a variable font, with axes for fat, optical size and icon fill. Text and iconography in the same technical format, unified theming between the two - this is exactly the kind of simplification that, if nothing else, changes the way you build an interface.