New year, new typeface: switching to variable fonts

This site used to be set in two primary typefaces. By no coincidence, this was based on the combination I used in the Web Typography book: Ingeborg for headings, and Premiéra for body text, both released by Typejockeys.

Ingeborg’s ‘fat’ weight provides the distinctive high contrast Didone-style typeface I like to use nice and big. Premiéra, conversely, is a low contrast, robust typeface designed for use at smaller sizes and demanding conditions (such as screens), perfect for the main text.

Ingeborg Fat heading, with text set in Premiéra.

Between Ingeborg and Premiéra, I use multiple styles and weights. I wondered if there were any variable fonts that might achieve performance and perhaps stylistic benefits. Perusing Nick Sherman’s incredibly useful Variable Fonts site, I was reminded about Literata. Literata was originally designed in 2014 by TypeTogether as static fonts for the Google Play Books reader. In 2020 it received a massive update to make full use of variable font technology.

The original design was excellent. It’s now a really impressive full-blown type family. Weights run from Light (200) to Black (900), but what really grabbed my attention is its optical size axis. It’s one of relatively few variable fonts that does this, and it works superbly. Literata seamlessly runs from a sturdy low contrast Caption size, through to a delicate high contrast Display style, with the original body text and subheading styles sat in between.

Text samples for display, subhead, text and caption optical sizes, in weights from 200 to 900. Master styles were drawn at 72pt 200, 72pt 400, 72pt 900, 12pt 200, 12pt 400, 12pt 900, 7pt 500, and 7pt 900.
Literata’s static styles and recommendations for use. Black triangles indicate the drawn master styles. Image ©TypeTogether.

The result is that, within one typeface and a single font file, I can get the high contrast impact I was achieving with Ingeborg, paired to the lower contrast readability for which I was using Premiéra. The two uses work seamlessly across font sizes in one unified type design. All I need to do is set the size and weight as normal, and the optically sized style is selected automatically (except in Safari 16).

While Ingeborg and the display weight of Literata bear some resemblance stylistically – they both have the same Didone influence – I will concede that Premiéra’s design differs considerably: its dynamic form and wedge serifs are from a different background to the rational axis and ball terminals of Literata. However they are both designed beautifully to do the same job, and that’s good enough for me.

Performance

Before switching to Literata, I was using two weights of Ingeborg (for headings and subheadings) and two weights of Premiéra. This gave the following payload for WOFF2s:

  1. Ingeborg Fat – 45 kB
  2. Ingeborg Heavy – 51 kB
  3. Premiéra Book – 47 kB
  4. Premiéra Bold – 53 kB

That makes a total of 196 kB. Now here’s the surprise. I subsetted all fonts to the same generous set of characters, but Literata comes in at 205 kB. So in terms of file size there’s no saving, although there are 3 fewer requests to the server. In Literata’s defence, it also provides a small-text caption style that I’m not using. But to my mind the way to look at it is that for no extra payload Literata gives a superior result because of that brilliantly executed optical size axis. Headings and subheadings are individually styled according to size, the sturdiness and contrast adjusts to the dynamic text sizing for different screen sizes (more on that another time), and the overall feel is harmonious but highly functional with it.

One final thing. Thanks to Google’s OpenFont License (OFL), Literata is free to own and use. Normally a type family like this would cost upwards of £500, with good reason.