Cool type pairings on the web, part 3

Time for another instalment of my cool type-pairing series, this one featuring a range of online publications.

Ars Technica

You can build an excellent website using just free typefaces if you pair them well, which is what Ars Technica has done.

This site uses Source Sans 3 (Adobe, Paul D Hunt) for body text, Faustina (Omnibus-Type) for headings, and Exo 2 (Natanael Gama) for bylines and metadata. All of which help make this website look modern and serious/authoritative.

Screenshot from the Ars Technica website of an article titled, “A quirky guide to myths and lore based in actual science”.

Source Sans 3 and Faustina are both on my most recent (Dec 2025) favourite typefaces list, by the way :)

Semafor

While Ars Technica’s style is that of a modern, web-only publication, Semafor’s style is very classic newspaper/magazine, though also one that’s web-only. In fact, its two main typefaces were both originally designed for magazines that were published by the New York Times.

This website uses Lyon Text (Commercial Type) for body text and Feature Flat Display (Commercial Type) for its headings. Oh, and it uses good old Helvetica for its metadata, captions, menus, etc.

Screenshot from the Semafor website of an article titled, “Semafor Tech’s predictions for 2026”.

Hodinkee

Sticking with websites that use modernised classic typography, let’s look at Hodinkee.

Hodinkee uses mostly the Portrait typeface family (Commercial Type): Portrait Text for body text, Portrait Regular for headings, and Portrait Inline Sans for the article category (ie the “Essays” that’s in all-caps in the screenshot below). Portrait is a minimalist, screen-friendly interpretation of French Renaissance typefaces like Garamond.

The site also uses Brown (Shinntype) for bylines and metadata and Proxima Nova (Mark Simonson) for the headings and metadata in the comments section.

Screenshot from the Hodinkee website of an article titled, “An Exciting 2026 And A Push For More In 2026”.

Harvard Business Review

Let’s end on a website that uses two of my favourite typefaces, the website in question being the venerable Harvard Business Review (HBR).

HBR’s website uses Tiempos Text (Klim Type Foundry) for body text and GT America (Grilli Type) for headings and everything else (metadata, menus, captions, etc).

Screenshot from the Harvard Business Review website of an article titled, “Don’t Underestimate the Value of Professional Friendships”.

Tiempos Text is a modernisation of typefaces like Plantin and Times (the Linotype interpretation of Times New Roman that’s available on macOS). Times New Roman itself is based on Plantin.

According to its designers, GT America is “the missing bridge between 19th century American Gothics and 20th century European Neo-Grotesk typefaces” – meaning it takes the best design features from American typefaces like Franklin Gothic and European typefaces like Helvetica and Univers.

Both Tiempos Text and GT America are really cool. And also really expensive. <sigh>

What’s next?

After focusing on large publications in this instalment, I think I’ll focus on personal blogs in my next cool type-pairing post.

Cool type pairings on the web, part 2

This is the second post in my cool type-pairing series in which I’ll be sharing, well, the cool typeface pairings I see on the web.

NewsBlur

The site on which I read the most amount of text is NewsBlur, the news reader/feed aggregator that I switched to when Google Reader was unceremoniously killed off in 2013.

It was here that I first came across Whitney (Hoefler&Co), which to this day remains one of my all-time favourite typefaces. That’s the typeface I use on NewsBlur to read all my news feeds.

Screenshot from the NewsBlur website of an article titled, “How China cleaned up its air pollution - and what that meant for the climate”.

Whitney was originally created in the late 1990s for the Whitney Museum in New York, USA. Designed for both wayfinding and editorial uses (ie for physical signs and for using as body text), it draws from the functionality of Frutiger (another one of my all-time favourite typefaces) and the structure of various American gothics, such as News Gothic.

Rands in Repose

Speaking of typography from Hoefler&Co, Rands in Repose uses one of my favourite typographic pairings: Ideal Sans (Hoefler&Co) for body text and Sentinel (Hoefler&Co) for headings.

Screenshot from the Rands in Repose blog of a post titled, “The Loop”.

Ideal Sans is a fun typeface with almost no straight lines and very few symmetries across its design. Sentinel is a modern take on a classical slab serif typeface. The two work brilliantly together.

The Conversation

Moving away from expensive typefaces, let’s look at The Conversation since this website uses typefaces that are available for free under the SIL Open Font License.

This website uses Libre Baskerville (Impallari Type) for body text and Montserrat (Julieta Ulanovsky, Sol Matas, Juan Pablo del Peral, Jacques Le Bailly ) for headings. For everything else (byline, metadata, navigation, footer, etc) it uses your browser’s default sans serif font.

Screenshot from The Conversation website of an article titled, “How China cleaned up its air pollution - and what that meant for the climate”.

Libre Baskerville is an open-source, screen-optimised adaptation of the original 1775 Baskerville typeface. It looks authoritative, yet approachable. Montserrat is a geometric typeface by Julieta Ulanovsky that’s based on posters, signs, and windows from the historic Montserrat neighbourhood of Buenos Aires. Both typefaces are a little large and a little wide, and they work really well together.

ABC News

Finally let’s look at the ABC News (Australia) website which uses the bespoke typefaces ABC Sans Nova for its body text and ABC Serif for its headings – both designed by Australian Type Foundry.

Screenshot from the ABC News website of an article titled, “First Hike Project helps refugees experience hiking in Australia’s bushland for the first time”.

You can download these fonts from the ABC News GitHub instance. Since all of ABC News’ other GitHub work is available under the MIT licence, I suspect these fonts have been made available under that licence as well – though that isn’t spelled out on the download page itself.

The ABC superfamily of typefaces is friendly and easy to read on screens, and helps maintain the reputation of the most trusted news source in Australia.

Any suggestions?

Let me know if you have any favourite website typeface pairings. I’d love to check them out.

Cool type pairings on the web, part 1

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!