This Tool Is Built To Make Responsive Type A Reality

Prototypo uses algorithms to automatically adjust type parameters. Will it lead to typography that scales to screen size?

Over the past few years, responsive web design has gone from a desirable feature to an outright necessity. People visit websites on different devices, which means that website layouts need to shift to fit those different surfaces. UX designers have adapted accordingly, with websites that fluidly scale to fit different screen sizes. Now, type designers might be following suit.


At least, that’s the plan for the team of type designers and web developers behind Prototypo, a web application for creating “parametric”—or responsive—typography. The tool allows graphic designers and type designers to choose from a selection of typographic templates, then fluidly adjust for things like font weight, curvature, and size, offering infinite variations. It also offers graphic and UX designers more control over choosing and customizing typefaces, and type designers more flexibility when designing them—and it’s all aided by code.

[Photo: courtesy Prototypo]
With the Prototypo web app, users start by choosing from a selection of parametric typefaces. Then they make adjustments for more than 30 parameters, including thickness, aperture, and roundness. Last week, Prototypo added a fourth template to its growing collection with a font called Spectral. It is designed by the French digital type foundry Production Type–itself run by type designer Jean-Baptiste Levée, who is an advisor to Prototypo. Google commissioned Production Type to design the screen-first typeface for use in Google Docs, Sheets, and Slides. In turn, Prototypo converted Spectral to a parametric template, allowing for it to be infinitely tweaked, adapted, and iterated on with Prototypo’s technology.

Spectral is available for anyone to use via Google Fonts, Google’s collection of free, open-source font families. But Prototypo took it and made it parametric—which has generated quite a bit of positive buzz online, both on tech blogs and in online forums like Reddit and one for Y Combinator. Put simply, a parametric font is an algorithmically generated font. The algorithmic code expresses the various typographic rules of a font, so that when a designer modifies certain parameters—like thickness or roundness—all variants automatically adjust.

[Photo: courtesy Prototypo]
This is in contrast to typical, static type design, where a type designer makes those adjustments manually and saves them as different files. That’s why type designers, who are highly skilled at perfecting those minute adjustments, will design an entire type family that offers variants for graphic or UX designers to pick from. Parametric typography is exciting because it would allow for designers to customize the type themselves, with the code essentially acting as the precise type designer, making sure that when one variant is adjusted, the other variants are adjusted as well. Type designers would still create new typefaces, but could spend less time adjusting for different variations. It also has exciting implications for responsive design, which requires different variants for different screens. An ultra-thin font that looks good on a large display, for example, might be unreadable on a small one.

Instead of creating a new font file for each display, the idea behind parametric typography is that it could adjust on the fly. Prototypo’s technology is helping make that a possibility by offering a tool that accomplishes the first step—fluidly adjusting type. And beyond their consumer-facing tool, Prototypo has also been experimenting with various ways of marrying the capabilities of modern browsers—such as sensors that pick up the size of the screen, ambient luminosity, how far the reader is from the screen—with type (see this demo and this demo).

The question, according to Prototypo, isn’t whether parametric design is possible—it’s how to develop the best tools that allow designers to make use of it. Louis-Rémi Babé, cofounder of Prototypo, put it in a blog post: “There is an unsolvable equation between freedom of creation and ease of use. The easier a type design tool is to use, the less freedom it gives to the creator. . . . This is why we are building tools to help type designers create parametric fonts that give more choice to the type designer on how they build this recipe.”

About the author

Meg Miller is an associate editor at Co.Design covering art, technology, and design.