Variable Fonts

Working on the edges: the interpolation

When designing a 9 styles type family, did you think type designers draw all glyphs in all instances? Considering the amount of work and the risk of inconsistencies, there is a more clever way of doing: using interpolation. Only the heaviest and the thinnest shapes are drawn, then smart scripts and pieces of softwares calculate in between forms. It doesn’t necessarily make the work faster, because drawing interpolatable glyphs requires more attention and crafting; but it surely make the results cleaner and more even.




Building a land instead of an island: design-space

Since type designers begun to work with interpolatable masters, they started to think directly the design in term of family, and not just style by style. It’s not only the Regular that is taken into account, but the multitude of possible shapes in each weight, width, optical size, etc. That’s what we call design-space.


Don’t think about one point, consider the entire line

In fact this is so important in the design process, that the new OpenType specifications (the current font format specifications) enables the embedding of whole design-spaces inside a single font file: that’s what we call variable fonts.

Within a variable font, the styles are blend together, and using sliders or direct invocation of instances, designers can access any point in the design-space: weight, width, contrast, etc. between 2 or more masters.


So what?

One might ask, what is the use of all this? In addition to making font families lighter in terms of disk space, it also enables a finer level of choice for graphic designers; and it makes actual responsive typography possible. Imagine for example, type that becomes more legible as the size decreases, or more detailed as the size increases.


Now where?

Useful it is, and the new variable format is already spreading though applications and web-browsers. Adobe Illustrator and Photoshop CC begins to support it, as well as the latest version of Safari and Chrome. On the CSS side it’s very easy to use with a new « font-variation-settings » style tag allowing to select any point in a font’s design-space. See a live example of a responsive web-page using variable fonts here.