Designing Between Points
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:
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.
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.
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.
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.
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:
- Live font interpolation with svg – Interactive SVG headline interpolation
- Live optical logotype sizing – SVG logo interpolation of optical sizes
- Four master design space – Basic four master SVG glyph interpolation.
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.
- Variable Fonts for Responsive Design by Nick Sherman
- The New Web Typography by Robin Rendle
- Responsive Design: Patterns & Principles by Ethan Marcotte
- The Web’s Grain by Frank Chimero
- Declaritive Design Tools by Jon Gold
- Reactions to 95% Typography by IA
- Modern Design Tools: Adaptive Layouts by Josh Puckett
- Media for Thinking the Unthinkable by Brett Victor (Credit to Bianca Berning for the recommendation).