awwwards.skill

Demo 01 · type specimen · no WebGL

Fraunces · variable · four axes

One of its four axes is called Wonky. In the font’s own fvar table, its default value is 1 — and the font only obeys it above opsz 18.

1

The ampersand is one of the six glyphs this axis swaps, and the only one that swaps loudly.

opsz
60
wght
900
SOFT
0
WONK
1

The evidence

Read out of the binary, not off a website

A variable font declares its axes in a table called fvar. Each axis carries a minimum, a maximum, and the value you get when nobody asks for anything. These four rows were parsed straight out of the .ttf shipped by the project.

The four variation axes declared in the Fraunces fvar table
TagName MinDefaultMax
opszOptical Size99144
wghtWeight100900900
SOFTSoftness00100
WONKWonky011

The default instance is named Fraunces 9pt Black: the nine-point cut, at its heaviest, with the wonk switched on. Except it is not. Elsewhere in the same binary a GSUB feature-variation record swaps h m n s & ñ for their tidy alternates whenever opsz is 18 or under — and it is tested before WONK is consulted at all. So the default instance declares the wonk and then draws the letters without it. The axis is shipped switched on and overruled.

What a wonk is

The wonky forms are the ones a punchcutter would have corrected. A leg that kicks out too far. A bowl that refuses to close on the line it should. An e whose crossbar sits at an angle nobody asked for.

Set at display size those decisions read as voice. The letters have opinions; the page has a temperature. This is what the typeface was drawn to do, and it is why the default sits where it sits — the design is the wonky one, and the tidy version is the accommodation.

Shrink the same forms to a paragraph and the argument inverts. A kicked leg at nine points is not voice, it is noise, and it collects at the ends of lines where the eye is already working hardest. The optical size axis exists for exactly this: it redraws the letter for the size it will actually be set at, rather than scaling one drawing up and down and hoping.

So the four axes are not four effects. They are one argument about how much personality a letter can carry before it stops being a letter and starts being a picture of one. You are watching that argument resolve as you read this: the type under your eyes is straightening, softening, and moving from the text cut to the display cut, one scroll at a time.

By the time this paragraph reaches its last line, WONK is at zero, SOFT is at one hundred, and the optical size has travelled from nine to one hundred and forty-four. Nothing has been swapped. It is one file, one request, one continuous set of numbers — which is the whole reason variable fonts are worth the trouble.

One at a time

Each axis, alone, on the same word

Same specimen, same file. Each row moves one axis and holds the other three exactly where the font left them — so every difference you can see below is attributable to a single number.

One row breaks that rule, and it has to. WONK is held at opsz 60 rather than the shipped 9, because under 18 the substitution never fires and the row would prove nothing. It also has two stops instead of a hundred: the record that fires above 18 is a threshold at 0.49, not a ramp. The specimen carries five of the six glyphs the substitution reaches — h, n, s, m and the ampersand. Four of those change by a spur and a shoulder. The ampersand changes into a different letter, which is why it is the one to watch.

Measured, not quoted

What is actually in the file

Metrics parsed from the Fraunces variable font binary
Units per em2000the grid every outline is drawn on
Glyphs245in the Latin subset shipped with this page
x-height96448.2% of the em — large, which is why it holds at text size
Cap height140070.0% of the em
Ascender1956hhea, 97.8% of the em
Descender−510hhea, 25.5% of the em
Named instances6the presets, out of a continuous space
Latin subset121,016 Bone file, every state on this page

Those ascender and descender numbers are doing quiet work here: the fallback face is declared with ascent-override: 97.80% and descent-override: 25.50%, so the line boxes are identical before and after the webfont arrives and the layout never jumps.

The whole idea, standing still

Declared, obeyed, and asked for

WONK 1 · SOFT 0 · opsz 9 · wght 900 What you get by typing nothing. The wonk is on and the ampersand is the plain one.
WONK 1 · SOFT 0 · opsz 60 · wght 900 The same 1, one axis above the ceiling. Now it is the looping one, and nothing else about the request changed.
WONK 0 · SOFT 100 · opsz 144 · wght 300 What you get by asking.

This page has a signature move, and it is the scroll. But the point survives it: if motion is off, or JavaScript never runs, the three states sit here side by side and the argument is still on the table — including the one the first two cards make on their own, which is that a default value and a rendered letter are not the same claim. That is the test a concept has to pass.

Colophon

Credits, and what this is for

Typeface
Fraunces
Drawn by
Undercase Type — Phaedra Charles, Flavia Zimbardi
Licence
SIL Open Font License 1.1
Copyright
2020 The Fraunces Project Authors
Source
undercasetype/Fraunces
Published
Google Fonts, 29 October 2020

Every number on this page was parsed out of the font binary rather than copied from a specimen site — the axes from fvar, the metrics from head, hhea and OS/2. If a figure here is wrong, the file disagrees with it.

Built as a demonstration of the awwwards skill for Claude Code: no framework, one webfont, one idea.

Read the method →