Art Direction Daily

No. 170Friday, October 30, 2026
A five minute read

Typography release

Vercel's new serif lets you pick the dot on every i

Geist Serif arrives with an axis that swaps the dot on i, j and punctuation for a square, a triangle or a heart, and each shape ships as its own font file.

Read the release Borrow the dot switch
Geist SerifTester

Quick wizards jived, fixing six jumbled ink quips.

Element shape (ELSH)
Pick a shape and every i and j on this page changes with it, because the switch sets the body font for the whole page.

In this release

Six entries
No.EntryDisciplineDated
01Geist Serif ships four dots for every iTypographyOct 30
02Figma trained its own model for canvas editsToolingOct 29
03Keep the table, hand its rows to GridTechniqueOct 29
04Vercel splits AI crawlers from AI assistantsWorkflowOct 29
05One switch, every dot on the pageDesign moveToday
06The foundry release page, as a promptPrompt LabToday
Today's art direction

The Dot Specimen

A type foundry release page, set like a printed specimen and wired like a product page.

A foundry release page sells one thing: how the face behaves. So the hero is a working tester, the contents read as a studio's work index of numbered entries, and every entry opens on a big case number in an extended grotesque against a book serif for reading. Etched diagram plates stand in for product shots, and the jade ground is hatched like an engraver's tone.

  • type specimen
  • nameplate
  • dot tester
  • element shape axis
  • work index
  • case number
  • etched plate
  • plate mark
TypographyVercelOctober 30

Geist Serif ships four dots for every i

Vercel released Geist Serif in a Regular weight today, with a variable version from Thin to Black planned and a text cut and an italic in development.

Its ELSH axis, short for element shape, swaps the dots on i, j and punctuation between Regular, Square, Triangle and Heart. Each shape also ships as a static file, so a site can load one without the variable font.

Etched diagram of a dotless serif i stem with four alternative dots above it: a circle, a square, a triangle and a vermilion heart, each joined to the stem by dashed construction lines.
Plate 1. One stem, four dots: the element shape axis drawn as a construction diagram.
Glyphs
894
Languages
352Latin script
Kerning pairs
52,000+
Stylistic sets
5ss01 to ss05

It installs from the same npm package as Geist Sans and Geist Mono, which lists the SIL Open Font License. The package exposes a CSS variable per shape:

npm i geist

/* one variable per element shape */
font-family: var(--font-geist-serif-square);

When a face ships its personality as a setting, a brand changes one value instead of one font.

Vercel says Google Fonts distribution is planned after launch. For now the files come from npm.

ToolingFigmaOctober 29

Figma trained its own model for canvas edits

Figma's agent now hands precise edits to spacing, color and layout to an in-house editing model, while third-party models keep image generation and vectors. It is the same agent that learned to build from named examples last week.

Figma reports 77.8 percent on its internal editing evals against 76.9 percent for Sol 6.1, typical tasks about 20 percent faster than the beta, a 60 percent drop in undo rate and user ratings up 33 percent. The model is not released on its own.

TechniqueCSS-TricksOctober 29

Keep the table, hand its rows to Grid

Preethi's Frankenstein table keeps real table markup for its semantics, turns the table into a grid, dissolves the body wrapper and lets each row become a block that can be laid out as a card.

The author tested with VoiceOver and the keyboard only and gives no browser support data, so run your own screen reader checks before shipping it.

table { display: grid; }
tbody { display: contents; }
tr, tr > * { display: block; }
Etched exploded diagram of a three by three table whose rows drop away as separate stacked cards, each rearranged into two columns, joined by dashed arrows.
Plate 2. Rows lifted out of the table and restacked as cards.
WorkflowVercelOctober 29

Vercel splits AI crawlers from AI assistants

The AI Bots managed ruleset in Vercel's Firewall now takes separate actions for crawlers that index and train and for assistants that fetch a page because a person asked. Each class can be blocked or logged, on every plan.

