As a typography nerd, I notice and then investigate almost all the typefaces I see on the websites I visit. And its not just the typefaces themselves that I pay attention to, I also note the typeface pairings that have been used: meaning the combination of fonts used for body text and headings. I also check to see if there’s any interesting use of typography in the other text elements (pull quotes, bylines, footers, etc).
This post is the first in an ongoing series in which I’ll share the cool font pairings I find online. I’m doing this because I want to (a) share cool stuff with others who might find this interesting and (b) build a type-pairing catalogue for my own future inspiration.
Though let me begin, rather self indulgently, with my own website :)
Insanity Works
This website’s current type pairing is Chaparral (Carol Twombly; Adobe) for body text and Myriad Condensed (Carol Twombly, Robert Slimbach; Adobe) for headings. I wrote in 2023 about how happy I was when the Adobe Fonts catalogue was added to Squarespace (the platform on which this website is hosted) because these two fonts became available for use.
Before then, I used the closest Google Fonts alternatives to those typefaces: Merriweather (Eben Sorkin; Sorkin Type, Google Fonts) for body text and Oswald (Vernon Adams, Kalapi Gajjar; Cyreal) for headings.
Two graphics showing text set in (1) Chaparral and Myriad Condensed and (2) Merriweather and Oswald. The text has the title, “Chapter 1: SOUL-EATER” and is from Naomi Novik’s book, ‘A Deadly Education’.
Chaparral is a hybrid serif/slab-serif typeface. I love how beautiful and graceful it is, even while it retains the friendliness and authoritativeness of its slab serif foundation. Myriad, which is reworking of Franklin/News Gothic, is an excellent combination of elegant, friendly, and authoritative. I think the two typefaces complement each other really well.
Merriweather and Oswald also complement each other nicely, though their vibe is more modern. Merriweather is a traditional typeface (with Garamond as its inspiration) that was adapted for use on screens. It is classic and elegant, but also an everyday workhorse. Oswald is based on Alternate Gothic (a lighter, narrower version of Franklin Gothic) and this slightly-condensed reworking was also designed to be used on screens.
Going back in time
If we go further back in this history of this website – between 2007 and 2012, which was before I switched to the Squarespace – I used Georgia (Matthew Carter; Microsoft) for both body text and headings.
And if we go all the way back to when I first created this site – so from 2004 to 2007, when default, web-safe fonts ruled the day – I had everything set in Verdana (Matthew Carter, Thomas Rickner; Microsoft).
Two graphics showing text set in Georgia and Verdana, respectively. The text has the title, “Chapter 1: SOUL-EATER” and is from Naomi Novik’s book, ‘A Deadly Education’.
Georgia and Verdana were designed to be screen-first typefaces, specifically typefaces that looked good on the lower-resolution computer screens that were prevalent at the time (ie the mid-1990s). They were designed as serif/sans-serif companions to each other and both are solid, authoritative, and highly-readable typefaces.
Al Jazeera
Speaking of Georgia, a website that uses this typeface effectively is Al Jazeera.
The use of Georgia (Microsoft) for body text and Roboto (Google Fonts) for headings gives the Al Jazeera website a clean, no-nonsense, trustworthy vibe.
[Note: screenshots from websites have been heavily edited to focus on only the fonts used.]
Screenshot from the Al Jazeera website of an article titled, “Frida Kahlo painting sells for $54.7m, breaking record for female artists”.
Roboto started out a “frankenfont”, meaning an unwieldy combination Helvetica, Myriad, Frutiger, Univers, FF DIN, and Ronnia. Fortunately, its design team kept working on it and, by around 2014, it had become a much more unified and harmonised typeface. These days it is the most used font on Google Fonts and, despite its overuse, I still like using it and seeing it being used.
The Guardian
Diametrically opposed to Al Jazeera’s “let’s use default/standard typefaces” approach is The Guardian that uses a family of bespoke typefaces.
This website uses Guardian Egyptian Text for body text and Guardian Egyptian Headline for headings. It also uses Guardian Sans for various other bits of text. These are all part of a superfamily of typefaces commissioned by the Guardian for its rebrand in 2005 and designed by Paul Barnes and Christian Schwartz (with Panagiotis Haratzopoulos and Ilya Ruderman) from Commercial Type.
Screenshot from The Guardian website of an article titled, “Frida Kahlo self-portrait sells for $54.7m to set new auction record for a female artist”.
The Guardian’s highly sophisticated use of typography comes from its print newspaper origins, and I love that its designers have carried over that sophistication into its digital versions. Also, I think Guardian Egyptian is my all-time favourite newspaper typeface.
In typography, ‘Egyptian’ is the older, art-based name for what we now call slab serif typefaces. Guardian Egyptian is a warm and organic-looking slab serif that still retains its solid authoritativeness.
Wired
Let me conclude this post by talking about Wired, a magazine that I’ve been reading since it launched on the web as HotWired in 1994 – back when it used “Arial,Helvetica,Verdana” as its HTML font stack!
These days Wired uses Breve Text (Dino dos Santos; DSType, Monotype) for body text; Wired Display (Abbreviated Foundry) for headings; Apercu (Colophon Foundry) for intro and lead-in text; and Wired Mono (Formula Type) for bylines and article metadata.
Screenshot from the Wired website of an article titled, “British Churches Are Putting Their Faith in Heat Pumps”.
Like the Guardian, Wired got its start in print and this is reflected in its sophisticated use of typography, digital design/typesetting, and the use of publishing elements like lead-in text that aren’t commonly used on the web. (In a magazine, ‘lead-in’ refers to the words set in all-capital letters at the start of an article’s main text.)
Both Breve Text and Wired Display are modern typefaces with a lot of personality, which suits a publication like Wired that reports on the cutting edge of technology. Apercu, meanwhile, is an amalgamation of ITC Johnston, Gill Sans, Neuzeit, and Franklin Gothic, which makes it a little quirky and gives it a lot of character. This contrasting of very modern typefaces with a quirky-classic one makes for a hugely compelling website design.
More to come
I have many more websites to talk about in this series, but I think that’ll do it for now.
If you have a website type pairing that you particularly like, please tell me about it. I’d love to take a look and then add it to my catalogue. Thanks!