This page uses variable fonts!
To see the page in all of its variable glory, follow these instructions to download and configure a compatible browser.
Chrome (Mac and Windows)
- Download Chrome Canary.
- Go to the URL chrome://flags.
- Enable Experimental Web Platform Features.
If Gutenberg wrote a colophon for his first book, it would’ve been too long to afford to throw in as marketing—but times have changed, and I’m no Gutenberg, and this is not a book.
No, this is made of different stuff. The paper has been replaced by a more luminous space, for which our thanks have to extend all the way back to the first browser developers—but especially those at WebKit, Google, and Microsoft, for the early releases of Safari, Chrome, and Edge. Without them (in combination with HTML, of course), we’d have nothing with which to publish these pages. The “ink” is supplied by each of our operating systems, whose tireless pursuit of high-quality rendering of antialiased typography and high-resolution displays has made ink so much better than 400 years ago, or even twenty years ago.
Google and Dave Crossland were instrumental in bringing this site about, by demanding proof! Aside from commissioning Amstelvar and Decovar, they helped make this project real by adding suggestions and demands along the way. Closer to home, Sam Berlow, Petr van Blokland, and Roger Black have all been in on variable fonts from the beginning (back in the 1990s), bringing their insights and a variety of skills to the fonts and eventually to this site. Also close to home, Alexandre Saumier Demers, Santiago Orozco, and David Jonathan Ross added advice, ideas, and work to the fonts, with both Alex and Santiago doing interesting things we’re still trying to figure out.
The fonts used here, Momentum Sans and Amstelvar, were designed and developed under my direction in a standard version of Frederik Berlaen’s Robofont. This was augmented by Petr’s Dimensioneer extension, which allowed us to design 2,000-unit-per-em quadratic Béziers, with the quality, flexibility, and compression afforded by the Opentype 1.8 specification. And because quality and flexibility were essential for a project like this, we also thank the Opentype 1.8 Alliance, the people at those companies working to advance the spec, and the variable-fonts working group.
Momentum Sans started out in 2014 as a font with suggested instances, but its main purpose was to give the web designers and developers of the Type Network site complete flexibility in sizes, posture, weight, and width, without having to choose from a limited number of styles. The size range, italics for text, layout features, and kerning were developed before variable fonts were announced. Shortly after that, it became possible to serve Momentum Sans as a variable font on the web. It was then upgraded using Google’s FontTools and FontMake to the variable font used here, alongside the instances of Momentum Sans currently used on the Type Network site.
Amstelvar was developed to show the value of the four primary variable axes that web and print designers share an interest in: optical size, weight, width, and grade. The first three axes are in the variable-font specification; the grade axis provides slight variations to the lightness or darkness of a style without changing the glyphs’ widths. When I first started on Amstelvar in July of 2015, I anticipated the need to further explore serif type in variations; I scrapped everything and restarted after a month, when I decided on another path. That path was inspired by the failure of the Millennium font in the 1990s (where too many parameters were mixed in each axis), and by the success of making a grade “space” for Momentum Sans (where it emerged that inverting opaque and transparent values on a pair of axes leads to all the possibilities of weight and width). This led to the seven “inverted” parametric axes of Amstelvar, with all the instancing of extremes for the most useful axes: width, weight, optical size, and grade use.
After that, Amstelvar followed the same path as Momentum Sans through the tools. Both fonts were tested and specified for use on websites running initially on the WebKit nightly build of Safari. Alexandre worked out a prototype site for this for Type Network. Then, in advance of possible needs for variable-font marketing, specimen design, and sales tools, we (along with Chris Lewis) developed a site that linked a variable-instance picker to webfont tags, either specifying absolutely per tag, or relatively to an anchor tag.
I wrote this site’s content over a four-month period; I then edited and discussed it with Sam Berlow and John Berry to ensure clarity beyond the immediate circle of variable efforts. And to make such information as useful as possible, I added other parts in consultation with Dave Crossland and Google.
Then, finally, we brought the fonts, content, prototype sites, and design ideas for this site to Monkey Do’s Mike Pick, who wrote the web code you see here.
The illustrations were all either found in Font Bureau’s image database or created by capturing screen images, with the exception of the handwritten and coffee-stained to-do list provided by Victoria Rushton.
The instances selected from the two variable-font families used are shown below, with their sizes normalized to the same height, to highlight the differences between the styles up close, while you can see how they mix and match throughout this section of the site.
Styles of Momentum Sans
wght 220 wdth 800 opsz 36
wght 100 wdth 769 opsz 16
Brochure text bold
wght 180 wdth 769 opsz 16
Article mid headline
wght 160 wdth 750 opsz 42
Styles of Amstelvar
wght 134 wdth 369 opsz 36 GRAD 88 XOPQ 88 XTRA 402 YOPQ 50 YTLC 500 YTSE 18
Brochure mid headline
wght 139 wdth 402 opsz 24 GRAD 88 XOPQ 88 XTRA 402 YOPQ 20 YTLC 500 YTSE 8
Brochure small headline
wght 124 wdth 552 opsz 14 GRAD 95 XOPQ 88 XTRA 402 YOPQ 62 YTLC 500 YTSE 0
wght 117 wdth 342 opsz 24 GRAD 88 XOPQ 88 XTRA 402 YOPQ 50 YTLC 450 YTSE18
Article lead paragraph
wght 100 wdth 350 opsz 15 GRAD 95 XOPQ 88 XTRA 402 YOPQ 50 YTLC 500 YTSE20
wght 85 wdth 402 opsz 13 GRAD 90 XOPQ 88 XTRA 402 YOPQ 50 YTLC 500 YTSE20
wght 88 wdth 402 opsz 12 XOPQ 88 XTRA 402 YOPQ 50 YTLC 500 YTSE18