User Interfaces for Variable Fonts

The tools we design with have a unique effect on the way we work, constraining and empowering us while we explore, examine and create. Variable fonts give us a new, wide open typographic space with which to work. Instead of prescribing value to individual UI elements in a vacuum, we should take a hybrid and calculated approach to variable font interfaces. How do we structure our design tools to adapt to the new advantages variable fonts provide us with?

Despite being ahead of their time, variable font precursors—Multiple Master and GX—didn’t see widespread adoption for several reasons—one key reason being the lack of effective user interfaces that could communicate their creative utility to designers.

Since their introduction, variable fonts have moved forward quickly, landing with various degrees of experimental support across major browsers. With this comes the exciting ability for fonts to responsively adapt to different layouts and context. While responsive design has become more standard, effective variable font user interfaces have yet to be adopted.

A number of approaches can make variable fonts (which can house effectively any number of variations) easier to understand and use. Through design exploration and looking at prexisting examples we can see how each UI element has different benefits and drawbacks. We find that few patterns should be applied to every case.

Enabling Variable Fonts#section2

Within our design tools, variable fonts present a unique challenge, allowing users to select and change different properties of the typeface that are exposed by the typeface designer. These changes occur along an interpolation axis—or a line that reflects variation values of a font:

A variable font can have any number of axes, but these can generally be reduced down to a few commonly used axes mostly likely to be used for Responsive Design. These default axes are called registered axes in the spec. Each one has a different set of use cases:

• Font Weight – (wght): For adapting font weight to the container size, the weight of other elements, changes to hierarchy and screen resolution
• Font Width – (wdth): For fitting the width of the typeface to the width of a container
• Font Italicization – (ital): For changing how italicised the type is
• Font Slant – (slnt): For changing how oblique the type is
• Font Optical size – (opsz): For adapting to container size, font size and adjusting hierarchy and typographic color

These axes take advantage of much of the layout-based adaption variable fonts provide. Some of these concepts are best illustrated in Erik Van Blokland’s responsive lettering project:

Along with some of the amazingly beautiful Type and Media work to date:

In these examples, the glyphs’ optical size, weight and width shift at the same time as you resize the window. While a large portion of variable font axes directly correlate to layout, any number of arbitrary, non registered axes can also be created by the type designer. These can be for any type of change to the typeface in addition to interacting with the layout. David Berlow’s Decovar ornamental typeface is an example of this at one extreme.

Decovar sports a wide number of settings for adjusting the font’s decorative terminals and skeleton of the font. The limit here is the type designer’s imagination.

New Spaces#section3

Variable fonts carry with them a broad range of possibilities and can open up entire designspaces of creative options to type, graphic and web designers. These aren’t human readable at first—they exist as mathematical representations. However, there are proposed approaches to help us visualize and manipulate variable fonts. By exploring user interface patterns, we can better understand how to illuminate the exciting spaces within a variable font. At its foundation, this involves making variable fonts aware of their context.

Mapping UI: Context#section4

Before looking at UI, it’s worth noting that variable font axes can be directly linked to a wide range of inputs. These can be any combination of sensor readings to controller inputs and environmental signals. Certain registered axes however, make the most sense for responsive design and HTML/CSS/JS. A font’s width and weight axes are directly related to the container a set line of type can fit into. Variable fonts are able to adapt to the size of their containers—either filling them completely or at a specific set proportion.

A progression of work over the years has led to fonts adapting to fit their container. Paravel’s FitText and Zach Leatherman’s BigText were early examples of scaling text to fit a responsive container. Nick Sherman and Chris Lewis’s Font To Width swapped the width and weight version of the actual font to adapt to the container. Much of Erik Van Blokland’s previous work and responsive lettering project crystalized the idea of interpolation for adjusting type to width, height and optical variations within responsive design. Laurence Penney’s AxisPraxis demonstration links weight and width to the size of the container itself, allowing people manipulate the textbox instead of the type directly. All these strategies point to type set in relation to its container.

Optical size variations can also be linked to font size, allowing important characteristics to shine at display sizes while minimizing details to ensure the font remains robust at small sizes. In 2013, Nick (with David Jonathan Ross, Frank Grießhammer, and Florian Hardwig) showcased this feature in Adobe InDesign.

This functionality outlined in inDesign is now available for variable fonts, allowing optical sizes to adapt in tandem with a user’s font size. Through techniques like these variable fonts can to adhere to layout / container dimensions, font size, and user context.

