How to see your exact words at every weight of a variable font
- Step 1Upload the typeface — Drop the TTF, OTF, WOFF, or WOFF2 you want to specimen. The viewer parses `fvar` to determine the weight rows.
- Step 2Enter your specimen string — In **Sample text**, type the brand name, headline, or tagline. Leave it blank to use `The quick brown fox`; whitespace-only input also reverts to the default.
- Step 3Generate the progression — The viewer renders your string once per weight: named instances or 100-unit axis steps, each at 36px with its label above.
- Step 4Review the rows — Scan top to bottom to see how your phrase reads as it gets heavier — useful for spotting where a logotype weight starts to feel right.
- Step 5Save the HTML specimen — Download the `<stem>.progression.html`. Because the font is embedded, it renders anywhere with no external dependency.
- Step 6Screenshot or embed for the deck — Open the HTML and capture the stack, or embed the file directly in a design doc as a living specimen.
Specimen string ideas and what they test
What you put in the Sample text box shapes what the specimen reveals. These are suggestions, not tool options.
| Specimen string | What it shows at each weight | Good for |
|---|---|---|
| Brand or product name | How the logotype reads as weight increases | Logo / wordmark reviews |
| Headline / tagline | Whether the message holds at heading weights | Marketing decks |
AaBbCc Gg Qq 0123 | Letterform + numeral consistency across weights | Type-system specimens |
A price like $1,299.00 | Where commas/decimals thin out at light weights | Pricing and finance UIs |
| A non-Latin phrase | Whether the font even covers those glyphs | Multilingual specimens |
What the specimen output contains
Every output is one HTML file; the structure is fixed.
| Element | Detail |
|---|---|
@font-face | Font embedded as base64 data URI, font-display: block, font-weight: 1 1000 |
| Rows | One .prog-row per weight step |
| Label | Monospace, uppercase: instance name + settings, or wght N |
| Sample render | Your string at 36px, white on the tool's dark surface |
| Filename | <stem>.progression.html |
Cookbook
Five specimen sessions built around the Sample text box. Each shows the string you'd type and what the resulting specimen tells you.
Wordmark specimen for a logo review
ExampleSet the brand name as the sample to see where the wordmark gains the presence you want.
Sample text: NORTHWIND Every weight row renders NORTHWIND at 36px. Reviewers pick the weight whose label they then copy, e.g. font-variation-settings: "wght" 620;
Tagline across the full range
ExampleA short tagline reveals how the message reads from Thin to Black.
Sample text: Built for the long haul. Thin reads delicate; Black reads emphatic. The stack makes the tonal shift obvious in one screen.
Numerals-focused finance specimen
ExampleUse a figure string so the specimen exposes where digits and punctuation get fragile.
Sample text: 1,299.00 +12.4% −3.1% Light rows often lose the minus and decimal weight; pick the lightest row where they stay solid.
Coverage check via the specimen
ExampleIf the font lacks glyphs for your string, the specimen shows tofu — a fast coverage smoke test.
Sample text:Å Ñ Œ ß 你好 Missing glyphs render as the .notdef box (tofu) at every weight. If you see tofu, run a coverage map before committing the font.
Shareable offline specimen
ExampleThe embedded font makes the HTML portable — no font file to attach.
Download: northwind.progression.html Open on any machine, no network, no installed font. Font travels inside the file as base64 @font-face.
Edge cases and what actually happens
Every row below was probed against the live API. Some documented requirements (alphabetical axis order, numerical tuple order) are not actually enforced in practice — useful to know if you've been blaming the wrong thing for a 400.
Empty or whitespace-only sample
Reverts to defaultThe sample is .trim()-ed; an empty result falls back to The quick brown fox. You won't get blank specimen rows.
Sample contains HTML characters
Escaped, rendered literallyCharacters like <, >, &, and quotes are HTML-escaped before insertion, so a sample of <Brand> renders as the literal text, not as markup.
Glyphs missing for the sample string
Tofu boxes shownIf the font lacks glyphs for some characters, they render as the .notdef box at every weight. The viewer doesn't warn — it just shows the missing-glyph boxes, which is itself a useful coverage signal.
Very long sample string
May overflow rowsLong strings render at 36px and can wrap or overflow each row. Keep specimen strings to a phrase for clean screenshots.
Static font specimen
One Static rowA static file renders your string once, labelled Static at font-weight: 400. It's a single-weight specimen, not a progression.
Right-to-left sample text
Rendered, direction not forcedThe viewer doesn't set dir="rtl". RTL scripts may render with default (LTR) base direction in the row container; verify the order in your own RTL context.
Emoji or color glyphs in the sample
Depends on fontIf the uploaded font has the glyphs they render; otherwise tofu. The viewer doesn't substitute a system emoji font.
Font with many named instances
Many rows, all your stringA superfamily with dozens of instances produces a long specimen — every instance renders your string. That's expected; scroll to compare.
File over 5 MB
Rejected on free tierThe 5 MB free limit applies. Specimen the WOFF2, which is typically far smaller, or subset the font first.
Frequently asked questions
Can I specimen my brand name instead of the pangram?
Yes — type it into the Sample text box and every weight row renders that exact string at 36px.
Is the output shareable without the font file?
Yes. The font is embedded as a base64 @font-face, so the HTML renders offline and travels self-contained.
What happens if I leave the sample box empty?
It reverts to The quick brown fox. Whitespace-only input does too, because the sample is trimmed.
Why do some characters show as boxes?
Those glyphs aren't in the font, so they render as .notdef (tofu) at every weight. It's a quick way to spot missing coverage; for a full map use the character coverage map.
Can it export a PDF specimen, or confirm the font's real name?
It outputs HTML only — open it and print/export to PDF from the browser. To confirm the font's declared weight and family name (handy when a static specimen renders at a fallback weight), read its name table with the font metadata extractor.
Does it change the font in any way?
No — it only renders a preview. The font is unmodified and embedded as-is in the output. To instantiate a static instance for distribution, use the variable font freezer.
What size is the specimen rendered at?
36px per row, fixed. The specimen is for weight and word-shape, not size studies.
Will HTML in my sample break the page?
No — special characters are escaped, so <, >, &, and quotes render literally.
Can I specimen non-Latin text?
Yes, if the font covers those glyphs. Missing ones render as tofu. Note RTL base direction isn't forced. To confirm script coverage before specimening, run the character coverage map.
How many rows will I get?
One per named instance, or one per 100-unit wght step, or a single Static row for static fonts — it depends on the font's fvar.
What's the largest font I can specimen?
5 MB on the free tier. WOFF2 versions usually fit comfortably.
Can I include the copy-ready weight value in the specimen?
It's already there — each row's label shows the font-variation-settings value (or wght N) so the specimen doubles as a reference sheet.
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.