TYPE HomeLogo for TYPE Magazine



Variable, who?

Another next big thing in type technology

What started as a school project six-years ago has turned into a dedicated team of 5: Yannick Mathey, François Poizat, Alexis Launay, Jean-Baptiste Levée, and Yann Guillet.

Imagine you’re designing the book cover for a new thriller novel. You scroll through your respectable list of fonts, as you have many times before. Unfortunately, nothing jumps out. You scroll again, and still nothing. So you check your favorite foundry sites and font collections . . .

As you do this, the image of what you want begins to grow clearer and clearer—you know precisely how the perfect font should look, but damned if no one has designed it yet! Historically, graphic designers faced with this all-too-common conundrum have had few potential solutions: they could email a type designer and ask for some custom letters, try to learn type design, or—most frequently—they could settle.

That may change soon, though, as a team in Lyon has been working on a better choice that they’re calling “parametric type.” Led by Yannick Mathey, the group has developed Prototypo, a web (and desktop) application that allows users to create typefaces—without the first and largest hurdle to becoming a type designer: Learning type design.

To do this, Prototypo users first select a template font. Think of these template-like skeletons: they’re the bones of a typeface, waiting for the rest of the anatomy to fill in.

The user adjusts an array of sliders, each linked to an anatomical feature. For example, a graphic designer using Prototypo might pick their Spectral template, which gives the essential form of their end result, then decide to add slab serifs, a forward slant, baller terminals, etc. The potential combinations are endless.
Both variable and parametric type technologies aim to solve the same problem—how to adjust letterforms based on the use or environment—but they go about it in “completely different ways,” says Mathey. He’s not wrong. Variable typefaces require that an experienced type designer create masters, which live at the ends of specific axes.

For a graphic designer, using a variable font ensures perfection in the letterforms (as they’ve all been professionally designed) but sacrifices freedom (as all outcomes were created by the type-designer). Using a parametric typeface, on the other hand, allows the graphic designer to make limitless choices, but there’s no promise that any of them will look good. To use these technologies, designers rely on sliders: with a variable font, she might find two or three sliders; with a parametric font, she might find 60.

This difference comes in the way the two typefaces are produced. Variable fonts are designed by professional type designers in a type design program, so any variation exists as a mid-way point between two or more complete designs.

This limitation—that an individual designer needs to create the outlines of each endpoint—is why variable fonts have so few sliders. A new slider (a new variable) would require a whole new design. Parametric fonts (and their “skeletons” underneath) are created by programmers. They are not defined by curves in space but by coded, mathematic algorithms, which can sometimes produce unsightly results.

But, why?

For many professional type designers, developing variable fonts seem the clear choice—hence the recent fervor—especially considering type design programs such as Glyphs include variable features.  But if you are a graphic designer, not a type designer, and can’t find a variable font that fits your project, Prototypo might work.

If you want a custom typeface for a poster, book cover, or branding project, the ease of Prototypo outweighs its imperfections. Demonstrating these advantages is half of Mathey’s struggle.

Mathey says, “to explain what variable fonts do, you have to animate them.” Because variable fonts display an interpolation rather than an equation, they require additional code to display their options.

This truth has led to the common practices of placing either more-and-more sliders or animated gifs in online type specimens. These solutions, while not inherently bad, become inelegant with overuse. Foundries which produce variable fonts have been working on this issue, but it is an issue. Parametric fonts can accept live data into their equations, so displaying their possibilities becomes easy.

For example, Prototypo’s responsive specimen for Spectral, a Google font designed by Production Type, features a set of visual zones in which the location of the user’s cursor alters aperture, serif width, weight, bracket curve, and more. For designers deciding between the two technologies, there’s the matter of reverse-compatibility.

Mathey explains, “from a parametric font, you can export a variable font. Each slider in our technology could be a variable font axis. The contrary is not true: You cannot export a parametric font from a variable font.”

That’s how Mathey sees the future of type, adding,  “Maybe Prototypo is not only a tool for graphic designers interested in type design; maybe it’s a production tool for type designers. Currently we do not have the quality required to do that, but at some point, we will.”

An app for type design.

Mathey started work on Prototypo for his graphic design diploma, developing a simple version in one year using JavaScript. Seven years of development later, and the company has racked up 55,000 users. Despite this progress, Mathey acknowledges that “there’s still much to be done if we want to get close to a very good type design program. We’ve spent eight years to get what we have today, and we need three or four years more to get what we want.”

Professional type designers might not use Prototypo as anything other than a quick drafting tool until then. However, for graphic designers curious about custom fonts, it’s already a perfect entry-point, and getting better all the time. Because the skeleton typefaces included in Prototypo are created with coded equations, the team waits until each successive typeface-release to add more features. According to CMO Yann Guillet, “Each time we release a template, that’s the new best template in terms of integration and technology. The next one will be the best, and the one after that will be the best, as well.” They add new faces often; there are five included at the time of writing, with another one being added around the time of publication. Mathey and his team don’t leave older faces on the shelf though, “reworking the previous templates to bring them up to the quality of the new ones.”

Step 1: Selecting the skeleton font
Step 1: Selecting the skeleton font
Step 2: X-height and Width
Step 2: X-height and Width
Step 3: Weight and contrast
Step 3: Weight and contrast
Step 4: Ascender and descender height.
Step 4: Ascender and descender height.
Step 5:Alternate glyphs
Step 5:Alternate glyphs
Step 5: Serif qualities, such as height and width
Step 5: Serif qualities, such as height and width

All about the UI.

When attracting graphic designers, the user experience becomes almost as important as the typefaces themselves, and Prototypo gets this part of their application very right. After logging in, the user picks from the skeletons, and gives their new creation a name. Then, she navigates through a truncated series of screens, deciding the most important values for her new creation, such as x-height, width, thickness, contrast, alternate characters, and serif characteristics.

After going through this step-by-step process, the user can stop or dive into Prototypo’s full editor page, with every glyph, a text preview, all the parameter sliders, and more. It’s easy to create and export a decent font from Prototypo, if you’re comfortable with it looking like a slight variation on the skeleton—in other words, if you change only those parameters in the step-by-step portion of the creator. If you want a unique typeface, you would need to invest more serious time in the app’s main editor. It’s tools take time to master, but it’s still less than the hundreds of hours creating a typeface from scratch.

After the introductory steps, the user faces a full-scale type design program. There are sliders for nearly every imaginable parameter: crossbar height, bracket roundness, “curviness,” and more, as well as per-glyph node and bézier editing.

When people do master the program, the Prototypo team fills with pride. Their most prized example came from Monsieu Girafe design studio, which used Prototypo to create a custom typeface called Passion Outre-mer for a French national TV network. According to Guillet, it was “the first time we saw a Prototypo font used for such a large audience. And it’s a very famous channel in France!” Mathey’s favorite, though, was one of their earliest: “An Italian type designer sent us his font, saying ‘Okay, I designed this font in Prototypo in two or three hours—just to get the proportions right—and then I finished it in Robofont.’ Seeing something designed by a professional was very informative. I hope we have more examples like that in the future.”

Most professional type designers might see variable type as the future, but Mathey and his Lyon cohort will continue to develop Prototypo, adding new templates and new features, as they step ever-closer to a refined type-development tool. To him, the future looks more like a combination of variable and parametric technologies: “Instead of drawing outlines, perhaps you could draw parametric fonts directly in some application like Glyphs. From that point, you would be able to design masters on the fly, without having to draw each master! You could define a system, write its rules, extrapolate, and refine. It could simplify the process a great deal.” If type designers want that future, they might want to give parametric type another look.

Next entry: It all starts with writing

Previous entry: The future is here