ABC Areal Superfamily Variable

AREAL

One typeface that slides from proportional to monospace.

MONO 100

The MONO axis

0 → 100

Most superfamilies ship the sans and the mono as separate files, and switching between them resets everything else. Here they are two ends of one axis, so a line of text can keep its weight, slant and kerning while its rhythm changes underneath.

At MONO 100 every glyph takes the same advance width — the i gets serifs and the m narrows to fit. Midway, at 50, the extremes have been pulled toward each other but the widths still vary. That intermediate is a real design, not an interpolation artefact: Dinamo ships it as the Semi Mono subfamily.

Areal and Arial

The source

Areal is a revival of Arial — specifically version 2.82, the one sitting on machines when the internet opened to the general public. Rather than work from drawings, Dinamo went to computer archivists, screenshotted that exact version off period hardware, and traced the samples. It began as a commission from Are.na, who had been setting their site in Arial for fifteen years. Dinamo describe the result as “It’s the same, but it isn’t.”

Arial is installed on this machine, so the comparison below is live rather than a picture of one. Everything is measured in your browser at the moment you load the page.

Areal
It’s the same, but it isn’t.
Arial
It’s the same, but it isn’t.

Where the letters diverge

The sixteen characters whose widths differ most, each pair set at one size and centred on a shared baseline. In overlay, Areal is the solid fill with Arial traced over it as the outline; side by side sets the pair in sequence, Areal then Arial. The figure beneath each is the width difference in units per 1000.

Metrics

Four axes

MONO / wght / slnt / DRKM

Drag any axis and type into the panel to replace the text. The declaration below is the exact CSS for what you are looking at.

The whole site fits a grid: 1,280 m of ground, fixed & flexing.

Named instances

Each name is set in its own coordinates. Pick one to load it into the axis panel above.

Layout features

Left column is the feature switched off, right column is the same text with it on. Five of these are required features that the text engine applies for you — they are shown disabled only to prove what they are doing.

The darkmode axis

DRKM 0 → 1

Light type on a dark field blooms: the white strokes spread into the background and the text reads heavier than the same setting on paper. DRKM trims that back, thinning stems and opening counters just enough to cancel the illusion.

Both panels below use identical weight and size. The switch in the header ties this axis to the page theme, which is what it is for — not a style, a correction.

DRKM 0 — uncorrected

Handset in the dark, the strokes thicken and the counters fill in. Compare the g, the a and the 8.

DRKM 1 — corrected

Handset in the dark, the strokes thicken and the counters fill in. Compare the g, the a and the 8.

DRKM 0 — on paper, correct

Handset on paper, the strokes hold their intended weight. This is the reference setting.

DRKM 1 — on paper, too light

Handset on paper, the correction has nothing to cancel and the text goes thin.

Character set

Click any character to copy it. Combining marks are shown on a dotted circle; the spaces are shown as their actual measured widths.

In use

Running text

Site notes

Twelve hectares, one grid, and the argument about where the road goes

The old freight yard has been empty for nineteen years. Redrawing it means deciding what a street is for.

Survey work began in March. The first pass recorded 1,280 square metres of intact concrete apron, four rail stubs, and a weighbridge that nobody had logged since 1987. None of it appears on the 2004 plan, which is the plan the council has been working from.

What makes the site difficult is not the contamination — that was mapped years ago and priced twice. It is the 3.5 m fall across the western edge, which rules out the straight distributor road that every scheme so far has drawn there. Move the road and the block sizes change. Change the block sizes and the housing numbers move by roughly ⅕.

The working proposal keeps the apron, turns the weighbridge into the entrance to the market hall, and accepts a road that bends. It is slower to drive and cheaper to build. Whether that trade reads as care or as compromise is, at this stage, the whole question.

The CSS

Copy and paste

Axes are held in custom properties and the tuple is re-declared on every element, so a single axis can be overridden anywhere in the tree without losing the other three. That is the only awkward part of variable fonts in CSS, and this is the fix.