Envisioning Octa

An OpenType variable font compiled from the stroke drawings behind the typewriter tool.

The tool draws each glyph as a polyline skeleton and strokes it live, with thickness on a slider. This turns those skeletons into real filled outlines and puts the two continuous parts of that drawing model on OpenType axes.

Axis	Range	Default	What it does
wght	100–900	400	Stroke thickness, 3 to 25 grid units
wdth	100–125	100	Horizontal scale of the skeleton

The two are independent: widening does not thin the stems, and weight does not change the proportions. The tool's own default (stroke 18) sits at about wght 670, between SemiBold and Bold.

172 glyphs. Portuguese, Spanish, French and German are covered in both cases, plus the Nordic A-ring and O-slash. The accented capitals the source never drew are composed from its own parts; see AGENTS.md. Still to draw: AE, OE, eszett, thorn, eth, S-caron, Z-caron and the pound sign.

Install on macOS

cp dist/EnvisioningOcta-VF.ttf ~/Library/Fonts/

Then it shows up as "Envisioning Octa" with 18 named instances anywhere that reads system fonts. To remove it, delete that file.

Pages, Keynote, Figma, and the browsers all handle the variable axes. A few older print workflows still want a fixed cut, so dist/static/ has seven of them.

Use on the web

@font-face {
  font-family: "Envisioning Octa";
  src: url("EnvisioningOcta-VF.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 100% 125%;
}

h1 {
  font-family: "Envisioning Octa", sans-serif;
  font-variation-settings: "wght" 700, "wdth" 100;
}

22 KB for the whole range.

Files

dist/EnvisioningOcta-VF.ttf       variable font, install this
dist/EnvisioningOcta-VF.woff2     same font, web-compressed
dist/static/*.ttf        seven fixed cuts
dist/index.html          the tester
dist/glyphs.json         glyph and axis inventory, emitted by the build

Testing it

python3 -m http.server 8137 --directory dist

Then open http://localhost:8137. Six panels: a live typing field, weight and width ramps, a size waterfall, the full glyph grid, and running text. Sliders for both axes plus size, leading, and tracking; toggles for kerning, alignment, and three background themes. The current CSS is echoed at the bottom right so you can paste it straight into a stylesheet.

It has to be served over http rather than opened as a file, since it reads glyphs.json to build the glyph grid. That file is regenerated by the build, so the page always shows what is actually in the font.

Building

./build.sh

Needs node and python3. See AGENTS.md for how it works.