Letters will make or break a website. They are the medium that conveys a message. Setting the tone is crucial. Like the tone of a voice while speaking, the right typeface can provide more context to the text.

Oliver Reichenstein famously wrote that “Web Design is 95% Typography”. I mean, look at this website, what else do you see?

Text accumulates: letters become words, words become sentences, sentences become paragraphs. Each choice in the design of a letter gets repeated thousands of times in a block of text, so when it comes to reading, typeface selection goes the furthest in setting the visual atmosphere.

Frank Chimero

This will not be a “how to choose a typeface” guide, I will do this based on my instincts and style entirely. All of the choices will be subjective, and may not even reflect the best practices.

Moodboard

Let’s find a catalyst. What kind of feel do I want in a typeface? For this, I decided not to open my browser, not even once. Finding new resources and inspiration will only fuel my curiosity, and I’ll end up trying out new typefaces for days, possibly with no purpose. I turned to my hard drive instead, counting that all of the screenshots I’ve collected over the years should speak through the site. Any new finds would possibly be remixes of what I already have.

If the people you spend the most time with shape who you are, maybe you should let the designs you admire shape your website?

Going through the designs I like always brings joy to my day. Unsurprisingly, there’re a lot of swiss design typographic posters, works done and inspired by design greats such as Armin Hoffman, but there’re also some Dribbble shots, screenshots old & new… Even some old records from my father. I quickly pulled out all that made me think “I wouldn’t mind if my website felt that way”.

And if we focus on the letters, and look for the least common denominator… it’s mostly sans-serif fonts. And more specifically, neo-grotesque fonts. So dominant even, that I couldn’t stop wondering: Where are the serifs?

Funny realization: I always loved and preferred serif fonts for long-form text. But, I didn’t screenshot them. I read serif text, I select and copy it, but rarely take a screenshot. Although some might perceive serifs as decorative, a well-designed ones flawlessly guide our eyes, while staying away from the spotlight, and I think that this speaks for their functional character.

What I’d Like

While looking closely at the letterforms for years, I developed a certain taste, maybe more of a preference, and I wrote down a few characteristics that I’d like to see in a typeface on this website:

• It should have a fairly large x-height for better legibility.
• It should have nice, true italics. I’m a sucker for good italics. That probably excludes variable fonts.
• It should have special characters, such as “š” and “ć”, for my name. Some supporting ones, such as “→” would be cool.

To go nicely with the logo, which is curved, decorative and open:

• I would prefer round dots (for “i”, “.”, etc.).
• I would prefer more open, wide apertures in letters such as “c” or “e”.
• I would prefer double-storey “a” and “g”, to get a more serify look.
• I would prefer non-linear descender terminals, with curved tails, in letters such as “y” and “j”.

If you’re unfamiliar with letter character nuances, Extratype's Eina promo image is a good illustration of what I’m talking about. In short, some fonts allow you to choose alternate characters. Eina is a bit too geometric for what I’m aiming at, though.

It should also work on buttons and other UI elements, and most importantly, it should have a personality. What does it mean? I don’t know, but I’ll know when I see it. What I know is that while, as many designers, I know Inter inside-out and I love it — it’ll hardly give this site any personality. I’m looking for something a little less generic, a little bolder, a little more peculiar, while still confident.

Typefaces

OK, now that I have a pretty clear idea of what I’m looking for. But, all technicalities aside, until I see an example of a running text, I can’t absorb the “feel”. I’ll dig through fonts that I’ve collected over the years and start looking at the families that might align with some of my wishes from the above.

Lab Grotesque has a really nice look. In my eyes, it’s like Helvetica and Proxima Nova had a child. The weight, the proportions, everything sits nicely. It lacks double-storey g, but it’s not a big deal, since everything else is in place. I really like it.

Atkinson Hyperlegible Next is designed by Braille Institute to improve readability for individuals with low vision. Letters are highly distinctive and it’s another excellent font that I like.

FF Real is actually a superfamily – with two different typefaces: Real Head and Real Text. It’s designed by a legendary typographer, Erik Spiekermann. I quite like it, it ticks every box from the wishlist, including the most beautiful italics out of all. Maybe I’d like it to have a little lighter regular weight, something more similar to the first two.

Mona Sans by GitHub has too much of an industrial look for my taste. I also don’t like the regular weight, although it has a variable version. But I just don’t feel it as a voice of this site.

Libre Franklin invokes similar feels to Mona Sans, but for the different reasons – it gives me an old-style vibes, which doesn’t make much sense, but it is what it is, and not what I’m aiming for.

Radio Canada Big looks nice at first, but it’s less legible for long-form text, has a single-storey “g” only and faux italics. Nothing strange, since it’s designed for large text, but I still wanted to give it a go.

Schibsted Grotesk is another highly legible typeface, but I find some features not in line with my idea for the site, like the big dot on “i” or a really large x-height.

Usual also has a large x-height. It is imagined as a utilitarian typeface, and it shows. What I stated for Inter before applies here, as well. I want a bit more quirkyness.

Based on these observations, the choice narrows down to Lab Grotesque, Atkinson Hyperlegible Next or FF Real family.

I think that I can’t really go wrong here. They all have a personality. On a closer look, here’s what I’m thinking:

• If I went for beauty, I’d go with Lab Grotesque
• If I went for legibility, I’d go with Atkinson Hyperlegible Next
• FF Real sits in between the two, so…

The choice falls down to FF Real. At least for now. I’m keeping my mind open to changing the typefaces on this website. Maybe Lab Grotesque will work better if I go with a dark mode? Maybe I’ll decrease the font-size and go with Atkinson Hyperlegible? Maybe I’ll find a new typeface I like, or maybe I’ll have a sudden change of heart and go with a serif typeface? All is prone to change.

This is how the website looks with the new fonts in place:

Interestingly, FF Real is featured on a poster in my moodboard that says “Design will save the world. Just after Rock&Roll does.” – and I often tend to grab a guitar to play some blues and rock music while taking a break from the design work. Maybe, subconsciously, that’s why it speaks to me?

to be continued…

Typography Part II: Type Scale Blues →