Arrange· Case Study 05 · The Wordmark

Earlier rounds kept putting an icon next to the word. This one does the opposite: the three primitives are letters. The word is drawn as a modular geometric alphabet — every stroke is a straight line or an arc on one grid — and four of its letters are the square, the circle, and the wedge, sitting where those forms naturally belong. This page is the resolved mark and the reasoning behind it; the alternates it was chosen against are not kept here.

A and a are both the wedge, once at cap height and once at x-height. g is the square. e is the circle. They land on positions 1, 4, 6 and 7, so the geometry is read across the whole logotype rather than bolted to one end of it — and the word opens and closes on a primitive.

The A carries no crossbar. It is not a triangle dressed up as a letter; it is the primitive itself, placed in the first position and left alone. The word does the rest of the work — nothing else could follow rrange. That single omission is what makes the mark and the wordmark the same object instead of a resemblance.

Line weight 4.5 of a 24-unit x-height. Settled — the mark is drawn at one weight.
00

The construction

Cap height 34, x-height 24, one stroke weight, one radius (9). Every letter is built from the same parts, which is why the three primitives can step in without looking like intruders.

capx-heightbaselinedescender

One convention

Every x-height letter runs 13 to 31, half a stroke inside the guides. The r and n were drawn on the 10/34 guides themselves, so their tops and feet stood proud of every letter beside them. On one convention the whole line settles.

Three corrections

The a became the wedge, so A and a rhyme and the circle passes to the e. The g's tail now runs the full letter width instead of stopping halfway. The e is a single stroke — as two paths, the butt caps left a square chip bitten out of its right side.

01

The mark

One weight throughout. The square, circle and wedge are present as letters but never announce themselves — you read the word first and notice the geometry second. It behaves like a logotype rather than a puzzle, which is why it is the one that ships.

210 px
120 px
header
210 px
120 px
header

Why it works

Mark and word are the same object — there is nothing to separate, so no lockup rules, no clear-space diagram, no "icon plus text" awkwardness. It also cannot be mistaken for anyone else's geometric sans, because the three substitutions are structural.

Watch

The g is the boldest move — a square bowl on a round-ish alphabet. It reads as deliberate at 120 px and up; at header size it simply reads as a g.

02

The reduction

With the crossbar gone the icon writes itself: the wordmark's A is simply the wedge, so the favicon and the first letter are literally the same drawing. Nothing is invented, adapted, or kept in sync. Shown filled and outlined, at the sizes a tab and a tile actually use.

outlined
filled
32
24
16
outlined
filled
32
24
16

Why it works

An identity where the icon is a letter of the logotype needs no rules about how the two relate. The filled version holds down to 16 px; the outlined one is for large use.

Watch

A triangular A is a common shape. Its distinctiveness comes from the company it keeps — it works because the wordmark it was cut from is unusual.

03

The load sequence

If the primitives are letters, the animation changes meaning. The datum is struck; the primitive letters are placed on it first — wedge, wedge, square, circle, in reading order — and then the connecting letters draw in between them. The word assembles around its own geometry.

04

The toy

If the letters are objects rather than type, they can behave like objects. Take hold of any one of them and pull: the rest follow, strung together in reading order on the same hanging wire the adjacency planner uses between its nodes. Let go and the train settles on the floor. Drag it back up to the shelf it came from and the word reassembles.

Drag any letter · release near the shelf to reassemble

Why it is here

The argument of this page is that the letters are objects. A page can assert that; a thing you can pick up proves it. The wire is the planner's, not a decoration borrowed for effect — same catenary rest length, same Verlet rope, same shadow-body-highlight stroke.

Watch

The letters keep their real spacing as rest lengths, so the train is not evenly spaced — it carries the wordmark's own rhythm. Under prefers-reduced-motion the physics is off and dragging simply moves the letter.