Journey to my favourite typefaces

I have used and played around with many, many typefaces (and their fonts) over the years. These are my current favourites.

Graphic titled ‘Typefaces I like and that I use more than others’ that shows several typefaces categorised under the headings: ‘Sans used frequently’, ‘Sans used when needed’, ‘Sans used when infrequently’, ‘Mono for text, coding apps’, ‘Mix used on our websites’, ‘Serif used frequently’, ‘Serif used when needed’, ‘Serif used when infrequently’, ‘Serif used for reading’, ‘Slab used as needed’.

How did these become my favourites?

I started, like almost everyone does, by using the default typefaces that come with operating systems and word processors.

Not long after, however, I got into typography in a big way. I bought books, did a lot of online learning, and played around with dozens of typefaces and fonts. I used to build and manage websites for a living, so this was partly professionally motivated.

Over time I upgraded to the more interesting, versatile, and practical typefaces listed above. I thought I’d take this opportunity to share some of the mini typographical journeys I took along the way.

Typeface or font?

Before we continue, there is one thing I should clarify:

  • Typeface = the design of the letterforms and accessories (ie numbers, punctuation)

  • Font = the actual item that produces the letterform, meaning everything from the 12-point piece of metal that gets inked and punched into a piece of paper all the way to the digital file that contains the code for, say, ‘Helvetica Neue Italic’.

To use a book analogy: This Is How You Lose the Time War is the typeface while its hardcover, paperback, EPUB, and PDF versions are its fonts.

Most people’s introduction to typefaces is via the fonts installed on their computer though, so non-design folks tend to use the two words interchangeably. I will not.

Mini typographical journeys

Arial: default typeface in Microsoft Word on Microsoft Windows

Graphic titled ‘Upgrading sans #1 - Arial’. The graphic contains four boxes, grouped by default/free typefaces and purchased/paid typefaces. The four featured typefaces are Arial, Avenir Next LT, Whitney, and Inter.

TOP LEFT: Arial is a well-designed and incredibly useful typeface, and I still use it every day at work (though not by choice). It is, however, a boring default that it is now considered the most neutral of typefaces.

TOP RIGHT: Once I became aware of other, more interesting typefaces, I immediately gravitated towards Avenir as the typeface I’d much rather use instead. Unfortunately, Avenir costs several hundred dollars. Fortunately, Avenir Next has been included as part of Microsoft Office since 2019 and so I now have access to a really good version of this typeface.

BOTTOM RIGHT: Not long after I fell in love with Avenir, I discovered Whitney and fell in love with that even more. Whitney is more practical and versatile than Avenir (at least for my purposes) and is also conveniently packaged for office applications (eg Word and PowerPoint). It costs a lot less than Avenir but is still a decently priced typeface. So yay for getting a bonus at work and treating myself to something nice :)

BOTTOM LEFT: More recently I came across the free and open-source typeface Inter, which is an excellent, more interesting alternative to Arial. (Inter is a version of Roboto that’s been optimised for interfaces, by the way. So a good alternative to this would be Roboto itself.)

Helvetica: default typeface in Microsoft Word on Apple Macintosh

Graphic titled ‘Upgrading sans #2 - Helvetica’. The graphic contains four boxes, grouped by default/free typefaces and purchased/paid typefaces. The four featured typefaces are Helvetica, Frutiger Next, Fact, and Inter.

TOP LEFT: Helvetica, the digitised and slightly upgraded version of Neue Haas Grotesk, is another excellent typeface. But, like Arial, it is now an overused default. (FYI Arial and Helvetica are not the same typeface. [1])

TOP RIGHT: Helvetica is used frequently for signage, but for that purpose I much prefer Frutiger. Frutiger, however, is expensive. Also, its has different revisions and interpretations, each with its own strengths and weaknesses.

BOTTOM RIGHT: Fact is an excellent typeface inspired by Frutiger that costs a lot less and is much more versatile (it has 96 styles and supports 100 languages). It is also on sale these days in case you are interested.

BOTTOM LEFT: Inter (a version of Roboto that’s been optimised for user interfaces) is a great alternative to both Helvetica and Frutiger, and it is also completely free.

Trebuchet MS: my favourite default typeface for creative uses

Graphic titled ‘Upgrading sans #3 - Trebuchet’. The graphic contains four boxes, grouped by default/free typefaces and purchased/paid typefaces. The four featured typefaces are Trebuchet MS, Montserrat, Whitney Narrow, and Ideal Sans.

