Uses of variable fonts in the wild

Every other day I see people asking about examples of “real” websites that use variable fonts but are not demos/tools for variable fonts. I’ve had a public Google Doc in which I compiled font releases, reference material and uses for a while now, but it’s not that nice of a resource to link to when someone asks. So I’ll collect more examples here now.
Maybe the first real-life use of variable fonts, complete with a write-up by Richard Rutter on the woes and wonders of using a still experimental thing this early on (January 2018)
Little site by Rutherford Craze putting tons of pressure on the tm-students at KABK to work even harder
Likely the most exciting use of variable fonts online right now that is not a demo (well, if a site for a typography conference can not be a demo for fonts) also known as “the Obviously Mini Site” designed and built by Nick Sherman. Perfect fallback game down to browsers on MacOS 10.6.8!
Likely the most boring normal use of variable fonts you’d never guess uses variable fonts if you didn’t know.
Of course, most sites promoting or helping you with variable fonts want to walk the walk and not only talk about them. This site by Nick Sherman uses different weight-settings of Zeitung, nothing crazy, but demonstrates that variable fonts can be practical without being super flashy and interactive.

More examples from the category “demo or real-world usage – you decide”:

State Board of Workers’ Compensation Georgia, USA


On Responsive Typography

The idea of responsive web design and layout – as it was discussed in the past two years, e.g. by Ethan Marcotte – is to have a set of specifications that adjust to the requirements of a device, resulting in different layouts on different devices.

The idea of responsive typography – as it was discussed in the past months, e.g. by Oliver Reichenstein of iA – is to get the exact same impression of a typeface used for a text regardless of the device it is viewed on. But there is more to typography than just the typeface and the term responsive typography, in my opinion, is used ambiguously here. It should cover all aspects of typography and not just the topic of graded “responsive fonts” for different resolutions.

Typography is defined by typographic parameters. These are what you specify for composition. They all influence readability and they influence each other, meaning you cannot look at them isolated. That is:
– font (style, weight)
– font size
– line length
– line spacing
– word space
– letter spacing, tracking
– alignment, justification, hyphenation
– line breaks, paragraph breaks, make-up
– colour, contrast

If you specify these things and send it to someone at the other end of the world, they can reproduce the exact same column of text. This is the basic idea of typography. But – is the idea of “responsiveness” to ensure the exact same design or to adjust the parameters for optimal output on a specific device? What is optimal typography on a standard TFT screen is not the same as what might be optimal on a phone, even if we ensure the font weight in both versions look the same. The resolution and rendering method is different but also other screen settings like contrast and colour, the format, and the reading distance is different.

Shorter lines can get away with smaller font sizes, smaller word spaces, less line spacing but they need hyphenation for good line breaks e.g. (Please don’t force the lines to be even shorter – use small margins in phone layouts!). Larger formats on the other hand mean larger reading distance. Thus they call for larger font sizes, longer lines, more line spacing, larger margins. Small text sizes require fonts with rather wide proportions, a large x-height and open apertures. Larger fonts can get lighter in weight, more detailed, contrasted, and more tightly spaced.

To cut a long story short – what I want to say is, that there are many more important setscrews that have to be concerted and that determine good typography and optimal readability than just the stroke weight of a typeface. The text column has to look harmonious, with legible letterforms and good spacing, achieved by a rhythmical pattern of black strokes and the white space inbetween, with evenly rendered stems, well attuned word spaces and line spacing.

I would want to choose a typeface and settings that generally ensure this. Possible minor differences in font weight from one device to another don’t matter much to me, as long as the thing in a whole can be read comfortably. But maybe us print designers, who had to deal with different papers, printing methods and dot gains all our lives, have just idly learned to come to terms with it. Colour and the contrast of the screen are much more crucial. All the finetuned optimization are at risk to get screwed up by a user who has his crisp retina display set to full brightness. And that cannot be responded to.