Free stand-ins for Calibri, Segoe UI and Helvetica, measured, and the CSS that stops the jump

Calibri, Segoe UI and Helvetica turn up in a lot of mockups, and none of them can ship as a web font. Calibri and Segoe UI come with Windows: you can use them on that computer, but their licence doesn't let you put the font file on a website. Helvetica is sold by Linotype and comes with macOS.

So the stack becomes font-family: "Segoe UI", sans-serif, and on a phone or a Mac the visitor gets whatever the fallback is, with different line breaks.

We build FontKind, a site that measures free fonts letter by letter. For the Windows fonts we measured which free fonts come closest, then checked in a browser what it takes to swap one for the other without the page moving. The short version: there are two kinds of "alternative", and they fix different problems.

Looks like it vs. sets like it

"Which free font looks like Calibri?" and "which free font sets text exactly like Calibri?" have different answers.

Carlito is drawn to Calibri's exact widths and heights. Swap one for the other and no line moves. But it's by Łukasz Dziedzic, who drew Lato, and our model scores Lato as its closest font with a full 100: it's Lato's design fitted to Calibri's metrics. Against Calibri itself it scores only 56 out of 100, because its k, O and 9 are drawn differently.

Asap Condensed scores 93. It looks closer, but it's 9% narrower, so every paragraph rewraps.

So, before you pick a replacement, decide which problem you have:

• The layout must not change (a document template, a UI built around Calibri's widths): use the metric twin.
• You want the look: use the closest shape, and fix the size difference in CSS (below).

How we measure, briefly: widths are the average advance width of the 26 lowercase letters, read from the font file. Likeness comes from an image model (Meta's DINOv3) comparing 62 letters and figures of each font, an a with an a, a g with a g, scored 0 to 100. Details are on our methodology page.

What we measured

Helvetica is the odd one out: we have no licensed copy, so we haven't measured it. Arimo is drawn to Arial's widths, and Arial shares Helvetica's widths, so Arimo is the twin to reach for. For the look, Inter, Roboto and IBM Plex Sans are in the same class.

Each measured page lists 24 free fonts, closest first, with the differences named.

Checking it in a browser

Numbers from a catalogue are one thing, so we loaded the pairs in headless Chromium, the Windows font from the system and the free one from Google Fonts, and measured the average width of a–z with canvas measureText:

The twins match to the fourth decimal. The look-alikes are off by about what the catalogue says.

Then one paragraph at 18px in a 380px column. TASA Explorer sets it in 6 lines, 132px tall. Segoe UI as the fallback sets it in 5 lines, 120px. That difference is the jump people see when the web font arrives.

The CSS

A metric twin needs nothing

body { font-family: Calibri, Carlito, sans-serif; } 

Self-host Carlito (it's under the SIL Open Font License). Windows visitors with Calibri get the original, everyone else gets Carlito, and the line breaks are the same. Same idea for Helvetica, Arial, Arimo.

A look-alike needs a described fallback

When the web font only looks like the system font, give the browser a fallback face scaled to the web font's widths:

@font-face { font-family: "Segoe UI fallback"; src: local("Segoe UI"); size-adjust: 106.7%; ascent-override: 88.1%; descent-override: 24.4%; line-gap-override: 0%; } body { font-family: "TASA Explorer", "Segoe UI fallback", sans-serif; } 

With it, the fallback sets the same paragraph in 6 lines and 132px, exactly like TASA Explorer. The swap no longer moves anything.

Where the numbers come from:

• size-adjust is the web font's average width over the fallback's: 0.5265 / 0.4933 = 106.7%.
• ascent-override and descent-override are the web font's ascent and descent in em, divided by that size-adjust, because the overrides apply to the already scaled font.
• line-gap-override is the web font's line gap, divided the same way. TASA Explorer has none.

You can get the first three in the browser console of any page that loads the web font:

function metrics(family) { const ctx = document.createElement('canvas').getContext('2d'); ctx.font = `100px "${family}"`; let width = 0; for (const ch of 'abcdefghijklmnopqrstuvwxyz') width += ctx.measureText(ch).width; const box = ctx.measureText('H'); return { avg: width / 26 / 100, ascent: box.fontBoundingBoxAscent / 100, descent: box.fontBoundingBoxDescent / 100, }; } await document.fonts.load('100px "TASA Explorer"'); const web = metrics('TASA Explorer'); const fallback = metrics('Segoe UI'); const size = web.avg / fallback.avg; console.log({ sizeAdjust: `${(size * 100).toFixed(1)}%`, ascentOverride: `${((web.ascent / size) * 100).toFixed(1)}%`, descentOverride: `${((web.descent / size) * 100).toFixed(1)}%`, }); 

Canvas doesn't expose the line gap. If the web font has one, read hhea.lineGap / unitsPerEm from the file, or set line-height explicitly and skip the question.

A few things to know:

• local("Segoe UI") only exists on Windows. Add one fallback face per system font you expect (Segoe UI on Windows, Helvetica Neue on macOS, Roboto on Android) and list them in order.
• If you use next/font, it already builds a fallback like this for you, from Arial or Times New Roman. The method is the same; a closer fallback just needs less scaling.
• Chrome, Edge and Firefox support all four descriptors. Safari added size-adjust in version 17; check caniuse for the three overrides before you rely on them there.

Where to find the rest

Every font on FontKind with a "measured" label lists its 24 closest free fonts with the differences spelled out, and the compare tool puts up to six side by side in your own words. If there's a system or paid font you'd like measured against the free catalogue, say so in the comments.