TOP LEFT: With Arial and Helvetica out of the way, let’s talk about my favourite default typeface: Trebuchet MS [2]. This is a friendly sans serif font that I love to use when writing, and for the longest time it was my default email typeface. Trebuchet MS is also a “web safe font”, meaning it is universally installed across all browsers and devices. Unfortunately, it had its heyday on the web in 2009 and it is quite limited by modern font standards (its bold isn’t particularly bold, for example).

BOTTOM LEFT: Enter Fira Sans, a lovely, comprehensive, well-designed typeface that is much better than Trebuchet MS in all ways. This is my current typeface of choice when using Google Docs.

BOTTOM RIGHT: Lovely as Fira Sans is, I think Whitney Narrow is nicer. When I’m not using Google Docs, I use Whitney Narrow instead of Fira Sans.

TOP RIGHT: The one downside to Whitney Narrow is that it isn’t as rounded and friendly as Trebuchet MS, which brings us to the typeface I use most often these days: Ideal Sans. In fact, I’m writing this post in Microsoft Word using Ideal Sans right now.

Tahoma: my favourite default typeface for professional uses

Graphic titled ‘Upgrading sans #4 - Tahoma’. The graphic contains three boxes, grouped by default/free typefaces and purchased/paid typefaces. The three featured typefaces are Tahoma, Fira Sans, and DIN Next LT.

TOP LEFT: Back in the 1990s when I used Trebuchet MS for all my creative work, I used Tahoma for all my professional work. (Tahoma is basically a narrower, more tightly spaced version of Verdana.)

BOTTOM LEFT: But this too I replaced with the more friendly and full-featured Fira Sans.

BOTTOM RIGHT: In some situations, though, I use DIN. Originally created for road signage, it actually works well in text-dense designs and infographics. In fact, my resume is in DIN.

Verdana: the most legible web safe sans serif typeface

Graphic titled ‘Upgrading sans #5 - Verdana’. The graphic contains three boxes, grouped by default/free typefaces and upgraded/free typefaces. The three featured typefaces are Verdana, Open Sans, and General Sans.

TOP LEFT: Like Trebuchet MS and Tahoma, Verdana was designed as a typeface to be used on computer screens. And, like those two, it is also a core font for the web. I like Verdana. It isn’t particularly friendly or elegant, but it is my typeface of choice for email.

BOTTOM LEFT: Verdana might have been incredibly popular on the web in the 1990s and 2000s, but in the 2010s that crown was taken by the more elegant Open Sans. I like Open Sans too, but OMG is it overused.

TOP RIGHT: If I do need to use a typeface like Verdana or the excellent Montserrat – both of which are a little overused – more often than not I’ll reach for General Sans. Where Verdana is big, with perhaps an overwhelming focus on legibility, General Sans is compact and geometric, but somehow doesn’t look condensed, which I think is cool.

Calibri: the newer default typeface in Microsoft Word

Graphic titled ‘Upgrading sans #6 - Calibri’. The graphic contains three boxes, grouped by default/free typefaces and purchased/paid typefaces. The three featured typefaces are Calibri, Source Sans, and Whitney Narrow.

TOP LEFT: In 2007 Calibri replaced Times New Roman as the default typeface in Microsoft Word. I used Calibri for a while, but I never fell in love with it. After all, its defining character trait is ‘friendly neutral’. By the way, starting in 2024, Aptos will by the new default typeface in Word.

BOTTOM LEFT: Almost immediately after Source Sans was released in 2012, I started using that instead of Calibri. Source Sans is a free, high-quality typeface from Adobe.  

BOTTOM RIGHT: And once I’d bought Whitney Narrow, that took over from Source Sans in most situations.

Times New Roman: the default serif typeface in Microsoft Word

Graphic titled ‘Upgrading serif #1 - Times New Roman’. The graphic contains two boxes, grouped by default/free typefaces and upgraded/free typefaces. The two featured typefaces are Times New Roman and Source Sans.

LEFT: I’ve used Times New Roman a lot over the years and let me tell you that I do not like it very much. Sure it has its uses, but I’ve never been a fan.

RIGHT: As soon as I got my hands on Source Serif, it was all over for Times New Roman.

Garamond: a more elegant typeface that had a terrible font

Graphic titled ‘Upgrading serif #2 - Garamond’. The graphic contains two boxes, grouped by default/free typefaces and purchased/paid typefaces. The two featured typefaces are Garamond and Stempel Garamond LT.

LEFT: I love the Garamond typeface, but the Garamond font that comes with Word is terrible.

