Blog
…

By Sebastien Hayez. Published August 23, 2022

Variable Fonts

Introduction

Few typefaces are published in a single style today. The concept of a typographic family has taken over, helped by the latest features offered by type design software: extending a single typographic design into a large family has become a breeze when the initial design follows certain rules. Yet, it has never been such a transparent concept.

We could define a typographic family as a set of type designs united by homogeneous criteria but declined according to various styles that can include sets of weights, slants, width, optical sizes, etc.

But since Gutenberg and during a few centuries, typography exists according to a unique style declined in different optical sizes; each size being an adaptation of a design according to optical corrections. Aldus Manutius (1449-1515) was the first to cast an italic typeface modeled on the Italian chancery script. If we do not yet speak of a family concept, we note that a unity is emerging between the Roman and Italic styles. But during centuries, type design remained the preoccupation of book printers, publishers and booksellers: text was all roman or italic, no bold style except if you don’t notice that it’s not the same font.

In the beginning of the 19th century, industrialization improved the need for advertising, and so, to break the transparent logic of book design. International exchanges allowed type foundries to distribute their own version of standards type design. And so appeared the first font collection with various styles : roman, italic, bold, sometimes with ornate or fancy variants.

However, it is still with intuition that the type designer conceives his typefaces, taking care of a coherence that is judged by the eye only. It was not until 1957 that a young Swiss typographer living in Paris proposed to Charles Peignot, from French foundry Deberny & Peignot, a typeface designed according to a pre-established and reasoned plan. Adrian Frutiger was putting the first pieces of what would become Univers during his studies at the Kunstgewerbeschule in Zurich (1948-1951) Designed as a family of 21 styles corresponding to 4 weights, 4 width and 7 italics, the drawing task should be a real mess. In order to solve the problem, Frutiger imagines a progression following a geometrical variation made visible thanks to curves connecting the points of each glyph.

This way of designing a family is still the norm today, even though computers have entered the production process.

Multiple Master: the avorted standard

Since the early 1990s, typographic design software has generally used interpolation tools to obtain intermediate designs from two extreme masters. However, the user was left with a set of files corresponding to each style. Thus, Frutiger's Univers was deployed in each computer as 21 files for the 21 series. In the middle of the 1990s, the engineers of Adobe understood that a development of the PostScript Type 1 format would make it possible to include these masters within a single file and would offer to the user to directly parameterize the interpolations of each criterion.These are the Multiple Master fonts. Univers becomes a single digital file made up of masters for its vertical axis (roman to italic), horizontal (condensed to extended), and its weight (light to ultra black).

On the application side, after its installation in the operating system, a palette appears in the software showing two or even three axes visualized as a sliding horizontal bar. If the use did not develop beyond 1999, the flexibility of the approach made it possible, for the needs of a title, a logo or for precise cases, to overcome the restrictions specific to the questions of the choice of the typographic designer. The printing of blank text on a dark background is difficult, the graphic designer can then increase the weight of the text appreciably in order to mitigate this possible problem. Theoretically, the type designer moves from a design creator to a creator of a system that the user takes over for use.

As with every tool, some designers use technology in a creative way. Interpolation is also a progression from a shape to another one. It could be basically seen as a metamorphosis. Lucas de Groot was one of the first type designers during the end of the 1980’s to explore the positive benefits of interpolation in font development. Pushing the boundaries of interpolation, he plays with the curves in order to produce a font able to evolve into figurative illustrations. The various steps of the interpolation could be seen as the various frames of an animated erotic cartoon. Yes, MoveMeMM, published in 1994 in Fuse issue 11, is perhaps a private joke of a type designer proving his skills as a type developper and illustrator.

The failure of Multiple Master fonts is as much due to the difficulty of rewriting software to incorporate the new file standard, as to a lack of relevance at the time of the beginning of the web. The development of Web 2.0 and CSS, which occurred shortly after MM fonts, will bring about a changeover. Indeed, the development of the web and smartphones requires an automation and an adaptation of the design to many terminals: from the horizontal screen of the desktop, to the restricted and changing definitions of tablets and smartphones, the typographic management quickly becomes a headache for designers. The possible interpolation of MM fonts appears as a dream solution.

Variable Font: creative interpolation

In September 2016, Adobe, Apple, Google and Microsoft announced the release of new specifications for the 1.8 standard of the Opentype format. This latest version corresponds to the incorporation of features specific to the TrueType GX format font variations of Apple. Under this name was already hidden a format capable of interpolation but reserved only for the Macintosh operating system.

The union of the four computer giants will allow a better development of this new format: indeed, almost all the computers in the world will be able to manage the new format in a transparent way and the deployment in the professional and personal era is ensured by the giant of desktop publishing and the net.

The Variable Types in this new Open Type format allow:

• guaranteed compatibility between operating systems;

• a better distribution of the extended typographic families;

• better compression of the total weight of the fonts: a family of 48 TTF files of 555 Kb is now replaced by a single file of 66 Kb, which is a compression of about 88% of the total weight;

• better control of typographic styles;

• management of a responsive typography, especially for online applications.

The axes

But what freedoms are offered to the graphic designer? Several types of axes are possible. 

First of all, 5 basic axes are recorded in the Variable Font code terminology:

• Weight (wght) (Present in pretty much all of Blaze Type's multiple axis fonts)

Style selecting the weight, parametric choice. The wght classification in terms of mathematical value has been defined. Regular is equal to 400, Black to 900, etc.

• Italic (ital) (Blaze Type usually goes with a different axis so users have wider range of possibilities)

Style selecting the Roman or italic, binary choice. It goes from 0 to 1.

• Slanted (slnt) (Check out Sigurd)

Style selecting the vertical axis, parametric choice, the range being linked to the angle of the font.

• Width (wdth) (Check Slussen!)

Style selecting the width, parametric choice. Defined by the different kind of width. Normal's value is usually equal to 100.

• Optical size (opsz) (Blaze Type's favourite! Joly makes uses of it)

Style selecting the optical correction, parametric also. The optical size values are linked to the point (or pixel) size of the font. A variable font making use of it will enable you to have a choosen design for a specific size.

Any kind of axis are possible.

They are called Custom Axis, they all vary depending on the designer's choice but allow a grand flexibility both in design and use of variable fonts

• INKTRAP (INKT) (Check Area!)

Inktrap, a custom axis we created for Area. It allows you to navigate between Normal styles to a fully Inktrap'd one!

Learn more:

Adrian Frutiger on Indexgrafik (english only)

History of variable type, part 1 and 2.

Short presentation of the Variable font.

Google font entries on Variable fonts.

About the author

Sébastien Hayez was an art director and graphic designer before becoming an art teacher and an independent researcher in the field of graphic design and type design history. His main topics are the history of logos, square books, modernism, and the minimalist italian designer AG Fronzoni 1923-2002. You can read his contributions in the pages of magazines such as Etapes, TheShelf Journal, Pli, Kiblind, Yellow Submarine, Fiction, or listen to his lectures for Les Rencontres de Lure or Fonts & faces #7.