TTFB Mono is never drawn on the page. It is drawn by HTTP requests, in the Overview strip of Chrome DevTools' Network panel.
Visit ttfbmono.net, open DevTools, select the Network tab and type. The page only says (Type Anything); your words appear as request bars, one lane per row of the letter, one bar per run of pixels.
Because the bars are real requests, your connection sets the type. On a fast, stable network the letters are crisp. On a slow or jittery one, pings land late and requests run long, and the letters stretch and break up. No two readers see the same word.
The panel above sends the same requests to the same seven servers and draws the timings it gets back. Type into it, or switch to a simulated network to see the letters deform.
Captured · throttled
The same word, four networks
“TTFB”, typed into ttfbmono.net four times with the browser's network throttled. Every bar is a real request to one of the seven lanes, drawn at its recorded time; grey ticks are the pings before each bar. Throttling adds the same delay to every request, so the letters stretch evenly and stay clean.
Captured · what else is on the line
Your connection is in the font
Real networks aren't throttled evenly. Everything else using the connection, such as a video stream, a game update or a backup, shares the same line and the same queue at the router. When the queue fills, every request waits in it, for longer at some moments than others, and the letters start late and unevenly.
These were typed into ttfbmono.net on one home broadband line (about 83 Mbps) while the same machine ran real downloads alongside.
Streaming: one download held to 25 Mbps, about what a 4K stream uses. Six large downloads: public speed-test files, all at once, enough to fill the line.
Each row is sent to its own server.
Glyphs
Eighty glyphs on a 5×7 grid. Each row is sent to its own server, and each horizontal run of cells becomes one request: a ping, then a bar that lasts 400 ms per cell. Pick a glyph to see the requests it makes, then switch to Delay or File to see every glyph as it really rendered.
Facts
- Drivers
- TTFB, Latency, Bandwidth, Jitter, Typing
- Renders with
- Chrome DevTools · Network Overview
- Commissioned
- Self-initiated
Credits
- Concept, design & development
- Daniel Powell
- Font building
- opentype.js
- Infrastructure
- Cloudflare Workers
Behind the scenes
Why seven domains
One row, one connection
The Overview strip gives each connection its own row. Seven rows need seven connections, but a browser will happily share one HTTP/2 connection between subdomains that share a certificate. Seven subdomains of one site collapse into a single row and the letter turns to mush.
So each row lives on a different domain with its own certificate: seven of Daniel's sites, each running the same small Cloudflare Worker. A decoy on ttfbmono.net warms up first to absorb the page's own connection, so the letter starts on a clean row.
The schedule
A letter is a timetable
Every run aims to start at its column, 400 ms per cell. Before each bar the row sends a quick ping. A row never has two requests in flight, so if a bar is still running when the next one is due, the next one waits.
On a fast network the timetable holds and the letter is exact. On a slow one, pings take longer, bars land late, and the letter stretches instead of piling up. Drag the latency to see it.
Two ways to draw a bar
Delay or file
Delay asks the server to wait: /delay/0.8 sleeps for 0.8 seconds before answering, so a bar lasts exactly as long as its cells, give or take the round trip.
File asks for bytes: /file/N streams N bytes of random data, and the bar lasts as long as your connection takes to download them. So the byte counts have to suit the line. Fixed counts drew clean letters only on the connection they were tuned for: too slow a line and a one-cell stem took eleven seconds.
Now file mode calibrates when it opens. All seven lanes download at once at two sizes, which gives each lane's rate and start-up cost while they share the line, and every bar is sized cell by cell from how many rows are downloading in that column. The letters start clean on any connection. Whatever the line does after that still shows.