Ampersand Conference 2015- Friday 13th November • Brighton

The Future of Responsive Typography - Nick Sherman • Notes by George Wood

Back to all talks
Listen to the talk

Originally meant as a sequel for his talk of the same title from Ampersand 2013, Nick began by stating his realisation that a lot of the things he had talked about previously have already become a reality within typography on the web.

The talk shifted focus onto the subject of variable fonts for responsive design. A complex idea at first which becomes much more clear with some explanation behind its theories.

Some problems come about when these old ideas and principles behind typography clash with the newer ideas behind responsive typography on the web.

The fonts that we use are static...this is counter intuitive in the world of the web where everything else is flexible

Going back to old letterpress printing with fixed sizes, when the different sizes were scaled up to be much larger the fonts change and the letters become thicker/thinner. This is to optimize readability and printing conditions. With digital type most of these ideas have been dumbed down.

Font Hinting

If you have the outlines for a typeface and try to overlay them on a grid of pixels, they are almost never what you want them to be.

Font Hinting
An example of Font Hinting. Source.

Hinting is about adjusting the design of a typeface for the context in which it lives. Therefore it's a crude form of responsive design.

We need to think about typefaces not as these fixed drawings, but a combination of parameters living in a realm of multiple axis

We then saw Superpolator, a tool which allows you to introduce a light and dark font, and then examine the flexibility between all weights in between by blending the outlines. This tool is used by people creating fonts in order to quickly see the possibilities.

A screenshot of Superpolator.

Apple and Microsoft have both introduced dynamic systems to aid with choosing the correct font for different screen sizes. The most notable use of this is the new Apple font; San Francisco. The font weights and other details switch when the text reaches a certain size - this means it works well across all of their devices.

Nick mentioned that although the fonts themselves are becoming more dynamic, once you get past the different weights the fonts are still fairly rigid.

All the variables within the font are very rigid and fixed. They are like ice cubes floating in a fluid sea of design

Thinks like SVG letter can be used as a short term hack in order to use them today. This enables us to see what's possible when you start thinking about letters as malleable forms as opposed to fixed images.

Responsive text using SVG
See an example of responsive text in action here.

Nick worked on Font to Width. This uses Javascript to look at the width of a certain box, it will then look through the fonts and serve the most appropriate font for that width. As you resize the window the font will update.

Font to Width
Font to Width shows how it's possible to use JS to choose a font depending on the environment it's in.

This may not be fully usable today as it requires you to load in all of the fonts initially, but for headings and more decorative typography it could be incorporated.

Ideally in the future if we could define the thinnest and thickest weights of one font, the browser could then create a custom weight in between the two which works best for a certain screen size.

Nick then gave an example of his idea code which we could use in the future for responsive text, you can see this below:

/* Assign values for the Light pole */ @font-face { src: url(Terpolate-Light.woff2); font-family: Terpolate; font-weight: 1; }
/* Assign values for the Black pole */ @font-face { src: url(Terpolate-Black.woff2); font-family: Terpolate; font-weight: 1000; }
/* Specify something in between the two */ body { font-family: Terpolate; font-weight: 450; }

Note: this is just an example of how the code might look, it is not currently functional.

The perfect future would be to have a native font which does all this without using hacks. It's not inconceivable that it could happen at some point soon.

We are currently stuck with static fonts which are fixed. One day we could have a dynamic font which works from set weights of a font, and then interpolates to create different weights which can serve any device or screen size.

In the future this could help improve load speeds amongst many other benefits. A great example of this is within Asian fonts where there are thousands of glyphs. Having a variable font instead of several different weights loaded would be a huge thing for the responsive web.

Useful Links

Back to all talks