For a studio that wants its work quoted in an answer but not collected for training, that is now two settings instead of one blunt switch.

Design moveBorrow this

One switch, every dot on the page

Put one native radio group on a release or product page and let it set a font variable on the root, so the whole page demonstrates the feature at once instead of a single specimen box doing it alone.

Where
Type releases, brand refresh pages, theme or tone pickers, any page whose product is a look.
How
The CSS has selector watches the checked radio and swaps one custom property; no script is involved.
Keep it honest
Real inputs with visible labels, a sensible default checked, and nothing hidden behind the choice.
:root { --font-body: "Geist Serif", Georgia, serif; }
:root:has(input[name="elsh"][value="heart"]:checked) {
  --font-body: "Geist Serif Heart", Georgia, serif;
}
body { font-family: var(--font-body); }
Try it here, it is the same control as the tester
Prompt LabCopy and adapt

The foundry release page, as a prompt

Tested for Framer, Lovable, Claude, v0, Webflow and Beaver Builder AI

Build a type foundry release page for a studio launching a new typeface, as one responsive page with real, readable copy.

Structure, top to bottom:
1. A slim nav: studio name left, three text links right.
2. A nameplate folded into the hero: the studio name set huge in an extended grotesque between a 3px rule above and a 1px rule below, with the release number, date and read time as a small right-aligned text block, not boxed cells.
3. Hero in two columns (5:6). Left: a solid ink label ("Typography release"), a 13ch headline, a two-sentence deck, one vermilion button and one text link. Right: a live tester card on paper with a 1px ink border and one hard 8px offset shadow, showing three or four huge glyphs, a pangram, and a four-option segmented radio control for the font's stylistic variants.
4. The tester control must set a CSS custom property on :root using :has() on the checked radio, so the whole page's body font changes, not just the card. Native radio inputs with visible labels, default checked, no JavaScript.
5. A work index table: number, entry title linked to its section, discipline, date. Row hover tint.
6. An art direction band on the patterned ground: name, one-line summary, short paragraph, tag list.
7. Case rows: a 200px left column with a 96px case number in the extended grotesque and a small ink discipline label, beside a 740px reading column. The first case number is vermilion. Include a spec row of four stats (big numbers, mono labels), an etched diagram plate with a caption, a code block and one pullquote under a 2px vermilion rule.
8. An inverted ink case for a reusable technique, with a dt/dd rules list and a code snippet.
9. Sources as a ruled list, three pager tiles, a colophon.

Palette: ground saturated jade #46A882 with a 135 degree hatch of 1px ink lines at 13 percent every 9px; paper #EEF1EA; ink #0E2219; vermilion #C2391F for buttons and one accent only; muted #4F6A5E; emphasis green #1F6B4F.
Type: Archivo at width 125 (500 and 800) for display, numbers and labels; the new serif (or Newsreader) at 19px, line height 1.7 for reading; Geist Mono for labels and code.

Guardrails: body at least 18px with line height 1.6 or more, 60 to 75 characters per line, WCAG AA contrast on every surface including labels on the green ground, no neon, glow, gradients or gradient text, radius 2 to 6px, one hard shadow only, hover and focus states at 150ms with a reduced-motion guard. Images are etched diagrams with no readable text. On mobile stack the hero with the tester below the copy, put case numbers inline above each entry and collapse the stats to two columns.
Note

Field note

Only Regular is out, so a body set in Geist Serif today has no italic and no bold; pair it with a second family for emphasis until the variable font lands, as this page does with color.

Credits

Sources

  1. Introducing Geist SerifVercel blog, October 30, 2026
  2. Training a Figma-fluent editing modelFigma blog, Josh Clemm, October 29, 2026
  3. The Frankenstein TableCSS-Tricks, Preethi, October 29, 2026
  4. Block AI crawlers and assistants independently with managed rulesVercel changelog, October 29, 2026
  5. geist on npmPackage page, version 1.9.0