Typography Workshop

Since the new Open Type format was released in 2016, variable fonts have been a rich area for design and research at Occupant Fonts. It’s clear that variable fonts offer new typographic opportunities, with sliders offering precise controls in wide range of axes. We share some work here that demonstrates some of these possibilities, including customized axes for branding, refined reading experiences for digital publishing, and the freedom to expand typographic combinations.

We are also curious about the ways in which variable fonts can be activated beyond sliders. What is most promising about variable fonts is not necessarily a new way to select a font style, a slider replacing a dropdown menu, but rather, the ability to programmatically specify a precise point in a font’s design space. We have been collaborating with designers to produce experimental web specimens that use variable fonts with fresh perspectives, using variability as a medium in and of itself. We’re excited to expand the possibilities of the variable font format as a new means to connect with text.

Branding

Built-in optical sizing for platform flexibility

Branding often features typography on all kinds of media, including large-scale signage, print packaging, websites, and social media. This requires a typeface optimized for different sizes, and a variable font with an optical size axis can offer robust legibility for multiple platforms with a single font file.

Custom glyphs as branding assets

Many design concepts leverage a unique glyph or decorative component, a fifth element, as part of the identity. Here, variable fonts can be an ideal format to express this unique element, as it could hold variations on a theme, be easily animated, and parametrized to combine with other parts of the brand identity.

Digital Publishing

Customized reading experiences for screens

Not only do variable fonts offer flexible tools for designers, they can also serve as tools for their audience. Websites and devices using variable fonts can provide readers access to the same parameters to customize typography according to their preferences.

Grade adjustments and refined dark mode support

Applications increasingly support “dark mode,” with white text on a dark background. However, typographic adjustments are less common. With variable fonts, we can fine-tune the behavior of text across various background colors for consistent legibility, such as with a custom Grade axis.

Device-width responsivity

The width axis is a standard variable that can facilitate designs that adapt across screen widths. As our landscape of device dimensions and resolutions continues to evolve, variable fonts can flexibly adjust to screens ranging from a wide-screen monitor to a compact mobile phone.

Type Pairings

Richly varied type palettes

Typographic designs often require a combination of voices. Whether these combinations play with tight similarities or dynamic contrasts, they often require nuanced typesetting controls for each typeface to thrive in their roles. Variable fonts greatly facilitate these relationships, tuning the width, weight, x-height, or other axis can help the font harmonize with the characteristics of another font.

Benefits in multilingual typesetting

Variable flexibility becomes especially useful when we need to combine typefaces in different scripts, each with a different texture and flows. Through the use of variable fonts, we have more opportunities to harmonize combinations of Latin and non-Latin typography.

Experimental Designs

Custom Axes

Most variable fonts come with standard axes, width, weight, optical size, slant, and italic, that provide access to aspects that have historically defined typographic families. Yet these stylistic variations are nothing new. Optical sizing, for example, was already built into the design of punch-cut metal type, and was a limitation of the digital format until variable fonts.

What the format now allows, however, is an easy way to define completely new, designer-defined custom axes particular to the font: these might be control over distinct typographic properties, such as x-height, grade, or contrast, or any abstract concept for expressive designs.

Data as variable input

Moreover, sliders are just a starting point in accessing properties of variable font formats: any form of data can be used to control the expression of a typeface, as the “input” into a variable “output”. This might be: forms of user input beyond sliders on the web, whether dragging, clicking, or scrolling; physical input encoded into data, such as audio, wind, or weather data; a live connection into any network resource. Typography can now respond to this very moment, as a performative medium over time. Variability can be “tuned” to anything that can be mapped to continuous scale.

There is a transformation that happens when type is printed on paper in ink; similarly, data is manifested as light on a screen with digital type. Now with the variable format, we have direct access to the underlying data source, a means to fluidly filter, expand, and immediately animate its luminous forms. Moreover, when we consider the screen not as a static substrate but an active interface, with contextual environments, external stimuli, or networks, we have infinitely kaleidoscopic possibilities for typography.