Menu

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

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

DEV Community: css·PYXL·about 10 hours ago
#sr49gMEM
#devtocss#devto#dev#font#fallback
Reading 0:00
15s threshold

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.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.