slop.boutique

A lab for computation and intelligence as material and medium. Run by Manuel and Ramon.

028 · 23 October 2026 · typography · agents

Sonnet New Roman Modular

A type studio where a variable serif is a script: edit Sonnet New Roman's 178 glyphs and three axes, check and animate it, compile a TTF, and let Claude keep drawing it.

Previewin your browser
The capital H of Sonnet New Roman on its metric lines (ascender, cap height, x-height, baseline, descender) next to a three-line specimen of the typeface

In early access for subscribers until 22 November 2026. Subscribe to run it now.

Subscribe →

A type studio where a typeface is a script. Sonnet New Roman, an expressive transitional serif, is written in a small JavaScript builder (sn): parameters, macros, components and glyphs are expressions, and every edit rebuilds the font, lints it and redraws every view.

  • A whole variable font in one file: Sonnet New Roman has 178 glyphs, three axes (weight 300–800, optical size 9–72 and Wonk 0–1, which leans the stress, flares the serifs and swells the ball terminals), ten named instances from Light to Display Bold, Caption and Wonky, kerning and ligatures. Build-time knobs for contrast, stress tilt, serifs, x-height, width and spacing are plain sliders.
  • Nine views of the same font: Compose, Specimen, Glyph (metrics, skeleton, points, anchors, masters), the Glyphs grid, Scenes, Sizes, a DAG of what depends on what, Checks for overshoots, sidebearings and coverage, and Font.
  • Compile and download: the Font tab compiles a real variable TrueType file (glyf, gvar, fvar, kern and GSUB) and sets proof text with it in the browser; you can also save the script and a specimen SVG.
  • Animated type: a modulator rack (LFOs, steps, envelopes, pointer) maps onto axes and layer properties, synced to a BPM clock, and runtime scenes are written in the script.
  • Claude draws the font: in the Claude tab, Claude looks at fresh renderings, picks one thing to fix, edits the script through tools and leaves notes in a notebook for its next cycle. A separate studio agent builds compositions, presets and modulators by running code against the studio.

Nine presets come with it, from one stem, pen strokes, macros and serifs, a weight axis, sliders and checkboxes, and loops and procedural shapes to runtime scenes, modulators and the complete Sonnet New Roman.

The interface uses IBM Plex Sans, IBM Plex Mono and Instrument Serif from Google Fonts (SIL Open Font License) and React. Sonnet New Roman itself is drawn by the script in the app.

The full studio: the font script on the left; on the right the Compose stage with the Sonnet New Roman title in white on black, and the modulator rack (weight wave, optical drift, wonk steps, type-on) with axis and knob sliders below
The full studio: the font script on the left; on the right the Compose stage with the Sonnet New Roman title in white on black, and the modulator rack (weight wave, optical drift, wonk steps, type-on) with axis and knob sliders below
Close-up of the Compose stage mid-animation: Sonnet New Roman in cream on black, each letter at a different weight, above an orange subtitle typing itself on
Close-up of the Compose stage mid-animation: Sonnet New Roman in cream on black, each letter at a different weight, above an orange subtitle typing itself on
Glyph DAG of H: shapes, components, parameters, knobs and metrics as hash-consed nodes connected left to right by what depends on what
Glyph DAG of H: shapes, components, parameters, knobs and metrics as hash-consed nodes connected left to right by what depends on what
Specimen view: Sonnet New Roman, Hamburgefonstiv and a pangram set at 96 px with metric guides
Specimen view: Sonnet New Roman, Hamburgefonstiv and a pangram set at 96 px with metric guides
The Claude tab with its notebook of seven to-do notes for the next drawing cycle, next to the Glyphs grid of lowercase, figures, punctuation and accented capitals
The Claude tab with its notebook of seven to-do notes for the next drawing cycle, next to the Glyphs grid of lowercase, figures, punctuation and accented capitals
Glyph view of the capital H with its metric lines, sidebearings and top and bottom anchors; advance 738, 7 contours, masters compatible
Glyph view of the capital H with its metric lines, sidebearings and top and bottom anchors; advance 738, 7 contours, masters compatible
Font tab after compiling a variable TTF (179 glyphs, 18 regions, 167 kern pairs), with proof lines set by the browser in the compiled font, beside the script that defines axes, instances, knobs and metrics
Font tab after compiling a variable TTF (179 glyphs, 18 regions, 167 kern pairs), with proof lines set by the browser in the compiled font, beside the script that defines axes, instances, knobs and metrics
Preset 9, Modulators: two lines of words in the preset's small geometric alphabet, black and orange on a cream ground, with letters shifting under the modulators
Preset 9, Modulators: two lines of words in the preset's small geometric alphabet, black and orange on a cream ground, with letters shifting under the modulators
Checks tab: 0 errors, 9 warnings about overshoots and sidebearings of individual glyphs, and notes on proportion and Basic Latin coverage
Checks tab: 0 errors, 9 warnings about overshoots and sidebearings of individual glyphs, and notes on proportion and Basic Latin coverage
Preset 6, Loops and procedural shapes: rosettes, asterisks and spirals generated by loops in the script, cream on black
Preset 6, Loops and procedural shapes: rosettes, asterisks and spirals generated by loops in the script, cream on black
Sizes view: the name set from 9 px to 96 px with optical size following the type size
Sizes view: the name set from 9 px to 96 px with optical size following the type size
Preset 7, Runtime scenes: two words in the preset's geometric alphabet, cream on black, the second animated to a heavier weight
Preset 7, Runtime scenes: two words in the preset's geometric alphabet, cream on black, the second animated to a heavier weight
The studio in dark mode on the Compose view
The studio in dark mode on the Compose view