Reading Distance and Variable Fonts
by Andrew Johnson and Erik van Blokland
Type, in its ubiquity, has plenty of space to evolve. The reintroduction of sensors and augmented / virtual reality open up new ways to experiment with context aware typography and letterforms. By understanding a user’s reading distance in their environment and taking advantage of font interpolation, we can communicate in new ways.
As an example, words can smoothly adjust their hierarchy and adapt to a reader’s proximity. Erik van Blokland and I built a fun experiment that shifts its typographic hierarchy based on a viewer’s proximity to an object.
Through interpolation, text can shift forward or backward smoothly to highlight pertinent information for a particular distance range. In this case, ‘Santa Fe’ is most prominent with ‘½ miles →’ coming into view as someone gets closer.
Long and Short Distance Relationships
Scale plays a key role in determining typographic hierarchy as well it’s meaning. At a macro level, graphic designers construct hierarchy on a page through considered use of scale which is inherently tied to distance. By giving elements a distinct order, designers can guide users through complex tasks or sets of information. Size contrast also provides visual interest and can lead people’s eyes around a composition. The MIT Technology Review site demonstrates a clear and interesting hierarchy reflected through its typography.
Here, larger type marks the most important sections and features while smaller sentences wait on sideline to be read. Each of these elements are considered in relation to the rest of the design, and work together to support a clean and engaging experience.
Typographic features also determine how a typeface performs and communicates. Decisions made by a type designer around genre, vertical stress and font metrics all work together to achieve a design goal. Some type designers will consider different optical sizes that account for their font’s use at different reading distances. These font families will include weights like caption/micro, text, and display that are designed specifically for use at respective sizes. These fonts balance readability and legibility at smaller sizes with the collection of subtle details that give the font a unique voice. Miller, by Matthew Carter, is an example of a font family with optical weights:
In this example Miller Text holds up better at smaller sizes despite coming off as a bit reserved at the large size. Conversely, Miller Banner retains its crisp details (higher stroke contrast and more ornate curves in the case of the ‘R’) that give Miller it’s characteristic display elegance. At the far ends of the spectrum, small type reads as texture / color, while oversized type gives way to forms and shapes. Somewhere in the middle, it becomes legible and readable as written word.
While each set of text in the triptych contain portions of the same two words, they communicate different things. Type designers balance these concerns while they craft a font. While designers shouldn’t always follow the type designer’s intentions around how a font should be used, they should be eager to take advantage of size specific font weights / styles that can really shine when used correctly.
Future font formats
While these font weights are readily available, current technology keeps them isolated as individual font files. An entirely separate font must be loaded in order to make adjustments based on a user’s context or environment. Variable fonts aim to remedy this through live font interpolation, allowing type to adapt its weight and style based off factors like container width and height or reading distance. Proposals to standardize this are in progress. In the meantime, we can experiment with new methods of distance-based interpolation and play with type in 4-dimensional spaces (the x, y and zed axes along with time).
Spacial/context aware design has already been explored across a variety of mediums and applications in subtle ways. Responsive architecture and interactive/installation art can react to people in their environment. Virtual reality games build their own space for the player instead and know everything about the game ‘world’ by proxy. Other combinations of sensors, like Apple’s True Tone adapt an interface’s color to the user’s surrounding ambient light. iOS itself automatically zooms when the user focuses on text input with a computed font size of under 16px. Type experiments like Marko Dugonjic’s responsive typography demo even adjust font size based off of the user’s viewing distance by using face tracking.
Exploring Distance
We can combine these approaches and experiment with type through new mediums. While AR may or may not be a passing trend, it gives us a glimpse into the possibilities of type in new context aware spaces. Things like world location, acceleration, reading perspective/distance and ambient light all become accessible to the designer.
Our experiment consisted of interpolating type based on a reader’s distance. As a user approaches an interface or signage, they can be given relevant information based on their proximity to the subject. In this case, we played with signage highlighting a city name and shifting to the miles-to-destination details as readers approach it. The proof of concept uses a simple AR setup in the Unity game engine. Erik drew two masters as SVG which we translated into polygon meshes for use in Unity.
Once the points are in a mesh format they are programmatically modifiable and can be easily interpolated. Using a web or phone camera as a viewing window, a code library finds a marker to overlay typography over. Once this marker is found, the relative distance from the user to the marker becomes available. This distance value can be fed into the interpolation scale which linearly interpolates each contour shape.
The result is an interactive type lockup that smoothly changes the hierarchy of it’s information as you approach or move away from it. We had some fun with it!
The ‘Santa Fe’ is most visible farther away but interpolates to the second master with the prominent ‘½ miles →’ as someone get closer. In this proof of concept interpolation happens within the range of around a meter. Other things can also be considered, like accounting for perspective or non linear interpolation for easing and animation as the text is approached.
Experimenting and going the distance
Whether you subscribe to the optimistic or dystopian outlook on context aware interfaces and typography, there’s plenty of room to experiment. Signs for airport sections and gates could shift to highlight gate numbers, airlines, and walking time as people move closer. Restaurant signs could reveal menu items upon closer inspection. Interfaces in games could adjust their typography’s hierarchy based on danger levels and proximity to a threat. This area, where distance in a physical space can directly influence the behavior of type and interface, is open for experimentation. At this overlap, lets responsibly design for curiosity and exploration.
Other Inspiration
- El Lissitzky’s Proun Room reconstruction
- Felice Varini’s anamorphic compositions and other designers’ anamorphic typography
- Robin Rendle’s article The New Web Typography
- Erik van Blokland’s Action Condensed typeface and Responsivelettering.js
- Craig Winslow’s Light Capsules
- Nick Sherman’s and Chris Lewis’ Size Calculator
- Viljami Salminen’s article on Typography for User Interfaces
- Tobias Frere-Jones’s typeface mechanics, #1 and #2
