Graphical UI to Control Variable Fonts

We listed variable fonts among the 2019 UX design trends. Time to extrapolate. The reason why variable fonts are not yet as common as they should be is that there is no universal way of integrating them into the UI.
Designers have already requested the variable font functionality to be implemented in Figma which we believe will eventually happen. With that said, it’s important to understand why variable fonts matter and what they can bring to design on different occasions. We’ll go through the reasons they exist, tap into how they work, go over some cool examples, and see how we can integrate variable fonts into real interfaces.     

The shape & glyph gap

Responsive design has flexibility written all over it. Yet, one of the core assets of web design and copywriting – the fonts, is restricted to thorough but static expression. Most typefaces commonly used in design are the residuals of the outdated design principles.
Early websites used tables to place text and pictures into. That made sense because such structure emulated the traditional printed media. As things grew more complex, designers started using simple blocks stacked one over another alternating text and Flash elements. With the advent of the CSS, designers received more freedom which then led to flat and responsive design.
As web design kept evolving, typography roamed on its own. It was more of in an aesthetic realm than engineering. Designers learned how to create fluid designs but still resorted to rigid typefaces to fill the text blocks with.

Shapes morph and adapt to the context of use while glyphs remain within the predefined limits.

At some point the typefaces got hoary and designers started using custom typography which immediately lost flexibility because the constraints of a custom font can’t be breached.

The stopgap

Responsive design forced font creators to take action. Three faces were not enough. Type designers responded with font families. Font families are variations of the same font with improvised size increments. The bigger the family, the more flexible the font and the more possible use contexts it can cover. The biggest font family we know is Sharp Grotesque with 259 faces. That does offer versatility but imagine storing a hundred families like this. Nightmare.

 

Font families though provide a certain deal of flexibility, turn a type library into a behemoth.

Guardian Agate Sans Font

In order for the families to be displayed the way they’ve been designed, they also need to be present on the devices they will be accessed from. And this is the least controllable thing you can rely on. Any type of pre-installation is a hurdle. In 2019, if the UX is not as smooth and the processes in the background are not concealed, the website will be dismembered.   

Why variable fonts

The static fonts first started being used to create responsive fonts around 2014. Nick Sherman and Chris Lewis founded the FTW (font-to-width) project to adjust the multi-width and multi-weight font families to snugly fit the responsive containers. This gave a tremendous push towards the variable fonts.

The Guardian uses a huge family of fonts developed specifically for The Guardian and called …Guardian. Currently made up of “7 related families to fulfill every possible typographic need throughout the daily paper: serious news headlines, expressive features, readable text, tiny financial listings, information graphics, and everything in between.” That’s 640 something fonts and five year’s worth of work done by two extraordinary graphic designers.
If you are not a typeface specimen chances are, you’ll hardly notice much difference. The hierarchy and the dynamic of the content will be placed on you subconsciously because of the authority of the paper and the number of talents it can employ. If we are talking a smaller scale, it makes sense to optimize the time spent on laying out the text.
Variable fonts narrow down the superfamilies to just two:

By introducing variable fonts to the Guardian publishing process, the publication can maintain the family connections of the typefaces but dramatically simplify the process of learning which specific face to use for different chunks of content. Instead, designers will have to learn the universal principles of typesetting applicable for design in general.

We can’t rely on the flexibility of variable fonts alone. In fact, working with variable fonts requires more overall design proficiency than font selection.

Variable fonts are the non-discrete values interpolated between the extremes or masters. They change within the multidimensional space with no steps. Like in animation, variable fonts are twinning between the keyframes. Masters can be unlimited and so are the faces of the type. A variable font requires less bandwidth, fewer server requests, loads faster, and gives more freedom for type-based designs.

In time-deficient conditions, variable fonts are extremely helpful. As opposed to the traditional fonts, variable fonts only need a set of coordinates and the movement instructions for every glyph. Letters can move across multiple and custom axis which morphs the text in a way a responsive web layout would. This, however, has to be considered in conjunction with the legibility principles of every typeface. We’ll get to that.

Variable fonts can occupy the entire design space available. Multidimensionally and infinitely.

The linear interpolation of variable fonts also opens alternative ways to render animation. Often times, designers have to hold back on animation because of the loading time, frame sizes, and connection issues. With variable fonts’ capabilities, and animation like this