Often times however, a font itself needs to drive design and layout (in the case of most design tools like Sketch and Illustrator). In this case, we need UI to directly control the variable font. Interfaces rely on affordances to communicate to people how they work. UI and UX patterns carry a variety of assumptions people have built up over the years by interacting with similar controls—both physical and digital. We can break down some of these patterns and look at their advantages and disadvantages.

Mapping UI: Single Axis Controls#section5

Single axis variable fonts are the most straightforward and only require one control. Toggles, sliders and knobs are all well suited for handling single axes. The most elemental of these—toggles, can be used to limit options for the sake of clarity.

Toggles#section6

Toggles denote “on” or “off” or a single selection:

A toggle’s simplicity can reduce choices to options people care about—like toggling serifs on or off (where intermediate values are less important). Single toggle based selection menus have existed since the earliest desktop publishing interfaces.

Knobs#section7

Typically knobs communicate an amount of something added to a whole.

Knobs are less common in digital interfaces but can be found in software plugins for Digital Audio Workstations. Knobs have the advantage of being compact while having a longer control surface to house values in a given square area. Another interesting property of knobs is that they can be periodic—allowing values to wrap entirely around the knob control. Underware’s Zeitung Flex introduced knobs as a method for controlling variable fonts.

Because the visible control surface isn’t straight, digital knobs have more of a learning curve (pun intended). Most knob controls alleviate this by allowing people to brush up and down to rotate the knob after it’s active or has been selected. Unless they’re large enough, knobs can also be hard to use with touch interactions.

Sliders#section8

Typically horizontal sliders communicate a balance or equilibrium between a range of two values.

Horizontal sliders are a common UI pattern across the web and native applications. iOS makes frequent use of this interface element:

Digital sliders have the advantage of working similarly to the way physical sliders do and are easy to learn. Sliders map well to a range of two different values on opposite ends of a spectrum—users just pick a middle value. Because of this, sliders are intuitive for both touch and mouse controls—actions happen in a single, linear motion.

Typically vertical sliders communicate the amount of a specific value, sometimes in context with other values.

Vertical sliders are typically seen in audio applications where it’s most important to horizontally scan and compare the levels of neighboring controls. Most digital audio workstations use them for volume levels.

Overall, sliders take up more space, but provide a clear and precise method for picking a specific value.

Any UI element can be overused (sliders and knobs alike) and misapplied. Ultimately, application of single axis controls should be considerate of the design tool and variable font itself. One key consideration is how the interface scales to account for additional font axes. Slider interfaces have an advantage in this category by being able to unfold naturally to support a two-axis control pattern.

Mapping UI: 2-Axis Controls#section9

It’s common for variable fonts to have two or more axes. In these cases, a two-axis pattern can work best to avoid an overload of UI elements and give a designer better visibility.

Pads#section10

Pads typically communicate a field of options.

Control pads allow people to adjust two variable font axes at the same time. This pattern has been used in both audio hardware and software to control parameters along an X and Y axis.

Control pads are less common in digital interfaces but hold familiarity through analogous design tool patterns like color pickers, which also provide people with a field of options.

X/Y control pads help reveal a larger portion of a font’s design space. They lack the directness of sliders and knobs, but provide a way for people to easily traverse through combinations of font variations.

The utility of having each axis map to a single control or direction quickly diminishes as the number of axes increases. At this point, we find effectiveness shift from manipulation to visualization.

Mapping UI: Multi Axis Controls and Visualizations#section11

Fonts with three or more axes (variable fonts can have virtually any number of axes) are best served with different control and visualization approaches. Each axis can be represented mathematically as a feature or dimension. Fonts with a single axis map to a slider or knob while two axis fonts can take advantage of a pad UI. Three axis variable fonts can have their axes mapped to a cube.

At three axes, things shift away from UI towards more of a visualization approach, as effective digital omnidirectional controls are rare. Three and up, or N-dimensional font designspaces aren’t intuitive when mapped to physical space, so the best way think of them is as the amount of ingredients in a recipe. Take a cake recipe for example:

• 1 cup white sugar
• 1/2 cup butter
• 2 eggs
• 2 teaspoons vanilla extract
• 1 1/2 cups all-purpose flour
• 1 3/4 teaspoons baking powder
• 1/2 cup milk

Each one of these ingredients represents a different feature of the cake. When combined with heat, they work together to create the final cake. Variable font axes or features work the same way:

