nerding about fonts

Posted on:July 26, 2023 at 02:18 PM

This post is somewhat inspired by a great video about fonts by Tech Craft. I highly recommend you check it out if you’re interested in fonts and typography.

Introduction

I was thinking of what a good first blog post would be, and I thought this would be a pretty whimsical topic to write about. Fonts are a deeply personal choice, and I think it’s not only a fun topic to over-analyze, but also a fun and relatively easy subject to completely overthink and talk about.

It’s not something that people tend to bring up in conversation, and is really easy to underappreciate the thought that has been put into something as simple as font design.

What are some really good fonts

I think the best way to appreciate good fonts is to use a really good one. Once you start, you find it really hard to get used to any other fonts. For programming, that font has been JetBrains Mono. I’ve yet to have come across any other fonts that are as good as it.

Of course, for most people, programming isn’t everything, and for everyday use, Apple (and Steve Jobs in particular) has pioneered the use of sans serif fonts to great effectiveness, making fonts such as Inter and Roboto are great choices.

Why fonts matter

I’m not particularly fond of Apple products, due to their closed nature and their wildly draconian anti-repair stance. However, I do think Steve Jobs very eloquently some of the deep thought put into typography design in his 2005 Standford commencement speech:

I decided to take a calligraphy class to learn how to [learn calligraphy]. I learned about serif and sans-serif typefaces, about varying the space between different letter combinations, about what makes great typography great. It was beautiful. Historical. Artistically subtle in a way that science can’t capture. And I found it fascinating. None of this had any hope of any practical application in my life. But 9 years later, when we were designing the first Macintosh computer, it all came back to me.

Which is a really fancy way of saying they really don’t have any practical importance, yet have a certain allure once you understand the level of detail put into them.

The best font for the best job

Fonts drastically change the way we perceive text. Comics would look out of place with Times New Roman and your emails would feel comical in Comic Sans. A well designed font is one that does the job it requires.

Jetbrains Mono

Most software developers who have some knowledge of typography would’ve definitely come across, and rave about Jetbrains Mono. The Jetbrains team has done wonders to make it one the best fonts for any form of programming and development.

It’s really difficult to appreciate it at first, but once you try using other fonts for development, you’ll realize how much it helps. Hopefully this helps you understand why.

To appreciate the really cool details of Jetbrains Mono, I’ll skip some of the fundamentals of a good coding font (monospace, legibility, etc.)

Jetbrains Mono as a vector font

This might not seem like a big thing at first, but having a vector font significantly helps in a universal development environment. Throughout a career in development, you’ll have to work with numerous different equipment. This means working with monitors of different sizes and resolution. While you may not encounter this at all, more than likely, you’ll bump into a monitor or two with an unusual scaling factor. When this happens, normal bitmap fonts have this ‘fuzzy’ texture that makes them extremely hard to read, especially for long periods.

This is especially so on Microsoft products, such as Visual Studio or VS Code in their default Consolas font, where they use something called ClearType to smooth fonts out. This causes a blurry messy font on low dpi monitors, and personally unpleasant long reading sessions otherwise.

Having a vector font solves this on every resolution. I haven’t seen anyone with any readability issues on Jetbrains Mono ever, on any platform on any screen.

Font height and design

Another few of those small changes that go such a long way. Once again, it’s really hard to describe the nuances until you’ve compared fonts, but comparing something like Source Code Pro for example, you’ll notice that:

  1. it doesn’t feel as monospaced as Jetbrains
  2. it somehow doesn’t feel as readable?

It was really hard to explain it till I started looking at good typography design, but essentially, the issues were with the standard font heights and ‘shape’ of letters. Letters with big circles and rounded shapes tend to take up more space naturally, so a monospaced font usually accounts for that by having the largest letters as the unit size per letter. However, due to the disparity of sizes of the smallest and the biggest sized letters, monospace fonts tend to feel very … spacious However, due to the disparity of sizes of the smallest and the biggest sized letters, monospace fonts tend to feel very … spacious.

Jetbrains gets around this by replacing most of their large circles with pill-shaped ovals. This makes it so that the disparity is much lesser, and makes it feel more ‘m o n o’ as each character feels like it takes up the same space.

The font height, particularly of lowercase letter is another just ingenious trick that Jetbrains uses. Just eyeballing the values, most lowercase letters on standard fonts are ~60-70% of the maximum height of the font. Jetbrain Mono seems to use about 10% more than other fonts. And it makes so much sense.

When you are working on a HiDPI monitor, you tend to use smaller fonts, often around 11-15px. Even with high dpi, fonts can get really hard to read, especially when you’ve been coding for hours. Maximising the height given to a font to make the lowercase alphanumerics so much more legible significantly helps readability, especially over a long period.

Built by developers, for developers

You can really tell that the good folks at Jetbrains are hardy developers themselves. Discriminators, or the distinctiveness of similar symbols is crucial in development, especially as one mistype can be impossible to spot in thousands of lines of code. ‘1lI’ and ‘0O’ for example are so distinct in this font that you can never mistake them for each other.

It’s not just the big issues that were addressed in this amazing font. Even the smallest details, such as ligatures were added into this font. No longer will you confuse ’=’ and ’==’ and ’===’ any more.

And just like any great equipment in a developer’s toolkit, Jetbrains Mono is licensed under an Open Font License, which means we get a nerd font variant, which allows us to really use this font anywhere from terminal applications to integrated development environments.

San Francisco Pro, Satoshi, or literally any san serif font

Well, why don’t we use Jetbrains Mono for everything we do then? Well, Jetbrains Mono is quite a specialized fonts tunnel visioned at developers. This means that a lot of it’s features that made it so great for development, makes it really bad for other purposes. The ‘rounded rectangle’ typeface becomes really boring and uninteresting. The serifs (or the little tails at the edge of letters) which were used to add distinctiveness introduce a lot of clutter into the font.

This is where the sans serif fonts comes to great effect. Sans serif literally means without serif, and it is what is used to described the clean, uncluttered typeface made popular by Apple. You may recognize the famous font of SF Pro, the default Apple font on all their products. The ‘clean and minimalist’ design makes it really good for blogs, writeups or any kind of long form writing outside of development. My personal favourite font in terms of design is Satoshi, which is also what this blog uses. There’s something special about the font that I just can’t describe, other than I like it.

What makes a good font

I think the conclusion or answer to this question is it depends what you’re using it for. Some fonts have been specially designed for a niche purpose, and I think it’s really important in the area of design to appreciate the good thought put into great typography.