can be implemented by a font that occupies 4KB of disk space plus a couple hundred bytes of HTML. This is just one of the opportunity directions Axis-Praxis has to offer via variable fonts.  

Legibility

Different printing conditions affect the legibility of a typeface. Granted, legibility of the text is the main goal of most writing content, we should do our best to maintain it by increasing the size and the accuracy of the glyphs. However, increasing space is not always an option. Newspapers have to stick to the same format. Sometimes you can solve that by straight text editing, adding an extra page or decreasing the imagery.
With digital media, it’s more complicated. The manual fix does not work for responsive design. We can’t edit the content based on the screen resolution. Often times mobile layouts suffer because eventually text eats up all the space and forces the images out.
This is The Verge on the desktop and mobile resolutions:  

To be legible, the letters have to remain the same size regardless of the screen size.

Optical compensation

To provide the same experience across multiple device resolutions, we have to change the typefaces, compensate the environment through extra legibility boosters. Traditionally, typographers used the concept of optical sizes to capture the legibility of all faces of the same type size. In digital, an optical size axis added to a variable font provides optical compensation in a size-specific condition.
For example, Benton Modern has three optical sizes and 48 styles and four widths of display styles. Optical sizes are calculated mathematically and applied depending on the screen resolution and text container size.

The font changes to increase legibility as the screen gets smaller while keeping the same look that was originally selected for the design.
When a typeface has optical compensation, a designer does not need to know which font is appropriate at which specific place. Usually, that’s done through trial and error. If variable fonts have compensation in the formula, the font will adjust as you scale.
At eight pixel x-height, it’s still legible.

Optical compensation is a mathematical parameter based on the human eye’s perception.
Designers often play Marco Polo searching for this effect when in reality it is an essential attribute of the variable font principle.  

Variable font controls and the UI

To figure out the ways to control variable fonts, we need to understand who will use them. In our opinion, everyone who has writing as part of their job or ordinary life is a potential variable font user. It’s not just a design tool, because we solve much more problems through text. The design is secondary where the message is primary. But no doubt, it’s the design tools that will bring variable fonts to the masses.
Paired with the principles of meaningful writing, variable fonts can change the way we read the world. But as more people will be getting access to them, the more chances to make a wrong choice will be opening as well.

Variable fonts are the area of responsibility of those who design for designers.

Depending on how they implement the controls, variable fonts will either suffice or vanish like another fad. This is directly related to the amount of automation and choice the users will get. The more unobvious options we offer, the less impactful becomes the process. Finding the balance between the manual and background settings is the key to developing a viable variable font control interface.
Since it’s all about the axis, it makes sense to differentiate which of them the users need in the front to take advantage of the freedom and which can be a part of the computer algorithm in the back.
Some of the fonts at axis-praxis feature up to 15 adjustable axes of one variable font.

In order for people to not eventually forget the primary goal of the text and not get lost in the intricacies of pantography, they need to see the changes they are applying but also feel safe knowing that the AI will protect them from making bad choices.
One of the obvious solutions is to make the control visible and map the changes across some sort of an intuitive chart. Andrew Johnson put together a list of UI elements that can be used for variable font control.

Underware produces variable fonts and offers a downloadable custom control center which is designed around the knob concept.

The problem with these is there is no clear message showing that you are doing good. You might deliberately deflect to create a certain effect but the general legibility-based guideline has to be present at all times. One of the best graphic ideas so far is done by Rasmus Andersson.

It allows a broad view of the typefaces in different screen sizes while analyzing the user’s actions and evaluating them against the green “standard” which is proven and tested best setting for a specific case. It still uses sliders but the curve is a graphical element that lets you intuitively understand how far you are digressing from the paragon. It won’t hold you back but it won’t let you get carried away too.
We see a usable variable font interface as a two-layered structure. The first layer is a simple two- to three-axis control with most of the settings visible and clear. Such UI won’t intimidate with the number of settings available but will provide tangible flexibility in use.
The second layer is a pro level area. Here you can put all sorts of variables affecting the font, including the emulated physical environmental conditions and so on. It’s important to maintain a certain deal of untouchable parameters based on common knowledge, and aesthetics.

After all, it’s not overindulgence that a variable fonts tool will be appreciated for but the anticipatory help and safety it can bring without taming a designer’s creativity.

So far, there are no viable universal UI principles for variable fonts. But eventually, they will make their way into mainstream design and from there on to Google and Microsoft products as well. The quest goes on.