mahnoor·fatima

computational creative direction

KERN

A computational typography platform: letters you buy for how they behave, not how they look

SPECIMEN Pick a behaviour, then move through the word

WORD
BEHAVIOUR
INTENSITY
RESPONSE SLOWSNAP
SEED 0XB17E BEHAVING

KERN

Volume XIII: A computational typography platform

Behaviour As A Product: Letters You Buy For What They Do

The premise

A font file is a description of shapes. It has been that since Gutenberg cut punches, and it is still that in OpenType: outlines, metrics, a table of how the shapes change next to other shapes.

Variable fonts widened the description without changing its nature. A weight axis is still a shape, just an interpolated one. Nothing in the format can describe conduct: what a letter does when you approach it, how it settles, whether it remembers.

KERN is a platform where the unit of sale is not a typeface but a behaviour, applied to whatever face you already own. You do not buy a font that breathes. You buy breathing, and your own type breathes.

That single inversion is the whole business, because it is what turns a foundry into a marketplace.

Why the inversion matters

If behaviours shipped welded to typefaces, KERN would be a foundry with a gimmick: every behaviour would need its own face, every customer would have to abandon their brand type to use one, and the catalogue would grow multiplicatively and uselessly.

Because a behaviour is a function over glyph geometry rather than a property of a particular face, the maths changes. Forty behaviours times every typeface on earth is forty products, not forty thousand, and a customer who has spent four years building a brand around one face can adopt one without giving it up.

It also means the supply side opens. A behaviour is a small piece of code with a manifest, so the people who write them are not type designers. They are the creative coders who have been posting this work as one-off demos for a decade with no way to sell it.

What a behaviour actually is

A step function, run once per glyph per frame, over five arguments:

// The whole contract. Everything KERN sells implements this.
behaviour(glyph, neighbours, pointer, time, memory) -> transform
  • glyph: advance width, home position, the character
  • neighbours: the other glyphs in the run, so a behaviour can flock or crowd
  • pointer: where attention is, if anywhere
  • time: for anything with a pulse
  • memory: per-glyph state that survives frames, and optionally sessions

It returns a transform, never a redraw. That restriction is deliberate and it is what makes the platform tractable: a behaviour may move, scale, rotate, skew and slice a glyph, and may not replace it. The letter stays the letter.

// FLEE, in full. This is a complete, shippable product on the platform.
export default {
  name: "Flee",
  family: "avoidance",
  floor: 0.55,                       // legibility conformance, see below
  step(g, all, p, t, mem) {
    const dx = g.homeX - p.x, dy = g.homeY - p.y;
    const d = Math.hypot(dx, dy) || 1;
    const push = Math.exp(-(d * d) / (2 * 130 * 130)) * 190 * g.intensity;
    return {
      x: g.homeX + (dx / d) * push,
      y: g.homeY + (dy / d) * push,
      rotate: (dx / d) * push / 900,
    };
  },
};

Roughly twenty lines. That is the point: the barrier to authoring is low enough that the marketplace can have a long tail, and the contract is narrow enough that the runtime can guarantee things about work it did not write.

The families

Behaviours are catalogued by what they respond to, not by what they look like, because that is what a buyer is actually choosing between.

  • Autonomic: breathe, drift, settle. No input. The word is alive while unattended.
  • Avoidance: flee, part, shy. The cursor is a repellent.
  • Attraction: grow, lean, crowd. The cursor is a magnet.
  • Collective: flock, swarm, queue. Glyphs read each other and the word negotiates itself.
  • Material: melt, sag, freeze, erode. The letter behaves like a substance rather than a mark.
  • Mnemonic: remember, wear, patina. State outlives the interaction.
  • Generative: evolve, mutate, breed. The parameters themselves are under selection.

The demo above ships one from six of these families. Mnemonic is the one worth watching: it is the only family where the word is permanently different for having been read, and it is also the one that raises every hard question about storage, sync and consent.

The KERN architecture: text is shaped into glyph agents, a purchased behaviour returns transforms, and each host either runs it live or bakes it Text and a font are shaped into glyph agents. A behaviour bought from the marketplace steps each agent every frame using pointer, time and memory, returning transforms only. A conformance gate checks the result against a legibility floor before painting. On the right, four hosts split into two groups: web runtimes run the behaviour live, while design tools receive a baked approximation. Below, the legibility floor is shown as a boundary the runtime clamps rather than trusts. 01: SHAPE your face, not ours TEXT + FONT any face you own shaped to runs GLYPH AGENTS home, advance, mem one per letter 02: STEP the thing you actually bought BEHAVIOUR step(glyph, neighbours, pointer, time, memory) returns a transform, never a redraw twenty lines is a shippable product CONFORM clamp to floor then paint 03: HOSTS two rendering models, not four LIVE WEBFLOW · FRAMER · THE WEB runtime ships, behaviour runs per frame pointer and memory are real BAKED FIGMA · ADOBE no per-frame hook in the file format sample the behaviour, emit states variants, frames, or a Lottie 04: THE LEGIBILITY FLOOR enforced by the runtime, not promised by the author permitted: displacement, scale, rotation, skew, slice measured: overlap, occlusion, contrast, excursion from baseline below the floor the transform is clamped, and the behaviour is told WHY IT IS A GATE the marketplace sells code it did not write to sites whose type it has never seen so the guarantee cannot be a guideline
The architecture. The two things worth noticing: a behaviour may only return transforms, and the runtime clamps the result rather than trusting it. Both exist because the platform sells third-party code that runs on strangers' text.

