A variable display typeface for Envisioning.
font-variation-settings: "wght" 700, "wdth" 100;Weight sets how thick the strokes are. Width scales the letters sideways and leaves the thickness alone, so expanded is no lighter than normal. Width starts at 100 and only opens outward. The two are independent, and any position between the named styles is a real one.
172 glyphs. Portuguese, Spanish, French and German are covered in both cases, along with the Nordic Å and Ø, and kerning is built in.
The original drawings stopped partway through the accented capitals. Ñ, Õ, Ý, the accented I, and the ring and slash letters are composed from parts the drawings already contain, following the same base and mark construction used for the accents that were drawn.
Still to draw: Æ, Œ, ß, Þ, ð, Š, Ž and the pound sign. The curly quotes currently point at the straight ones.
Octa sets the largest type on a page. Inter sets everything else. If you are unsure which one a piece of text wants, it wants Inter.
One file covers both axes. Set the position with font-variation-settings rather than font-weight, so the width axis comes along.
@font-face {
font-family: "Envisioning Octa";
src: url("/fonts/EnvisioningOcta-VF.woff2") format("woff2-variations");
font-weight: 100 900;
font-stretch: 100% 125%;
}
.display-word {
font-family: "Envisioning Octa", sans-serif;
font-variation-settings: "wght" 700, "wdth" 100;
}On a Mac, drop the TTF into your Fonts folder and it shows up as Envisioning Octa with 18 named styles.
Designed by Thomaz Rezende.
Each glyph is a set of points on a grid, joined into lines. Nothing is curved. The grid runs 110 units across and 180 down, with the baseline at 150 and capitals 100 units tall.
The font strokes those lines and fills the result. Line ends are square and corners are round. Weight moves the stroke from 3 grid units to 25. Width scales the grid horizontally. Kerning comes from the drawings too, where each glyph lists the open spaces along its sides and certain pairs close the gap.