As we design, we mark well traveled paths so we can quickly and efficiently find our way back. The points we set can create design spaces that are constraining or freeing, depending on where they're placed.

Responsive typography on the web today has a large impact on a site’s or app’s look and feel. At the same time, it functions as the primary vehicle for consuming content. Type imparts layout structure by necessitating readable columns set at certain widths while also reflowing independently of breakpoints. These sort of relationships leave a wide open space for responsive typography to grow through our design tools and our medium.

Design tools present a limited viewport of typographic possibilities

Design tool interfaces often provide a subset of functionality upfront to avoid becoming distracting from the main subject matter – the design itself. This is a natural pattern for more complex interfaces. The best design tools often present designers with a spectrum of options when the options themselves are continuous and relevant. Color pickers illustrate this well:

Color selection in Sketch.

Being able to move fluidly throughout a color space is much more efficient then picking colors one by one. If a user had to manually enter and assess each color the tool would be inefficient at best. Even worse – they could settle for something that’s good enough while overlooking better options. While this seems intuitive for color selection, we can apply a similar pattern to typography.

Unfortunately, interactions in current design tools prevent designers from traversing typographic options and relationships intuitively. Font selection is often isolated and hard to explore. Users can only select one weight at a time through unwieldy dropdown menus.

An implementation of font selection in Sketch.

While designers often see a font as a single design entity, this mental model doesn’t scale with font selection UI. Every single font variation (whether italic, extended, with small caps, optical, or just a separate weight) is either added to the already overloaded dropdown list or relegated to hidden OpenType controls.

There's no clear organization of fonts / font variations (one of the things Indra Kupferschmid conveyed well in her Typographics talk), let alone ways to interpolate between the provided options. Users can only look at a small range of non related fonts at a time. Alphabetical order is intuitive for seeking out specific font families but not for comparing and contrasting styles. If they’re not happy with how the font gets applied to their design, users have to back out completely and try selecting something new.

Being able to make everything in a design tool is different from being able to see everything. This is a balancing act. Variable fonts would allow designers to quickly explore and assess their range of options to make better responsive type decisions. Without line-of-sight to these features, designers can’t take advantage of them or license them for use. The Multiple Master and GX fonts that attempted to do this were before their time. Today, our tools are just as dependent on the medium, and the web landscape itself necessitates responsiveness.

Design tools place static points

Current web/UI design tools are great at making efficient, precise design strokes. This sort of fine grained control is what allows designers to freely define and adjust visuals. We’re accustomed to positioning fixed design elements at fixed sizes on fixed canvases and artboards. As we design, we often pick the best set of sizes based off a mix of data, content strategy, business goals and vested interests. Most tools today provide a set of default sizes to design for.

Sketch’s default device sizes

Illustrator CC’s default device sizes. What’s the distinction between Web Common, Large, and just Web?

While this is convenient, it only gets us so far. If you’re designing for any more than one platform or device, it leaves the in-betweens to guesswork and afterthought. Browsers have completely variable viewports and constraint that aren't reflected in static design tools. Rendering, relative / percentage units and font loading also behave differently in a design tool than the final environment.

Because of how ingrained typography is with its medium, it’s important to consider how our tools can help us design responsively and natively from the start. A number of tools explore fluid / constraint based layouts:

  • Fluid for Sketch – Constraints and artboard recalculation for Sketch
  • Framer – A prototyping tool focusing on high fidelity interactions.
  • Macaw – Design tool featuring breakpoints
  • Straight HTML/CSS/JS – Flexbox, Calc() and viewport units especially.

Making our points dynamic

Fonts are software. Wrapped up in a font are the type designer’s/developer’s design considerations (aesthetic choices, OpenType features, metrics, hinting, axes, etc). Despite this, glyphs are relatively static and can’t talk to their environment.

Beyond the context of our tools, variable fonts aim to remedy this by allowing us to deliver text customized to our reader’s context. This can be based on any number of factors like container width and height to environmental inputs like ambient light and viewing distance/zoom settings. While there are a number of ways to access and manipulate font data in Javascript, a designated font format is the most robust way to accomplish this. Proposals have been made to add GX font variations to OpenType through existing font tables.

Enabling our tools and our medium

No web technology is immune to death by 1000 compromises.

When separated from designers’ craft and rigor (both type designers’ and web designers’), variable fonts are a shortcut to create mediocre type and interfaces. In a similar vein, overly parameterized fonts lack a rich designspace and are devoid of a type designer’s expertise. Another sad alternate font-universe would have variable fonts seeing action only as another compression algorithm. Conversely, variable fonts provide diminishing returns if the designer isn’t present to incorporate them seamlessly into her/his design.

At their best however, variable fonts can give designers a new vantage point to see the inbetweens, spaces and relationships that aren’t normally visible. This in turn enables them to provide people with the best possible responsive reading experience that scales across contexts. It also opens up new avenues of expression through interaction and animation.

We need tools that increase designers’ awareness of variable fonts and allow them to easily take advantage of the structured flexibility they provide. There are a few interfaces exploring this concept, including the preview pages for David Jonathan Ross’ Input and Adobe’s Acumin by Nick Sherman and Bram Stein.

This is also something i’m experimenting with in Typeshift, a responsive typography design tool i’m building. The user interface below shows how variable fonts can allow for a more natural method of font selection. Here, we’re setting Gimlet Text (also designed by DJR) and fully taking advantage of its wide range of widths and weights.

Typeshift simulating variable font selection of the typeface Gimlet designed by DJR. Progressive disclosure is used to show a 'font width' axis as it becomes available.

Web native tools like these take steps toward providing ways to easily traverse fonts and their responsive relationships. A number of other experiments – some of which that were inspired by Typographic’s Typelab – have also explored how variable fonts might perform:

We can support and design better tools while we redefine our medium. As we continue to move screen typography forward, lets make sure variable fonts open new design spaces for us to explore instead of constraining us to a select few ways of thinking. We don’t have all the answers, but lets start by putting down some points.

Further reading/listening