Font Studio
Explore typography, compare fonts, and build a type system that holds together — pick from a curated catalog or drop in your own font file, size and space it with real controls, check it for legibility, and export production-ready tokens. Everything runs in your browser; an uploaded font is never sent anywhere.
The type
Pick a family from the curated catalog, or drag in your own
.woff2, .woff, .otf, or
.ttf file — it loads straight into the page and is
never uploaded anywhere. Size, weight, line height, letter spacing,
and paragraph width are all live, with 45/60/75-character measure
markers so you can see when a line has run long.
Type preview and controls
Drag a font file here, or
.woff2, .woff, .otf, or .ttf — loads in your browser and is never uploaded anywhere.
No families match “”.
Compare
Two fonts, the same text, the same size, side by side — the question you actually have once a shortlist narrows to two.
Font pair comparison
Variable axes
A variable font carries its weight, width, optical size, and other axes as one continuous range instead of a handful of fixed cuts. Drag each axis a catalog font declares and watch it render live. Catalog fonts only for now — an uploaded file gets weight alone until a future pass adds axis parsing for your own files.
Variable axis playground
Type scale
A base size and a ratio, stepped into a named scale with a line height for every step — set in the font you're actually looking at, because apparent size isn't the same thing as pixel size from one typeface to the next.
Type scale builder
Readability
An APCA Lc score against the published size-and-weight table, using the same contrast engine that powers Color Studio, so a check here and a check there never quietly disagree.
APCA readability check
Readability needs the color engine, and it didn't load this time — reload the page to try again.
On background
The same type set on light, dark, gray, or a color of your own — the physical handshake with Color Studio's palette.
Background swatches
Design tokens
The scale and the family, exported as CSS variables, Tailwind, SCSS, or JSON — shaped to match Color Studio's export, so a palette and a type scale compose into one tokens file.
Token export
Saved
Fonts and scales you've kept, stored in this browser's local storage on this device only — no account and no server. Copy a link to what's on screen right now to send it somewhere else.
Saved fonts and scales
Nothing saved yet.