Pairings
Eight combinations worth putting on a canvas or a page. Each one names why it works, then lets you drop the display cut into the studio.
The canvas can hold type.
HTML5 canvas draws glyphs as pixels, not as a document. That is why tracking, wrapping, and metrics have to be done by hand — and why a studio for it is worth building.
Fraunces + IBM Plex Sans
Fraunces has optical sizes and a warm old-style axis; Plex is a reliable engineer’s gothic. Together they read as a type foundry that also ships code — which is CanvasFont.
Product UI + specimen headlines. Default pairing of this site.
Measure twice. fillText once.
devicePixelRatio is not a suggestion. A 1× canvas on a 2× screen is why so many canvas headlines look like they were faxed. Scale the backing store, keep CSS size honest.
Newsreader + Figtree
Newsreader was cut for text on screens; Figtree is a quiet geometric with a large x-height. Editorial without costume drama.
Long-form guides, case studies, captions under specimens.
Stop settling.
fillText will use whatever is already in the font stack. If Fraunces has not loaded, you bake Arial into the PNG and never notice until the client does.
Playfair Display + Barlow
High contrast Didone against a slightly condensed neo-grotesk. Classic magazine tension: the headline performs, the deck informs.
Campaign ads, launch posts, 4:5 portraits.
CANVASFONT
A baseline is not a suggestion either. fontBoundingBoxAscent tells you where the em square actually sits. Draw the guide until the letters feel planted.
Cinzel + Source Serif 4
Cinzel is inscriptional; Source Serif 4 is a workhorse reading face. Stone-carved titles with a book underneath.
Splash frames, opening title cards, ceremonial product moments.
TYPE ON THE WIRE.
Letter-spacing is not a canvas property. You advance the pen yourself, glyph by glyph, adding the tracking you actually want.
Oswald + IBM Plex Sans
Oswald is a gothic with newspaper DNA; Plex keeps the UI from shouting. Good when you need density and a hard left edge.
Display ads, sports-adjacent, condensed posters.
Set a line.
The studio on the other tab is the same renderer that will export your ad. What you see is what the PNG is — at 1×, 2×, or 3×.
Instrument Serif + DM Sans
Instrument Serif is sharp and contemporary; DM Sans is neutral enough to disappear in a control panel. A pairing for tools, not brochures.
App chrome, settings, marketing site that must still feel designed.
Copy the snippet.
const ctx = canvas.getContext('2d'); ctx.font = '500 72px "Fraunces"'; await document.fonts.load(ctx.font); ctx.fillText('CanvasFont', x, y);
Syne + IBM Plex Mono
Syne is a display grotesque with stubborn character; Plex Mono is the snippet. Headline vs. source.
Developer campaigns, docs headers, code-export screens.
Moda on a bitmap.
Hairlines die on a 1× canvas. If you must use a Didone, export at 2× and never put the thin stroke against a busy photograph.
Bodoni Moda + Archivo
Hairline Didone against a slightly industrial sans. Fashion and wayfinding in one frame — high contrast, no apology.
Luxury or craft brands rendering type onto lookbooks, not UI.