No two individuals communicate in the same way. From the way you speak (words, speed, entonation, accent) to body language, there are several things that make you you. Typefaces are the equivalent for the written world.
Here’s a practical example: Portuguese author Valter Hugo Mãe is one of my favourite contemporary authors. I usually buy his books from the same Biblioteca Azul collection. The typeface Silva — made by Brazilian type foundry Black Letra — morphed into his voice (or at least my perception of it) as I read his books.
Picking fonts can be an everlong process if allow it to. Typography has a long history and the the web enabled an unprecedented boom of typefaces that made this process… overwhelming to put it lightly. I still have lots to learn about typography and don’t consider myself an expert. In fact, since finding this link I realized how much of a noob I am at this. For now, let’s focus on what is important.
Having two different typefaces would add a lot of time to this process — matching baselines is a fun artisanal process but requires too the time I want to spend learning React. For now, I’m happy to pick a single font-family that can work for both titles and body. After some digging I got to two different directions of sans-serif typographies.
Direction A - Personality without being distracting
This group of typefaces have expression just as much as they could pass unnoticed. I want my typeface of choice to feel humble, yet have personality. The selected family must work in the portfolio section, meaning they should work with multiple visual identities. It must keep readers focused on the content not the layout/style of the page itself.
National 2 by Klim (left), Theinhardt by Optimo (center) and NB National Std by Neubau (right).
In the example above, they are all set at equal sizes (as I write this I also realized two of them also share the same name). Theinhardt feels too dull when placed among the other two. I appreciate how Klim’s National 2 seem to have received a lot of love and thought in it’s project, specially in the terminations where you can clearly see the changes in width, with a bit of calligraphic influence. Neubau’s NB National on the other hand has the most obvious geometry. Look at that perfect small-caps a.
Let’s see how they render in a paragraph.
Klim’s National 2 (top), Optimo’s Theinhardt (mid), Neubau’s NB National (bottom)
Look at how the figure entirely changes. Theinhardt suddenly doesn’t feel as dull. It’s actually the easiest to read, even at smaller sizes. I think most people would agree that National 2 on the top is real delight and NB National might work for titles but for the body it simply sets an awkward rythm.
Direction B - System fonts(?)
System fonts are a good choice to improve performance, but they don’t add as much personality as Direction A did. While I’m a huge fan of both San Francisco and Roboto, Direction B also mean I would have different “voices” depending on which Operating System you’re reading this.
After some experiments with these fonts It crossed my mind that picking a type that is similar to either SF or Roboto would be a good way to go. Graphik is the obvious choice when thinking of a family similar to SF.
I know, after a month looking into typefaces I have Graphik in this list. While I know how ubiquitous it is, the main reason I’m bringing it to the discussion is that I found another font, called Abitare and discarded it because Graphik seems better resolved specially at smaller sizes. And during this journey I also found Regola, which is an imperfect typeface but there’s just something in it that makes it very attractive.
Graphik by Commercial Type (left) and Regola Pro by Think Work Observe (right).
At the first look, these two might look pretty much the same. Look at them again. Carefully. I have been observing how they solved different letters and played with their demos in Figma over the last week (might share my experiments some other time) and it’s been entertaining to see the differences between these two.
In the example above, Regola is visibly wider than Graphik. Set at the same weight it also seems slightly thicker. The small-caps a has more white space and you’ll notice the sharp corners of the capital Z make Graphik seem more fragile.
Let’s have a look at a short sentence.
Graphik (top) and Regola (bottom)
I was completely wrong when I said Regola takes more horizontal space than Graphik. Look at how Regola ends the sentence almost a n unit before Graphik. I was also lucky to steal this excerpt from Frank Herbert’s Dune (which I am currently reading) and notice how the ? is very different for these fonts.
What about a longer paragraph?
Graphik (top) and Regola (bottom)
Something bugged me about Graphik and I didn’t know why. Until someone at work showed me how the ascendants are taller than the capital letters and it made total sense to me. Regola has a better rythm in longer paragraphs.
Ascendants are taller than capital letters for Graphik (left)
Final Round
Regola and National were my favourites from a initial list of 10 fonts. As I mentioned before, I want it to have character while passing unnoticed to most. National is delightful on the eyes but I think I’ll save it for a future iteration of this website. As I post this you should be already reading me in Regola Pro.
Thanks for reading.
I’d love to know what you think about how I’m using Regola.
