Fraunces
Move your pointer over the word — horizontal is weight, vertical is optical size
A variable font is not a family of files. It is one file holding a design space, and every slider on this page moves through space that Fraunces actually contains — two registered axes and two custom ones, no fakery, no CSS tricks standing in for missing masters.
Drawn by Phaedra Charles and Flavia Zimbardi of Undercase Type, Fraunces is an “Old Style” soft-serif that answers the wonky display faces of the early twentieth century — Windsor, Souvenir, Cooper Black — and it ships with its personality on an axis you can switch off.
The four axes
A registered axis. At 9, letterforms are sturdy and open, built to survive footnote sizes; at 144 the contrast sharpens and the details tighten for display work. Before digital type, punchcutters did this by hand — every size was its own drawing.
A registered axis, Thin to Black. Nine named weights used to mean nine separate fonts; here they are two ends of one interpolation, with every unnamed weight in between.
A custom axis — the four capital letters are the giveaway; registered axes are lowercase. Raising it rounds terminals and serifs until the letters go pillowy. Pairs dangerously well with high weight.
A binary custom axis — a switch, not a dial. At 1 it substitutes the irreverent alternate letterforms the typeface is known for; at 0 Fraunces straightens its tie. Flip it while watching the lowercase in the tester below.
Paragraph proof
Hand-set in one file: quirky ampersands & leaning stems, softened or straightened, from footnote to poster — edit me and see.
The proof is editable — click or tab into it and type.
Colophon
Fraunces is published through Google Fonts under the SIL Open Font License; its sources live in the open, masters and all. The optical-size and weight axes are registered in the OpenType specification. SOFT and WONK are Undercase Type’s own inventions, which is exactly what custom axes are for.
Everything on this page is one HTML file, one font request, and a few hundred lines of CSS. The morphing headline costs nothing but a variation setting — no canvas, no WebGL, no images. That is the argument variable fonts make: the expressiveness lives in the type itself.