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


Type used in Germany’s best designed books of 2012

Germany’s Stiftung Buchkunst just published the “Best Designed Books” of 2012 on a new website. I quickly distilled the typefaces in use. All other details regarding design and production, as well as photos can be found on the individual pages for each book.

What is interesting to note is that – compared to former years (I recorded the font use of some years back 10 years ago) – the diversity is much higher. Only few typefaces appear twice, or if we count the different Garamonds three times max. This is a great development in my opinion. Current fad: monospaced fonts.


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.


Font Shopping 2011

Instead of yet another best-of list (who can challenge the epic Typographica-reviews anyway) I want to share what typefaces I actually licensed last year, from where and why and whether I used them up to now.


Additional styles of Alright Sans, Jackson Cavanaugh, Okay Type ( To complement previously licensed styles and because I wanted to see it pop up on the MyFonts live-sale-map.

Amplitude Italic, Christian Schwartz, Font Bureau (email/contact Font Bureau): To complement previously licensed roman styles for the book Tanzdekade, see below.

Brioni Text, Nikola Djurek, Typotheque ( Because I like it and regard it versatile and a good fit one day.

Elena, Nicole Dotin, Process Type Foundry ( Because I like it and wanted to support Nicole’s long-term efforts.

Equity, Matthew Butterick, MB Type ( Because I like it and find it suitable for future text heavy documents and because I beta-tested it.

Klimax, Ondrej Jób, Typotheque ( It’s just so cool.

Plan Grotesque, Nikola Djurek, Typotheque ( One of, if not the best among all those grotesques popping up everywhere lately, extensive and probably an all-around multi-talent.

Vendetta, John Downer, Emigre ( For our Christmas cards at school and because I always wanted it anyway.

Zamenhof, Castle Type, Castle Type ( I don’t know, it was on sale.

Furthermore I downloaded some free fonts and trial licenses. From Exljbris: Geotica 2012. From FontFont: FF Basic Gothic Regular, FF Sero Medium. From MyFonts: Mimix, Sintesi and Sintesi SemiSans, Cala Light, Corda Light, Erato Light, Lido STF, Novel Sans Demo, Pona Display Demo, Supria Sans Regular and Italic. From OurType: Eva Semibold and Italic, Fayon Semibold and Italic, and six styles from the Meran family. From Type Together: Bree Serif.

The (sad) statistic of usage 2011
Amplitude book, italic, bold italic and wide bold were put to use in the book Tanzdekade about The Donlon Dance Company. I set the photography book The Raw and The Cooked by Peter Bialobrzeski solely in Meran light (remember this fun discussion?). Vendetta medium and italic was featured on the holiday greetings of my school. I wrote one quote and one invoice in Elena and set most of my school notices in Alright Sans. I used none of the others and none of the free or trial-fonts.

Resolution for 2012: Use more type more.


De Luc-Truc by Lucas de Groot

The Luc-trick – a new sketching technique for everyone

The Luc-trick allows you to transfer a copied image to another surface. In the process of photocopying (xerographic image transfer) the reflected light of the original renders a light-sensitive „master“ partially statically charged. On these areas the powder (toner) is attracted and then transferred onto a sheet of paper. This sheet runs through a heating element which melts the powder together into a waterproof plastic layer.

Now the Luc-trick. Take a good copy. Preferably use a copier with precisely controllable light/dark adjustment. Use waterproof tape or adhesive plastic. The so-called “invisible” tape is perfect in every respect. Rub the tape firmly, turn the assembly over and make the paper wet, for example with coffee or spit. Rub with a folding bone across the paper so that it gets soaked more quickly. When the paper is wet enough, you can see the image shine through the paper. Now carefully remove the paper in its entirety or rolling. Related to the grain of the paper you should rub in two directions. There may remain a few fibers on the toner. The image (even very small print) is now neatly transferred onto the tape. Dry the tape (hair dryer) so it becomes sticky again and you can see if there is too much paper left on the piece that you need. You can now retouch the image if necessary.

Schæffer ink has about the same color as the toner or you can scrape off some with a knife. The image now seems relatively transparent, but when you paste it again it will mask quite well. Now you can stick the tape with the image on almost any surface. Very useful for sketching on packaging, when using colored and heavy paper and so on. For matte surfaces use matte tape, naturally; Cellux does not work, Scotch I does, II doesn’t. For glossy surfaces use Cristal Clear.

Color overlay with the Luc-trick
Take a photograph or other images, the more graphic the better e.g. with a coarse, magnified grain. Make a copy of it in one color. Luc-trick it and finish your overlay. Large areas covered with toner, for example white on black text, might leave too little free adhesive tape to paste it up well. A little spray adhesive provides a solution.

Forming an image
An additional, free invention is that the Luc-trick-ed tape is quite malleable at higher temperatures with a little skillfulness. Use fire, heater, iron or hair dryer. You can create nice image variations that are barely conceivable with computers even.

Modifying letters with the Luc-trick
Lay a grid over the letters to control the degree of distortion. Paste adhesive plastic strips on a good copy and remove the paper (Luc-trick). Now glue a strip of letters to a short comb (?) onto a solid and lined surface. Then with a hot hair dryer warming the tape, extend and affix it further. A piece of cardboard will prevent the pasted areas from getting loose again. If you want to italicize, use a diagonal grid for pasting. Make a copy of your work and adjust it, or repeat the trick.




De Luc-truc – een nieuwe schetstechniek voor iedereen

De Luc-truc maakt het mogelijk een gekopieerd beeld naar een andere ondergrond over te brengen. Bij fotokopieren (xerografische beeldoverdracht) maakt het van het origineel teruggekaatste licht een lichtgevoelige ‘master’ plaatselijk statisch geladen. Op die plaatsen trekt de master het poeder (toner) aan en zet dat vervolgens op een vel papier over. Dit vel gaat door een verhittingselement waar het poeder samensmelt tot een plastic watervast laagje.

Nu de Luc-truc. Neem een goede kopie. Gebruik bij voorkeur een kopieerapparaat met nauwkeurig regelbare licht/donkerafstelling. Gebruik watervast plakband of plakplastic. Het zogenaamde ‘onzichtbare’ plakband is in alle opzichte ideaal. Wrijf de tape stevig aan, draai het geheel om en maak het papier nat met bijvoorbeeld koffie of spuug. Wrijf met een vouwbeen over het papier, dan raakt het vlugger doorweekt. Als het papier nat genoeg is zie je het beeld door het papier heen schijnen. Verwijder nu het papier, voorzichtig in z’n geheel of rollend. In verband met de looprichting van het papier moet je in twee richtingen wrijven. Er mogen wel een paar vezeltjes aan de toner blijven zitten. Het beeld (zelfs hele kleine lettertjes) blijft nu netjes op de tape achter. Even drogen (föhn), dan wordt de lijmlaag weer klevend en zie je of er nog teveel papier is achtergebleven op het stukje dat je nodig hebt. Je kan als dat nodig is het beeld nu retoucheren.

Schæffer inkt heeft ongeveer dezelfde kleur als de toner en met een mesje kun je nog wat weg schrappen. Het beeld lijkt nu vrij transparant, maar als je het weer opplakt dekt het goed. Nu kan je de tape met beeld op bijna elke gewenste ondergrond plakken. Erg handig bij het schetsen op verpakkingen, bij het gebruik van gekleurde en zware papiersoorten, enzovoorts. Voor matte ondergronden gebruik je natuurlijk matte tape; cellux werkt niet, scotch I wel, II niet. Voor glanzende oppervlakten gebruik je cristal clear.

Een kleuroverlay met de Luc-truc
Neem een foto of ander beeldmateriaal. Hoe grafischer hoe beter, bij voorbeeld een uitvergrote grove korrel. Maak hiervan een kleurenkopie in een kleur. Luc-trucen en klaar is je overlay. Bij grote tonervlakken, zoals diapositieve tekst, blijft er misschien te weinig vrij plakband over om het nog goed te laten plakken. Een beetje spuitlijm biedt dan uitkomst.

Vervormen van een beeld
Een extra, gratis uitvinding is dat het ge-Luc-tructe plakband bij hogere temperaturen met een beetje handigheid flink vervormbaar is. Gebruik hiervoor vuur, verwarming, strijkbout of föhn. Je kunt leuke beeldvariaties maken die zelfs met een computer nauwelijks denkbaar zijn.

Het modificeren van letters met de Luc-truc
Zet, om de mate van vervorming te kunnen beheersen, over de letters een grid. Plak vervolgens op een mooie kopie hiervan stroken plakplastic en verwijder het papier (Luc-truc). Plak nu een strook met letters aan een korte kam vast op een stevige gelinieerde ondergrond. Dan met een hete föhn erbij al uittrekkende het plastic verder opplakken. Een stukje karton zorgt ervoor dat het opgeplakte gedeelte door de hete lucht niet weer loslaat. Als je wilt cursiveren plaats je het grid schuin, in de rekrichting. Maak een kopietje van je plaksel en werk het bij, of herhaal de truc.

Dutch text by Lucas de Groot. Translation into English by Indra Kupferschmid (please excuse any clumsiness)
From: Letters] & techniek, Werkgroep letters], KABK 1990, p. 43–45

Where do you want to drive?

I love this quote by John Hudson which just popped up in a discussion about type classifications:

Tinkering with the wheel alignment of a car that might turn out not to have an engine seems pointless, especially if you haven’t even decided where it is to which you wish to drive.

This actually fits all design processes. No, life in general.


New column: Ask Indra

I’m trying to help with type questions as much as time allows me – via email, on typophile or elsewhere. So why not share some on here too?

“When licensing fonts do you usually buy a whole family, or just select weights? I’m thinking especially in the case of some ••• supermegadeluxx families, I just can never afford to buy the whole family, yet normally my preference is to, thus I don’t buy those huge families but smaller ones.”

I hardly ever get whole families. First because of price, yes, but also because I never need so many styles. Sometimes so vast a choice rather confuses me than helps selecting fonts. It’s also kind of a great exercise for typographers to try get by with as few styles as possible, at least that’s what I love to challenge me with. In the case of ••• it’s also super customer friendly because you get reduction in price per total number of fonts in a purchase, regardless from which family (see my blog post from last Dezember for details). So the price of a single font drops from 40 to 30 $ pretty fast.

Start with a number you can afford, carefully pick styles and see how far you get with those. You can always come back and buy additional fonts later. Also, there are so many ways to emphasize or distinguish in typography apart from changing the weight or style, plus you can combine fonts too of course. So my advice is: get some 2–4 styles of a timeless workhorse (e.g. Miller, Starling, Amplitude, Benton, Titling, Salvo) and add some spice with an occasional display style or wacky font.


Kurt Weidemann, adé.

Yesterday my good friend Kurt died at the age of 88. I got to know him 1995 in Weimar when I invited him to give a lecture at our university. Prior to this we had coffee and cake at our squatted student’s abode, ranted about architects, designers, this, that and the world and he seemed to thoroughly enjoy the untidy (not to say seedy) atmosphere in our house. So we stayed in touch. I owe him a lot and will miss him terribly.

Für die interessierten Deutsch lesenden möchte ich hier seinen Vortrag von damals posten. English speakers might just have to enjoy some old photos I found. Due to Kurt’s very creative use of language google translate probably won’t make much sense out of his text.

Fare well, dear friend. Though I wish you peace, I cannot imagine you resting :)

Der Meister auf unserem Forum Typografie in Düsseldorf, 2/2007
(post auf dem Spatium blog über seinen Vortrag dort)

Kurt + i auf der TypoBerlin 10/1996, still aus Historische Videoschnipsel
(Video seines Vortrags auf der TypoBerlin website)

Ist Wertewandel das Deckwort für Ratlosigkeit?

Anmerkungen zu den gestaltenden Berufen
von Kurt Weidemann