RIGHT: The Linotype foundry has an excellent version of Garamond created originally by the Stempel Type Foundry in the 1920s. I snapped up Stempel Garamond LT when it was on sale once and I’ve never looked back.

Georgia: the most legible web safe serif typeface

Graphic titled ‘Upgrading serif #3 - Georgia’. The graphic contains four boxes, grouped by default/free typefaces and purchased/paid typefaces. The four featured typefaces are Georgia, Merriweather, Charter, and Mercury.

TOP LEFT: I like Georgia. It’s not particularly elegant or refined. But like Verdana, with its focus on legibility, it gets the job done. For years my personal website used Georgia for its body text typeface.

BOTTOM LEFT: I love Merriweather. Ever since Google Fonts came on to the scene, I’ve used Merriweather for my website’s body text typeface. Indeed, that’s the typeface you’re reading this in now. [UPDATE: This is no longer true.]

TOP RIGHT: When not publishing online, I will sometimes use Charter as my Georgia replacement. Charter is older than Georgia, and it was designed by Matthew Carter, the same type designer who created both Georgia and Verdana.

BOTTOM RIGHT: When I do need a truly excellent, versatile, and highly legible serif typeface, most of the time I’ll turn to Mercury.

Honourable mentions

I haven’t talked about monospace or slab serif typefaces; this post is long enough as it is. But a couple of quick shout-outs.

Two graphics, side-by-side. One is titled ‘Graphics’ and features the Zilla Slab typeface. The other is titled ‘Coding apps’ and features the JetBrains Mono typeface.

LEFT: Zilla Slab is a free and open-source slab serif typeface created by the Mozilla Foundation. All the headings in the graphics used in this post are set in Zilla Slab.

RIGHT: JetBrains Mono is my coding typeface of choice. I blogged about this a couple of years ago.

Two graphics, side-by-side. One is titled ‘Text apps’ and features the Berkeley Mono and JetBrains Mono typefaces. The other is titled ‘Reading apps’ and features the Literata and Bookerly typefaces.

LEFT: Joplin and Notepad++ are, respectively, my note-taking and text-editing apps of choice. I use monospace typefaces in both. Berkeley Mono is gorgeous and joy to work in. It is a paid typeface, but it’s worth it (I got it on sale when it first launched). JetBrains Mono I’ve already talked about above. It is a free typeface.

RIGHT: Literata is a free and open-source typeface commissioned by Google for its Google Play Books app. Bookerly is a proprietary typeface (though available for download) commissioned by Amazon for its Amazon Kindle e-reader devices and apps.

Two graphics, side-by-side. One is titled ‘Elegant neutral’ and features the Neue Haas Unica typeface. The other is titled ‘Modern slab’ and features the Sentinel typeface.

LEFT: Neue Haas Unica is an elegant hybrid of Helvetica, Univers, and Akzidenz Grotesk. I don’t use this style of typeface very often, which is why it hasn’t come up before, but I do really like this interpretation. Also if you don’t get it as part of a bundle like I did several years ago, Neue Haas Unica is pretty expensive. Which is why it’s much easier to recommend Inter or Roboto everyone. (They’re both free!)

RIGHT: I’m not a big user of old style, Clarendon-esque typefaces, but I do like Sentinel. If nothing else, it pairs brilliantly with Ideal Sans.

Final thoughts

So there you have it. More than you probably wanted or needed to know about why I use the typefaces I do. I don’t know if you had fun reading it, but I enjoyed living it and then telling the mini stories about it. And, of course, I enjoyed creating all those typography graphics since, frankly, that’s half the fun of writing posts like this :)

One last thing I should mention is that, when I bought Whitney a long time ago, I discovered that Hoefler&Co is my favourite type foundry. The folks there created Whitney, Whitney Narrow, Ideal Sans, Sentinel, and Mercury – all of which I’ve bought over the years. I’m pretty sure I’m going to buy more of their typefaces in the future. It’s nice when you find a bunch of designers who really float your boat.

May you find the type foundries, type designers, or even just a bunch of typefaces that bring you joy.


Footnotes

[1] Many people think that Arial is a copy of Helvetica. It is not. Arial is designed to be a drop-in replacement for Helvetica, yes, but it is technically a copy of the older-than-both Akzidenz Grotesk. When Helvetica was created, the designers hoped it would be as popular as Akzidenz Grotesk. More on all that here, if you’re interested.

[2] Trebuchet MS was also inspired by Akzidenz Grotesk.

Album cover feels

I took a photo that looked like an album cover, so…I made one.

