I’ve typically been using ready-made fonts to create font-based visualizations in this blog. However, sticking to ready-made fonts means that you get only one slope angle for italic, a few levels of weight, maybe a condensed version or maybe not. Instead, the ability to quantitatively adjust font parameters such as weight, width or slope angle sounds far more enticing for visualization.
The good news is that fonts can be manipulated by the font user, and that there’s two different technical ways to achieve this.
Parametric fonts are programatically defined fonts. Parameters, such as x-height, stroke width and letter width are numeric parameters that can be set and then a new font generated based on those parameters. One early example of parametric fonts is METAFONT by Don Knuth. He enthusiastically claims:
“Infinitely many alphabets can be generated by the programs in this book. All you have to do is define the 62 parameters and fire up the METAFONT system, then presto – out comes a new font of type!” – introduction to Computer Modern Typefaces, 1986.
Knuth has a lot of low level parameters, which affect only a few characters such as dot-size (for the dots on i and j), ess (for the stroke breadth on s), beak, apex correction and so on. Here’s a snapshot showing some of his parameters, which looks much like an “anatomy of type” illustration:
Some of the font parameters in Knuth’s METAFONT.
Prototypo.io is a modern incarnation of parametric fonts, with click and drag sliders, interactive previews and feedback when you go beyond the expected parameter ranges, all in a browser. The starting point is a ready-made font with manipulation of 30ish parameters, such as as x-height, width, thickness, slant, serif width, serif height, bracket curve and so on. Quickly you can create a low-x-height, heavyweight, tightly-spaced, flared bell-bottom font. However, shifting some parameters into the redzone results in a fun font that isn’t particularly legible (e.g. a, 5, 0 are filled in):
Manipulating Prototypo serif parameters into the red zone to create a heavy bell-bottomed font.
Quite a few of the font parameters are mutually exclusive. So they can be combined together to create combinations in a visualization to represent different data variables. Here’s one of Prototypo’s fonts where I’ve created 8 variants: a boxy, heavyweight, condensed, bulgy serifs, wide serifs, low x-height and default plain. All the pairwise combinations are shown below:
Pairwise combinations of eight different font variants.
The parameters have ranges of values, so instead of only binary settings (e.g. normal weight and heavyweight; normal x-height and low x-height; etc), a range of parameters could be used. Here’s a font with five different levels of x-height and five different levels of curviness (think of curviness as an ordering from angular to rounded to boxy):
A font with 5 levels of weight and 5 levels of curvature.
One problem with parametric fonts and browsers today is that each parametric variant needs to be saved in a font-file: the 5 x 5 x-height by curivness font requires creating and saving 25 font variants, which is tedious; and then all these variants need to be loaded into the browser, which uses a lot of memory and can be slow. If we also want to add 5 weights, 5 oblique angles and 5 widths, we’d need to generate and save 5 x 5 x 5 x 5 x 5 = 3,125 font variants. This is problematic for visualizations that might want to encode 5 different data attributes each with 5 different levels into labels.
Variable Fonts, a new standard with OpenType 1.8, provides an alternative for font users to interact with font parameters. Variable fonts provide linear interpolation between defined extremes created by the type designer. Here’s a font with variations in width, weight and optical sizing (from John Hudson’s Variable Font blog post). Green letters are defined by the font designer, orange letters are interpolated from these.
Variable font illustration indicating interpolated fonts (orange) from defined fonts (green).
Variable fonts are very new, so it’s exciting to watch the evolution including browser support coming out.
Parametric and Variable Fonts in Visualization
Parametric fonts and variable fonts are interesting for data visualization for a few reasons:
- You can potentially access low-level parameters, such as x-height, that you can’t normally access.
- You have quantitative access to each dimension in a font: you’re not limited to only a few weights or two widths.
- And these parameters can be combined together in new ways.
So what? Here’s a quick snap of the introduction to Mr. Weston from Chapter 2 in Jane Austen’s Emma. Interesting uncommon words have a high x-height while boring frequent words have a low x-height and inbetween words have an inbetween x-height:
Words with higher x-heights are less common words in English.
Not that this quick example is particularly readable, but seems reminiscent of some of the formatting in Ronell’s deconstructivist Telephone Book:
Font size varied to create a rhythm separate from words in Ronell’s Telephone Book.
Ronell’s formatting isn’t constrained to whole words but runs across sequences of letters creating a rhythm separate from the text. In general, being able to tweak and adjust font attributes opens up new creative possibilities and new kinds of data visualizations. Like Ronell, data visualization could apply font attributes like x-height, or width or curviness or other attribute to subsets of words. Suppose you had a dataset that indicated which letters in English words are silent – you could then draw words such that the silent letters are shown differently, say, with a low x-height:
Silent letters indicated with low x-height letters.
Those are just a couple of quick examples – many of the other font visualization examples in this blog could be adapted to better utilize some of these font parameters. And, of course, there are many other visualization possibilities yet to be considered.
Parametric vs. Variable Fonts?
So which is better – parametric or variable? I have used Prototypo and created a few variants and a few visualizations. I haven’t used variable fonts yet – but I like the specifications.
Both parametric and variable fonts have limitations. As discussed earlier, with parametric fonts in current technologies, a font file needs to be generated for each variant required, which means managing a lot of font files and dealing with inefficient use of application memory.
With variable fonts, however, the font user has to rely on all the variants created by the font designer. If no condensed/expanded variant was created by the font designer, then that axis will not be available to manipulate. Linear interpolation of shapes could also run into issues as well: for example, consider these three widths of Gill Sans (normal, condensed and extra condensed) – for example, the a and g completely change shape, the openings on S, 3, 5, get bigger, at some point the edges of the M start to slope, and so on. These sorts of sharp changes presumably won’t be captured in variable fonts. In theory, a parametric font might be able to have some rules to accommodate this, but that would depend on how complex the parametric design rules are.
Gill Sans in 3 widths. Note how heights and letter shapes change with increasing narrowness.
I’m looking forward to experimenting more with OpenType Variable Fonts: it could make font manipulation in visualization much easier to do. I’m hoping that variable fonts won’t go the way of multiple master fonts. We’ll need a couple things to happen to make sure that we have a solid foundation for variable fonts. First, we’ll need browser and application support – and there is already some indication that there will be browser support in Chrome. Then, we’ll need to see font families created that support variable fonts. Ideally, these variants won’t be restricted to typical attributes such as weight or width, but hopefully we’ll see variants that have multiple x-heights, or serif styles, or slopes or other parameters. Then, on the data visualization side, we’ll need to invent new types of useful visualizations that use these new font capabilities.
Here’s hoping that variable fonts will become a well supported standard.