01 — Genesis
The letterform is the mark, moved.
On the home page the first L of LANKFORD is not drawn. It detaches from the mark and walks into place. That is not a flourish — it is the whole type system in one gesture. Watch where it starts.
Watch it in order. An L lights up inside the mark — it was always there, it is the arm the logo already draws. It walks out to its place in the wordmark, copies itself to six more, and each copy moves as that letter needs: nothing at all for U, a vertical turn for F, a horizontal turn and then a small bend for the J, and for the Z no turn — it just bends. The T does neither: it lets its foot retract into the stem and slides to the middle. Then each letter finishes. Blue is what came from the L. Ink is what had to be added.
The turns are about the L's own bounding-box center, and every one was checked rather than assumed: each letter's inherited strokes sit within 0.4 units of the turned seed's centerline, on a 100-unit stroke. F is the one that was found first — turned over, the L is the entire F apart from its crossbar. The J is the opposite case: rather than its overshooting bar shrinking away, that surplus curves up into the terminal arc and carries it 57.3° of the 90° — one radian, which is exactly what 112.5 units of arc at radius 112.5 buys — leaving ink the last 32.7°. The T is the plainest of them: the L's stem is already the T's stem, so the arc and bar retract into its foot, it slides 150 to the middle, and ink adds the crossbar and the 112.5 of stem the L never had.
02 — The one ratio
Two drawings, one number.
The mark regenerates from a single number: R = 207.1, its bend radius, which is also half the stem spacing. Every coordinate in it is an exact multiple of R. The wire is SW = 184.1.
The letterform is drawn at a tenth the size on a 400 × 500 grid — bend radius 112.5, wire 100. Different numbers, and the same proportion, to four places:
0.65189 is the mark's scale in the lockup. 1.2 is the scale the L is born at. They meet. For one frame the L is not like the mark — measured in outer units it is the mark.
Turn on the construction grid and
the ghost over this figure: the letterform's cap, midline and
baseline land on R, 3R and 5R
of the mark, and its left sidebearing lands on the mark's own left stem at
x = 0.
03 — Four primitives
Nothing else is allowed.
The seed L is three strokes: a vertical stem, one 112.5 arc, a horizontal bar. Those three build twenty-two of the thirty-six letters and numerals on their own. The fourth primitive — the diagonal — does not exist in the L. It has to be admitted before the alphabet can lean — and once admitted it is held to the same wire, the same radius and the same box as the other three.
Turn on Color the primitives above and the whole specimen below re-inks itself by part.
04 — Motion
Motion is not applied to the letterform. It is where it came from.
The easy reading is that this is a static alphabet with an animation bolted on afterwards. It is the other way round. The lockup is written rather than displayed, and the geometry carries the evidence of that even when nothing is moving.
The mark is not a shape with a hole in it. It is a sinuous line that crosses itself, the way a racetrack or a Möbius strip does, and it is written that way: three pieces of one continuous hand movement — down the stem, round the bottom, back along the waist, then over the top — at a single speed, lifting only to step over the gap. That split is visible: rendered statically the butt caps abut on a shared edge and antialiasing leaves a hairline, which is why the favicon has to redraw the mark as one continuous stroke. The first L is a copy rather than a fresh drawing because it has to detach from the mark and walk into place. The F exists at all because an L can be turned over. Each of those is a motion decision that left a permanent mark on the shapes.
So the still lockup is the last frame of something, not a picture of it. Two moves show that most clearly.
The A writes its crossbar in the wrong place.
The lockup does not simply draw itself. It behaves like a hand: strokes arrive in writing order, and one of them arrives in the wrong place and then corrects.
- The bowl is drawn, stem to stem.
- The crossbar is written on the midline at 275 — where a crossbar goes on an H or an E.
- It drops 75 units to 350, where an A's bar belongs.
Both A's do it, a step apart — LANKFORD's at 9.55s, LABS's at 9.95s — long after every letter has finished drawing. That gap is the point: the correction reads as a second thought rather than part of the writing.
The L turns over and is an F.
The second trick is cheaper and stranger. The F is never drawn. A copy of the seed L travels 2000 units right and then mirrors vertically about its own center — landing exactly on the F's stem, corner and top bar. The same three strokes, upside down.
- The L, drawn.
- Mirrored about y = 275, its own bounding-box center.
- The crossbar struck right to left, finishing at −20 — the one stroke in the alphabet that breaks the box, overhanging the stem by 70 units.
The mirror works because the L's stem and its bar sit the same distance from the midline, which is a property of the 400 × 500 box rather than a coincidence.
The Z is the L, bent.
The third move is the odd one. Nothing detaches and nothing rotates: the L stays a single unbroken stroke and bends. Its stem swings over onto the diagonal, its corner straightens out of the 112.5 radius, and its bar holds its right end still the whole way. Only the top bar is added.
- The L, drawn.
- It bends. The stem reaches 33.69° — the angle of a 300 by 450 run — and the corner's radius goes to nothing, because a Z has no curves.
- The top bar draws, in ink.
A bend is not a move, and the numbers say so: the L's three strokes run 701.7 units and the Z's diagonal plus bottom bar run 840.8, so the wire has to grow by a fifth. What it does not do is thicken — the bend moves the centerline and leaves the stroke width alone, which a scale would not. The degree reading is measured off the path on screen, frame by frame, not counted up on a timer.
The whole motion vocabulary
Sixteen moves, and every one of them is something that can happen to a
line. The first is writing it. The other fifteen each do one thing to a
line that has already been written — nothing here ever appears
from nowhere. Each takes its delay and duration from an inline
--d / --t pair, so the timing is editable in
the markup rather than buried in the stylesheet.
| draw | A line is written from one end to the other, at the speed a hand would move. Everything below happens to a line that was drawn first. |
|---|---|
| emerge | A shape that was part of something larger comes away from it and becomes its own thing. |
| down / right | A finished shape travels to where it is going to live. It is the same shape when it arrives as when it set off. |
| flip | A shape is mirrored, so it faces the other way. Nothing is written again — the same line is simply seen from the other side. |
| nudge | One line moves a short distance inside a shape, to where it actually belongs. Short enough to read as a correction rather than a journey. |
| bend | A line is reshaped along its length. It keeps its two ends and takes a different route between them. |
| curve | A bend at the end of a line instead of through the middle of it. The line stays where it is and its tip goes somewhere new. |
| shrink | A line is drawn back into itself until there is nothing left of it. Writing, run backwards. |
| unbend | A shape is re-described rather than redrawn. Its proportions, its corners and its openings all ease from one set of measurements to another, so it becomes something else without ever coming apart. |
| turn | A line pivots about a point on itself. Rotate copies of one line away from each other and a single stroke becomes two, or three, or six. |
| part | Two pieces separate out of something that was covering them. They were there the whole time; the move is them leaving. |
| unfold | Several lines lying exactly on top of one another open out into their real positions. What looked like a single stroke turns out to have been the whole shape, folded shut. |
| grow | A line carries on past where it stopped. A move can only take a line as far as its own length allows, so the rest is written on afterwards, at the speed the move handed it over at. |
| bounce | Something comes to rest and then keeps a little life. It lifts, lands, lifts again, and stops because it decides to. |
| shift | Several finished shapes move at once to sit better against each other. Their spacing changes; they do not. |
| flash | Color changes and nothing else. Nothing moves and nothing is written. |
05 — Other things the mark already is
The 8 was always there.
The mark already has the shape of infinity, or of a number 8. Mark and letterform are both drawn flat, but a flat drawing can still imply dimension — thus the gaps.
The home page models it as one closed ribbon whose four corners turn −90, −180, +90 and +180. They sum to zero, which is a curve that crosses itself: the gaps are clearance at that crossing, and cutting there leaves a single open line.
- The counters equalize — 2.25 × 5.625 wires and 4.5 × 2.25 — and the waist walks from three quarters down to half.
- Two corners open from zero, where the stem carried on, to 112.5. R over the wire holds: 1.1249, then 1.1250.
- The crossing opens: the ends walk apart to the ends of the waist, leaving one serpentine that never crosses itself — the letterform's S, flipped, and the specimen's 8.
Neither end is capped: each is cut against the strand it almost touches, at the mark's own 0.22 of a wire.
06 — Playful, by design
Every character has a story.
The letterform is scalable and includes a growing library of character Stories. Stories are mini vignettes told by the letters and numbers. They are enabled sparingly and only applied in relevant circumstances. Their intent: create moments of delight.
The X is two strokes that cross, which is also what a duel looks like, so it is cut into two sabers. Each stroke keeps 110 units of itself as a hilt and throws the rest: the left blade lights in the racing blue, the right answers in the rival red. They draw back through 33.690° — the angle the X's arms open at — and come down again on the crossing they were always going to make.
Five characters have one and the rest are simply letters, because a story has to be earned by the shape rather than applied to it. The blade here is not a lightsaber drawn onto an X: it is the slash, which is the same line, lit.
Every story has purpose.
A 404 page represents a small failure, and the two usual responses are an apology or a joke at the visitor's expense. This is meant to be neither. The letter looks around, doesn't find anything either, and blinks. The page is searching with you rather than at you — which is the whole reason it is a wink and not an error graphic.
The searching is literal, and it is bounded by the letterform. The pupil runs a scan pattern — sweep to a side, work down, check back — rather than random drift, because random reads as a nervous tic and a scan reads as looking. Its travel is limited by the counter it lives in: 26 units of horizontal room against 101 of vertical, so the eye searches the way a tall narrow letter allows. On a fine pointer it tracks your cursor, and returns to scanning a couple of seconds after you stop.
That constraint is the point. The eye is not decoration laid over the letterform — it is the letterform's own counter, given something to do. Which is the same move as the whole system: the shape was already there, and the idea is what you do with it.
07 — Uppercase A–Z
Twenty-six.
Ten of these are canonical — they exist in the LANKFORD LABS lockup exactly as drawn. The other sixteen are derived here, on the same grid, at the same radius, using only the four primitives. Nothing was eyeballed.
Each glyph is labeled with the moves it spends out of the vocabulary above, and names where it was cut from on hover.
Click any glyph to write it again.
08 — Numerals 0–9
Ten.
Two are canonical: the 0 is the wordmark's O verbatim, and the 4 is lifted from the 404 page, where it is written diagonal-first the way a hand would write it.
Click any numeral to write it again.
09 — Symbols
Punctuated.
Thirteen of these are the four primitives rearranged. The period is the wire with zero length — a round cap and nothing else — and the slash is the Z's diagonal on its own. The asterisk is the exception: a star only reads when its arms are evenly spaced, and six even arms means 60°, which this face does not otherwise own. It is the one glyph here cut from nothing above it.
Click any symbol to write it again.
10 — Set a line
Type anything.
The system has no kerning.
Two different things space a line. Sidebearings belong to a glyph — how much air it carries on each side, the same in every word. Kerning belongs to a pair — the extra correction A wants when a V comes next, and not when an N does. This alphabet has the first and none of the second: fifty advances, and no table of pairs.
That was enough, because it was drawn to set two words. In LANKFORD LABS every pair was judged once by eye and then frozen into an advance. Set anything else and the gaps stop agreeing. LT opens up by 141 units and VI by 131 — more than a whole stroke width of unwanted air — while IA and ON sit around 30 too tight. One number per glyph cannot know what is coming next.
Fix the kerning computes the missing table. None of it is a heuristic — the geometry is exact and the two constants are measured off the lockup:
Two constraints, because either alone misreads a pair. The minimum binds where a pair has one pinch point and open space elsewhere: LT closes to 339, because L's bar and T's stem meet at the baseline and nothing else comes near. The average binds where the two edges face each other flat all the way down: HI satisfies the minimum at 340, but that would set every band to the tightest legal gap at once and read as jammed, so the average opens it to 370. The cap stops one wide-open corner from inflating the mean and over-separating the pair.
Medians rather than means, because the lockup's own pairs do not agree with each other: their tightest gaps run from 61 to 120, and LA carries so much open corner that its average gap is 215 against a typical 122. One unusual pair should not set the rule.
It reads better. It still isn't right.
Arithmetic gets this close and stops. It has no opinion about whether AV should be tight because the word is a logo or open because it is a caption, and it cannot see that a numeral wants more air than a letter. A kern table is a person's judgment, pair by pair, for years.
And the flaw is structural rather than careless. The thing that makes this alphabet cohere — one wire, one width, one radius, every glyph on the same 400 × 500 box — is what makes it hard to space. A monoline O and a monoline A have nothing in common at their edges, and no single advance serves both. The usual cure is to let the letters differ: vary the weights, narrow the round ones, give the diagonals their own widths. Do that here and it stops being the mark. So the gaps stay.
11 — Specification
| Drawing box | 400 × 500 |
|---|---|
| Left / right sidebearing | x = 50 / 350 |
| Cap height | y = 50 → 500 (450) |
| Crossbar | y = 275, A shifts to 350 |
| Stroke width | 100 |
| Bend radius | 112.5 (1.125 × stroke) |
| Caps / joins | round / round |
| Glyphs | 26 + 10 + 14 = 50 |
| Advances | 220 – 520, per glyph |
| Line advance | 650 |
| Mark bend radius R | 207.1 |
| Mark stroke SW | 184.1 (butt caps) |
Every animated path carries
pathLength="1", so one keyframe draws all of them and the timeline
needs no measured lengths. The CSS default state is the finished alphabet — the
rewind only happens once scripting is proven, so this page renders with JavaScript
off, and jumps straight to the finished artwork under
prefers-reduced-motion.