• 100% Font Width
• 25% Font Weight
• 5% Font Optical Size
• 10% Font Serifs
• 75% Font X-Height

People can adjust the axis postion (or amount of each ingredient) of a variable font, all of which have an effect on the final appearance of the typeface. Certain axes, like font width and stroke contrast may work together in parallel, while others, like x-height and font width may be more independent from each other.

Designing type with +3 Variations#section12

At a certain level of complexity—a design tool’s focus should shift to serve more technical users. Type designers have their own category of challenges as they design, proof and test their fonts with intricate design spaces. Some variable fonts may have axes that are not exposed to users. There are other strategies for visualizing complex variable fonts like these.

For this, we can look at the visualization of multivariate data—a topic that has already been widely studied. There’s a broad range of existing strategies, some of which can be applied to variable fonts. The following deck divides these strategies into several categories:

• Geometric projection techniques
• Icon-based techniques
• Pixel-oriented techniques
• Hierarchical techniques
• Hybrid techniques

By flattening axes, designers can see many aspects of a variable font at once. Star plots—an icon based technique—allow for the combination of multiple axes into a single chart.

Each axis extends from the center, with the sum total of a given variable font’s current settings making up the polygon shape. Other font instances can also be layered on top of the visualization with the abstraction of color.

Layers allow us to view the relationships between variable font instances. We can see how certain variable properties might be correlated with each other in a design space and between masters. Similar approaches, like parallel coordinates, are better structured to show relationships between axes.

Kai Chang’s talk on visualizing multiple dimensions with parallel coordinates provides a great primer on assigning data’s dimensions to visual properties and charts. Other approaches like Fontmap group things based off arbitrary features.

These methods help us make sense of large sets of information with lots of related variables. Ultimately, they work by limiting our field of view and changing the angle through which we look at a set of variations. Instead of trying to see everything at once, we can break things down into manageable slices. Good interface controls allow us to quickly change our viewing perspective and organize axes. This UI is just as important as the visualizations themselves.

Mapping Controls#section13

Variable font UI is most effective when it adapts along with the font. Thus, the more information a variable font can provide to the design program the better. Axes that are similar can be grouped together and collapsed under categories in the UI (for example, grouping axes that deal with serifs vs. font weight). Currently, there are discussions around allowing certain axes to be flagged (and ideally ordered and grouped) in order to intelligently reveal and hide advanced functionality through progressive disclosure within a design app.

What axes are revealed and how they’re categorized come down to a combination of the type designer’s intent and the user’s personal preferences. Both of these are relative but important. Web designers / developers may want certain types of axes for adapting the font to their responsive design. Type designers may want to limit the number of available axes to ensure consistency or simplify licensing. In other cases, graphic designers may want access to powerful, creative variable fonts with a large number of axes (for example matching stroke weight and serifs to the thickness of other graphic elements). Because of this, variable font UI needs smart defaults that responsibly translate the type designer’s intention while retaining ability for designers to make modifications.

In this line of thinking, every axis does not need to map 1:1 to a corresponding control. Multiple variable font axes can be assigned to a single macro control. On the font/type designer’s side, this would take the form as meta axes. On the interface size, this would take the form of assignable macro controls.

Macro controls are a common UI pattern in software synthesizer interfaces—they allow multiple parameters to be mapped to any combination of controls.

Mappable controls allow people to break up and organize a design space to fit their needs. In addition to giving users the ability to sort and power multiple controls, this method can help people discover relationships between axes. In this example, changing the font weight and optical size at the same time allow you to see and select the right balance of the two.

While the axes themselves are independent of each other, the visual outcomes they produce are intertwined. Font weight and optical size are both related to each other and should be considered simultaneously when designing. This swapping of axes is comparable to reordering dimensions (see the reordering section) in the parallel coordinate charts mentioned earlier. In both cases, the interface can provide a smart, opinionated organization and flexibly surface new combinations.

Dynamic interfaces for dynamic fonts#section14

Interfaces for variable fonts should adapt along with the fonts themselves. There’s no single static UI pattern that will work as the best solution for all variable fonts. Instead of debating sliders and knobs, we should be exploring hybrid interfaces that take advantage of what each UI element has to offer. Likewise, UI should be considered in the context of our design tools with the acknowledgement that it will change how we design, influencing our choices. This gives us a unique opportunity to further typographic creativity and utility.