High contrast, sepia photo of people wearing dark, warm clothes walking in a diagonal line through a walkway under a train line. The photo has been cropped and made to look like an album cover with the band name ‘below ground’ printed in large, all-caps text along the bottom. In the top left corner, in slightly opaque bright yellow text, is the album title ‘Volume IV’.

“But what about the three previous albums”, you ask?

Well, this is where it all started…

Photo of a harshly lit underpass, tweaked till the photo is very high contrast black and orange. The photo has been made to look like an album cover for a band named ‘Below Ground’ – which is written in large, all capital letters along the bottom of the image. The album is titled ‘Volume 1’.

Then there was the difficult sophomore album…

Photo of a tunnel with (apparently) colourful panels placed across its curved ceiling. The photo has been desaturated to a pale blue tint and had been made to look like an album cover. Along the bottom of the image, in all capital letters, is the band’s name: ‘Below Ground’. In the top left corner is the album title: ‘2’.

Followed by a critically acclaimed and welcome change in direction by the third album…

Photo of train tracks entering a train station through a tunnel with a large pedestrian crossing on top of it. The photo has been made to look like an album cover, with the band’s name ‘Below Ground’ printed in all-caps at the bottom of the image. In the top left corner is the lowercase letter i repeated three times, which are the Roman numerals for the number three deliberately written incorrectly. That is the title of this album.

Also, these look better when you put them together in a grid :)

Picking a typeface for writing code

Do you have a favourite typeface for writing code? (Assuming you write code, of course.)

If not, CodingFont is a brilliant website that will help you find your preferred coding typeface — tournament style!

The process is simple and elegant: you compare code written in two popular coding typefaces side-by-side, then you pick the one you prefer. Do this over and over again and, through the process of elimination, you’re left with the coding typeface you like the most.

In my case that’s JetBrains Mono. (Though I’m also happy to code in both Fira Code and Source Code Pro.)

I love typography and have literally spent days pouring over typefaces, comparing them closely, and then picking the ones I want to use in different scenarios. Like this comparison I did when I wanted to select a typeface for all the charts and diagrams I post on this blog:

Which is why all my charts and diagrams are now in Fira Sans or Ideal Sans. (Where they used to be in DIN Next or Open Sans.)

CodingFont lets you do this type of side-by-side comparison without any of the hassle. So, if you’re a coder – or even someone who regularly uses monospaced fonts – then this is totally worth a try.

Have fun!

Miss-a-bitchy

When you’ve found the brand that reflects your outlook on life, you might as well tell the world about it :)

A silver car is parked on the side of the a residential street. There is a sticker on the left rear window with the Mitsubishi car brand logo and text that says: miss-a-bitchy.

Footscray station architecture

I’ve always loved how, at Footscray Railway Station, designers and architects managed to meld the original red brick structures with modern metal and plastic ones so well. That contrast of straight and solid old with angular and swoopy new works so well.

Entrance at one side of a train station. There are red brick buildings in the background and a large metallic rain shelter over the ticketing turnstiles in the foreground.

Also, can I say once again how much I love Moment smartphone camera lenses? This photo wouldn’t have been possible without their 18mm wide-angle lens.

Weekend project: Fire Safety Door album covers

The tram stopped at an intersection and my eyes focused on the side of a multi-storey office building. The plain, grey door blended in easily with the plain, grey wall. The door had no handle and was flush with the wall. If you weren’t looking carefully, you wouldn’t even notice it was there. 

The only thing mildly interesting about it was the black lettering about a third of the way down. Helvetica Condensed Bold. All-caps. Three lines. 

FIRE SAFETY DOOR
DO NOT OBSTRUCT
DO NOT KEEP OPEN

“Huh,” I thought to myself, “Fire Safety Door. That’d fun name for a band. Their first two albums could even be called ‘Do Not Obstruct’ and ‘Do Not Keep Open’”. 

This was on a Friday evening on my way home from work and I realized it’d been a while since I’d done something randomly creative like designing album covers for a fake band. So I was, like, “Why not?”

Thus I present to you the six-album discography of the alt-rock bank Fire Safety Door (click to see higher resolution versions of the album covers): 

The albums in chronological order are: 

  • Do Not Obstruct: Debut album. 
  • Do Not Keep Open: Difficult second album. 
  • Door Is Alarmed: Critically acclaimed third album. 
  • Woop Woop: Live tour album. 
  • Evacuation Assembly Point: Concept album. 
  • The Spaghetti Incident: Album of cover songs. (Yes, the original GnR album was correctly called “The Spaghetti Incident?” – complete with quotation marks. This album title is just an homage.) 

Ah, random creative outlets. They're so much fun :)