The legibility floor

This is the part that makes it a platform rather than a toy, and it is borrowed directly from what a magazine taught me: behaviour that costs legibility is not behaviour, it is decoration.

Every behaviour declares a floor, and the runtime measures the result of each step against it: glyph overlap, occlusion, contrast against the ground, excursion from the baseline. If a transform crosses the floor the runtime clamps it and tells the behaviour it was clamped, so the author can respond rather than fight.

The floor is enforced at runtime rather than checked at submission, because the marketplace sells code it did not write, to sites whose type, sizes and colours it has never seen. A submission-time review cannot know that a buyer will run FLOCK at 11px in a footer. The runtime can.

Text also stays real text. The glyphs are transforms over live text nodes, not a canvas painting of a word, so selection, search, screen readers and copy-paste all work on the underlying string no matter what the letters are doing. A behaviour that broke that would not be a bold product decision, it would be a broken one.

And prefers-reduced-motion resolves every behaviour to its rest state. Not a slower version: the static one. A platform whose entire product is motion needs an answer to that question on day one, and the honest answer is that the word must be complete without the behaviour ever running.

Distribution is the hard part

The plugin list is four names, but it is two engineering problems.

Live hosts (the web, Webflow, Framer) can run the runtime. A behaviour executes per frame with a real pointer and real memory. This is the product working as designed, and it is maybe 12KB of runtime plus the behaviour.

Baked hosts (Figma, Adobe) have no per-frame hook in the file. A Figma file cannot execute a step function when a viewer moves their cursor. So the plugin samples the behaviour instead: it runs the step function offline across a parameter sweep and emits what the host can hold. In Figma that is a component set of variants, or a frame sequence. In After Effects it is keyframes or an expression.

Baking is lossy in a specific and admissible way: everything that depends on a live pointer or on memory collapses to a canned path. Which means the families divide cleanly. Autonomic and material behaviours bake beautifully, because time is the only input. Avoidance, attraction and mnemonic behaviours cannot bake honestly at all, and the plugin says so rather than shipping a fake.

Being straight about that is a product decision, not a limitation to hide. A designer comping a page in Figma needs to know that the flee effect is a live-only behaviour before they build a layout that depends on it.

The creator market

The supply side already exists and has nowhere to sell. There is a decade of this work on CodePen and Twitter, made by people who are not type designers and who currently monetise none of it.

What the platform owes them:

  • A contract narrow enough to be safe, so a buyer can install a stranger’s behaviour without auditing it
  • Versioning with pinned runtimes, because a behaviour that silently changes on a live site is a liability
  • Attribution that survives baking, so a Figma export still credits the author
  • Revenue that is not per-seat, because behaviours are bought the way font packs are bought: once, for a project, by someone who does not want to think about licensing again

Pricing follows the font pack instinct rather than SaaS. A behaviour is $12 to $40, a family bundle is more, and the platform takes a cut. Nobody wants a subscription for a letter that breathes.

What I would build first

Not the marketplace. The runtime and the floor, with six first-party behaviours, shipped as a web library alone.

The marketplace is worthless until behaviours are demonstrably safe on other people’s sites, and the four plugins are worthless until the runtime is worth porting. The sequence that works is: prove the contract, prove the floor, publish six behaviours that people actually use in production, and only then open submissions.

The version of this that fails is the one that launches with a storefront and forty behaviours from forty authors, no floor, and a Figma plugin that quietly fakes the interactive ones.

Reflection

The thing I keep returning to is that this is the same argument as a magazine grid and a chair, in a third material.

A font describes shapes and cannot describe conduct. A brand guideline describes appearance and cannot describe response. A chair specifies dimensions and cannot specify fit. In all three the interesting product was the layer the existing format had no vocabulary for, and in all three the hard engineering was not the behaviour itself but the floor: what the system refuses to do, enforced rather than requested.

Behaviour without a floor is just motion. The floor is what lets you sell it to someone whose work you will never see.