Variable Preview
Drop a font here
Any static TTF or OTF will do. Simple sans serifs give the best results; high-contrast serifs and script faces are harder to synthesize. Drop several styles of one family (Regular, Bold, Narrow…) to use their real letters as masters.
Waterfall
The same line from 9 to 72 px. Left: optical size follows the font size, as browsers do with font-optical-sizing: auto. Right: optical size fixed at the source design size.
How to use Axisize
Axisize turns static fonts into a variable font right in your browser. Nothing is uploaded anywhere: the fonts you drop stay on your device.
One font: everything synthesized
- Drop a TTF or OTF file on the page (or press Choose file). WOFF and WOFF2 need converting to TTF first.
- The page builds a variable font with Weight, Width and Slant axes. The light, bold, narrow, wide and slanted versions are synthesized: the outline is thickened, thinned, scaled and sheared by the tool.
- Move the sliders in the preview. The rows below show the extremes of every axis, including the hardest corner (bold + condensed + slanted).
- Press Download variable .ttf. The CSS block next to it is a ready
@font-facerule for a website.
Simple sans serifs synthesize best. High-contrast serifs and script faces are harder: expect the extremes to look less refined than a hand-drawn family.
Several fonts of one family: real masters
Drop several styles of the same family at once — for example Regular and Bold, or Regular, Bold, Narrow and Narrow Bold. Their real letters become the masters of the variable font:
- Masters table. Each file gets a position on the axes, read from the file itself (weight and width classes, italic angle, style names). A dashed field is a guess — check it. You can edit any value, pick the default master, remove a file or add more.
- Real and synthetic axes. An axis with at least two different masters (say, Regular 400 and Bold 700) is real: in-between weights are interpolated between the real drawings. Axes without real masters are synthesized from every real master, as in the one-font mode. Extend … by synthesis makes a real axis longer than the masters (lighter than the lightest, bolder than the boldest).
- Compatibility. To be interpolated, a letter must be drawn with the same structure in every master. The tool fixes the usual differences automatically (contour order, direction, start point, number of points on a curve) without changing the shape. Letters that still do not match are synthesized from the default master, with the strength fitted to the real masters. The compatibility report lists them; click a letter to see the real letter of every master next to what the variable font draws there. Don’t use this master for this glyph excludes a master for one letter if its drawing gives a bad result.
- Highlight synthesized glyphs shades those letters in the preview, so you can see where they appear in text.
- Kerning and mark positions come from every real master: at a master’s position, the variable font kerns and places accents exactly like that master.
- Real italic. If some of the files are italic (their italic angle is not zero), you get two variable fonts, “Family” and “Family Italic”, linked so that design apps switch between them with the I button. Download gives both in one ZIP. Italic letters are usually drawn differently from the upright ones, so they cannot be one axis; only if at least 90% of the letters match can you choose a single file with an
italaxis instead. The synthetic slant axis is off by default when a real italic is present. - Synthesize secondary axes from default master only makes the file much smaller when several masters are present, at the cost of less precise corners (a narrow bold is then a narrow regular made bold).
Settings
- Master synthesis — how strong the synthetic weights, widths and slants are: stem gain and reduction (per side, as a share of the stem), how much of the extra thickness goes into letter width, the condensed and extended limits, slant angles and tracking.
- Weight curve. Even steps makes each step (300 → 400 → 500…) thicken the stem by the same ratio, as in hand-drawn families. Linear keeps plain interpolation — the default when the weight axis has real masters, which already define their own steps.
- Shape corrections — Counter protection keeps the insides of letters open in bold and condensed; Optical oblique rotates round letters a little instead of only shearing them; Round squaring keeps round letters full in the condensed master. Each can be switched off to compare.
- Optical size adds a fourth axis: slightly heavier and looser at small sizes, finer and tighter at large sizes. Browsers pick it automatically from the font size.
- Reference font — load a real bold (or any style) to overlay it on the preview and, in the one-font mode, to fit the weight curve or the bold master to it.
- Static export — a static font at the current position, or a whole family as a ZIP, named so that Word, Figma and InDesign group the files together.
The font rebuilds half a second after any change. Big families (thousands of glyphs, several masters) take a few seconds; the page stays responsive and shows the current stage.
What to expect
- Real masters are reproduced exactly: at the position of a real master, the variable font draws that master point for point.
- Synthesized letters and synthetic axes are an approximation. They follow the stems and proportions of the masters, but they are not a type designer’s drawing: check the letters listed in the report, especially frequent ones like “a”.
- Extreme settings (very bold, very condensed, strong slant at once) can squeeze small counters; the preview rows show the worst corner.
Licenses
Changing a font makes a new, derived font. Many fonts do not allow that. Fonts under the SIL Open Font License (OFL) do, but if they have a Reserved Font Name, the result must not use that name — which is why the family is called “… Synth” by default. The page warns when a font has no OFL notice or has a Reserved Font Name. Check the license before you share or sell the result.