In use: Tell Joan, set in Vigil Serif and Vigil

Site: telljoan.com, a phone-call biographer for families
Serif: Vigil Serif, roman and italic, set at 360 for display
Sans: Vigil, roman only, for the interface
Replaced: Newsreader and Outfit, on 2026-09-19
Files: Three variable woff2s, self-hosted, Latin subset

Full disclosure: Joan is mine too. It’s also the first real product set entirely in Vigil and Vigil Serif, and a font page that only shows its own specimens is asking you to take its word for it. So here is a site with forms, a nav, an FAQ, long articles and a phone mock-up, with nothing on it set in anything else.

Joan calls a storyteller at a time they choose, asks about their life, and writes down what they say. The audience is adult children buying for a parent, and the parent, who is often in their seventies or eighties. That second reader is why the type mattered. It has to feel like a book and it has to read on a phone held at arm’s length.

The Tell Joan homepage: the headline “There are stories only you can tell.” set large in Vigil Serif, a serif paragraph beneath it, a small sans eyebrow and a claret button, beside a dark incoming-call card reading “Joan” in serif. — The homepage at 1440px. Headline and paragraph in Vigil Serif; the eyebrow, nav, refrain and button in Vigil.

Content in the serif, interface in the sans

The rule is the one on the Vigil Serif page, followed literally. Anything Joan says is serif. Anything you operate is sans.

Vigil Serif

What Joan says

Every headline
Body copy and Journal articles
The italic tagline and text links
Pull quotes and the FAQ questions
The name on the incoming call

Vigil

What you press or scan

Navigation and buttons
Tracked uppercase eyebrows
Step numbers and section labels
Form labels and choice chips
The one-line refrain under the hero

Because the two share a cap height, x-height and line box, nothing needed nudging where they meet. The eyebrow sits on top of a 120px serif headline, the button sits beside an italic serif link, and the baselines line up because they were drawn to.

A Tell Joan section headed “You talk. Joan carries the thread.” with four numbered columns: Joan calls, You talk, Joan picks up where you left off, Your archive grows. Headings and body in serif, numbers and the section label in small sans. — How it works. The serif carries the story; the sans only numbers it.

The Tell Joan homepage on a phone: the serif headline fills the width over a serif paragraph and a sans refrain. — At 390px. The serif holds its colour at the size a parent will actually read it.

A Tell Joan Journal article on a phone, set in Vigil Serif at reading size. — At 390px. The serif holds its colour at the size a parent will actually read it.

One number fixed the colour

Joan’s headlines were designed in Newsreader at 400. Dropping Vigil Serif in at the same 400 made every heading look like it had raised its voice. Measured on a clean stem, Vigil Serif 400 is 10.2% thicker than Newsreader 400. The match is 360.

That number only exists because the serif is variable. With static weights the choice is 300 (too thin) or 400 (too loud). With the axis it is one custom property, --display-weight: 360, and every heading on the site moved together.

A life story, at 400 A life story, at 360 Vigil Serif at the two weights. The second is what ships.

The J got longer

Joan’s wordmark is the word Joan. with a claret full stop. Vigil Serif’s J drops well below the baseline, as a book face’s J should, and the logo file grew a tail: 29 of its 114 pixels now sit under the baseline, against 11 in the old mark. Left alone, that tail pushed the header taller and the wordmark off-centre from its tagline. The fix was to let the descender hang out of the layout box, with six pixels off the top. The header stayed the height it was.

It’s the most typographic bug I have ever filed, and the right trade. A J that stops at the baseline is a sans habit.

Two Tell Joan bands. On claret: “A life story should not feel like an assignment.” On near-black: “A gift that begins with being heard.” beside a boxed serif quote about a sunflower-yellow kitchen. Small sans labels sit above each. — Reversed out of claret and near-black. Display serif at 360, a serif quote, and sans labels doing the filing.

Three files

Joan is a Next.js site and it self-hosts the fonts rather than hotlinking vigil.css, because the routine that writes its Journal builds in a sandbox with no network. Each file is one variable face over the full 200–900 axis, cut to Latin:

Vigil Serif: 125 KB, roman, 200–900
Vigil Serif Italic: 104 KB, italic, 200–900
Vigil: 35 KB, roman, 200–900

There is no sans italic. Nothing on the site sets the sans in italic, so it isn’t shipped. Fallback metrics are matched to Times New Roman and Arial so the page doesn’t jump when the fonts land.

A Tell Joan Journal article titled “A prompt book is not a biographer”, with a serif headline, serif standfirst, a small sans byline and date, and serif body text with serif subheads. — A Journal article at desktop width. Long-form serif, with the sans held back to the nav, the byline and the date.

If you’re doing the same

Split by job, not by size. Serif for what the product says, sans for what the reader does.
Swapping from another serif? Match stem weight, not the number. Joan’s 400 became 360.
Check every J, Q and descender in your logo and anything with a fixed height.
Ship the variable file. Three files covered every weight and slope Joan uses.

Set something in Vigil? Send it in. Good uses go up here, credited and linked.