Design Space No.1 – R & D investigates the history of variable fonts and the stages undertaken to bring the concept to its current place.
This design space incorporates conceptual information, as well as detailed explanations of the traditional typographic interpolation model. This concept builds the backbone for how variable fonts are interpolated in real time on the web today.
Traditional
interpolation
Type designers use the process of traditional font interpolation as a means to produce new, intermediary fonts from a given set of master fonts. Master fonts are representative of the fundamental design of different points within individual font families, which ultimately characterise any given family. Maths is utilised to identify the ratios of space between these points, allowing for type designers to use interpolation to derive a limited continuum of font variants. This concept can then be further extended to webfonts, servicing the desire for interpolating font variants to be accessible to web users.
For example, the ‘VARIABLE FUTURES’ glyph set demonstrates the possibilities of interpolation by the use of light and heavy master fonts. While only five variations are depicted in this example, the interpolation ‘limited continuum’ essentially allows for any number of poles and axes, coupled with combinations of properties. In this case, interpolation occurs for everything at once between only two poles.
A Restrictive
Medium
Type is constrained by the medium it exists in. Over time, the design and setting of type has been influenced by both phototypesetting and moveable type. However, in current times, the innate responsiveness of the web has made the existence of relative units and increased flexibility of elements essential for type setting and design. Communication between websites and the server is used to make increasingly significant adjustments at particular breakpoints in a discrete manner (ie. not by use of a continuum).
Rather than being treated as an integrated, continuous component of responsive design, fonts themselves are also treated as needing to be loaded in a set manner at certain breakpoints (in a limited, discrete manner). The integrity of font styles is compromised when font weights are substituted with media queries, further extending the compromises made inherently in design with the implementation of breakpoints.
Breakpoints imply the occurrence of design trade-offs, for example the collapse of navigation tabs under a single icon. Likewise, the same trade-off occurs in the case of font files, when they exist without the capabilities of live webfont interpolation.
A Restrictive
Medium
Live web interpolation
Instead of fonts being exported as separate file sources, live web interpolation involves the interpolation of fonts ‘on the fly’ inside the browser. This enables fonts themselves to respond to the contexts that constrain them. Since type reflows under such circumstances, and is at least somewhat independent of a responsive design layout, the setting of abrupt points of change is less necessary. Type can be adapted to the design by the use of bending points, rather than just breaking points, which means that type is not constrained to adhering to specific font weights/designs.
Variable fonts grant single font files the capacity to be infinitely flexible in terms of weight, width and additional attributes, yet without file size changes – a revolution that has been developed by Apple, Google, Microsoft and Adobe.
Designers are able to interpolate either individual glyphs or entire glyph sets by up to 64,000 variable axes, with the ability to define specific instances as they please (such as ‘bold’, or ‘condensed’). Such advancements (facilitated by these four companies and individual contributors) have led to the progressive development of OpenType Font Variation technology. Interpolation technologies first emerged in the 1990’s from individual, competing software companies, but OpenType variable fonts constitute a collective, unified effort.
While the capacity for variable fonts exists, developments are still in progress. Designers need to produce and then offer variable fonts, complex rendering engines must be developed and tested, then browsers and software must support such rendering engines, and design and usage of these fonts must be defined with appropriate values and properties as per CSS standards. OpenType Specification version 1.8 incorporates the full technical specification for OpenType Font Variations.
“Imagine condensing or extending glyph widths ever so slightly, to accommodate narrow and wide viewports. Imagine raising your favorite font’s x-height just a touch at small sizes. Imagine shortening descenders imperceptibly so that headings can be set nice and tight without letters crashing into one another. Imagine this all happening live on the web, as a natural part of responsive design.”
Variable Fonts Realised
OpenType 1.8 introduced a standardised variable font functionality to the web. Designers and developers alike were now able to take (near) full advantage of the design space.
As new a technology as it is, the variable design space is a concept that many designers still find confusing; this simple example below demonstrates how weight and width of a variable typeface can operate at different points of the design space. The x-axis defines character width, while the y-axis interpolates character weight. One of the variable font specification’s biggest drawcards is that both of these properties (and more) can be interpolated simultaneously.
Key
benefits
Loading times
Low Light Adaptability
Responsive Potential
Distance Awareness
Self iterating design
Creative Freedom
Sound Sensitive Type
Screen Resolution
Having to download a font from the server that is not on your device takes time, especially if there are a number of different typographic font styles loading all at the same time on a single page. Variable fonts allow the data necessary for theoretically infinite font variations to be stored in one file. This allows for fewer font files with an increased level of variability in less time.
Variable fonts provide the designer with the ability to allow for changes in light intensity. For example, for users moving between high and low light areas, variable fonts can react by adjusting selected axes such as stroke contrast or optical sizing to give the user the best reading experience possible for that particular environment.
Web typography is no longer restricted to an anchored CSS framework. Responsive layouts now have the chance to level up and incorporate creative typographic detailing unseen on the web until now. Layouts are no longer restricted to a small range of master fonts, defined by the type designer.
Variable fonts also have the potential for user distance awareness adjustments. Devices with the correct hardware (proximity sensors) are able to adjust key variable font axes such as weight and width to allow the user an increased level of legibility from a distance further away from their device.
Variable fonts also open the potential for intelligent websites that self iterate and make typographic and layout adjustments based on individual users. A selection of metrics could be used by the website to rapidly test potential improvements to the page over a period of time. These results could then be implemented by the website to give optimised individual experiences.
Theoretically, variable fonts give designers an infinite number of possible variations. They allow designers a level of typographic freedom in both traditional print and digital based mediums unseen before. They allow for detail adjustments such as slightly condensing the width of a typeface for narrow columns or subtly tweaking the weight of a thin typeface when used on a black background.
More creative avenues are now in reach as well. Subtle or bold adjustments can be used in conjunction with sound as a creative tool. This could be as subtle as small changes in an axis used with sound for micro-animations in a mobile UI (User interface), or for much bolder uses such as creative axes adjustments in performance arts and set design.
Type on low resolution screens appears differently than it does on a higher resolution device. The smaller the type size, the fewer details are noticeable by the viewer. On these lower resolution devices designers will still be able to maintain legibility. Variable fonts with optical size axes adjustments will be able to counter legibility with an increase in optical size.