Live Font Interpolation on the Web
By Andrew Johnson
Our job is to give users the best experience possible—whether they’re viewing the design on a low-end mobile device, a laptop with high resolution, or distant digital signage. Both poorly selected and slowly loading fonts hinder the reading experience. With CSS @fontface as a baseline, fonts can be progressively enhanced with interpolation where appropriate. Users on less capable devices and browsers are best served with standard @fontface fonts.
By Luc(as) de Groot
When producing large type families with multiple stroke weights, a certain degree of automation is not only agreeable (as a way to avoid tedious work), it may even be necessary (for making it feasible at all to generate such a huge number of fonts). Interpolation is a common method for doing this: to generate intermediate weights between two basic values, after which, of course, the automatically produced fonts are fine-tuned by hand.
Type designers are often inclined to establish intermediate weights by drawing, as it were, a straight line between the boldest and lightest versions of a family and then choose the intermediate weights somewhere along that graph.
As early as 1987, when developing intermediate versions of an existing typeface during an internship, Luca(as) realized that the optically correct in-between weights are on a hollow curve that produces values which are lower than those on the straight line of the “average values”. In other words: if the verticals of the Regular weight have a value of 40 units and those of the Bold weight 70, then the SemiBold verticals should not be 55 units wide but slightly less, in order to give the optical impression of being exactly “in the middle”.
Luc(as)’s tests resulted in a formula and a graph that precisely define the optimum value for any possible intermediate weight.
Variable Fonts for Responsive Design
By Nick Sherman
Choosing typefaces for use on the web today is a practice of specifying static fonts with fixed designs. But what if the design of a typeface could be as flexible and responsive as the layout it exists within?
The glass floor of responsive typography
Except for low-level font hinting and proof-of-concept demos like the one Andrew Johnson published earlier this week, the glyph shapes in modern fonts are restricted to a single, static configuration. Any variation in weight, width, stroke contrast, etc.—no matter how subtle—requires separate font files. This concept may not seem so bad in the realm of print design, where layouts are also static. On the web, though, this limitation is what I refer to as the “glass floor” of responsive typography: while higher-level typographic variables like margins, line spacing, and font size can adjust dynamically to each reader’s viewing environment, that flexibility disappears for lower-level variables that are defined within the font. Each glyph is like an ice cube floating in a sea of otherwise fluid design.
Steminterpolation is a Java Swing application which helps you to calculate the stem widths for a font family from thin to black.
The program is being developed in NetBeans with OpenJDK and is based on a discussion from a TypeDrawers thread. The executable JAR file can be found inside the dist folder.
Dave Crossland opened a discussion on Typedrawers: Live Font Interpolation on the Web
Marek Jeziorek: Different interpolation between Glyphs.app and MutatorMath
Thomas Phinney: Multiple Masters for Bigger, Better Font Families. FontLab Studio 5
FontForge: FontForge interpolation
Dave Crossland: FontForge Simplepolator