1. graphics
  2. /fonts

Custom Font Choices for Developers

Getting Started

As developers, the tools we use can greatly affect our workflow. Since we're likely to spend a lot of time looking at code, a good font choice is a big difference maker in our productivity and overall enjoyment of the work we do. A proper custom font improves readability, leading to fewer errors and an overall more efficient process.

But with so many options available, you might run into decision fatigue, especially if you're a beginner. We dug into some community-favored choices, picked several fonts that stand out, and highlighted their key characteristics to aid you in your search.

Why Use Custom Fonts?

Oftentimes, custom fonts are designed with coding in mind, and as such, they feature improved spacing and distinguishable characters that are easy on the eyes. After all, eye strain is a concern, especially when working for prolongated periods.

One of the main benefits of custom fonts is the inclusion of ligatures. Essentially, ligatures are symbol combinations that convert certain characters into a single symbol. Some characters are frequently used together so the conversion makes the code less cluttered.

Finally, it's about a sense of personalization; we can choose a font that matches our personal preferences and style. Whether you prefer a traditional, classic, or more modern minimalistic approach, there's likely a custom font that will fit your needs.

Source Code Pro

As a set of monospaced OpenType fonts, it's tailored to work well in user interface environments. Consequently, Source Code Pro is a suitable choice in code editors like Visual Studio Code. The font has numerous styles and variations with a clean modern look that's easy on the eyes.

One of its most notable features is the support for ligatures, which enhances the visual appeal of common operators, such as the greater and less than symbols. Additionally, the font has been redesigned to improve the appearance of characters like i, j, and l, as well as to provide better height alignment for lines, dashes, and mathematical operators.

View Source Code Pro in different sizes, and check out the interesting curvatures in the variations.

Fira Code

Fira Code is a monospaced font, available to download and use for free. Additionally, it has some of the best-detailed documentation with clear explanations of every feature and even provides an installation guide for a lot of coding environments.

If we scroll down a few times in the official repository, we'll notice a table with a vast selection of ligatures, that even provide language-specific solutions. Then, it expands to neat solutions such as matching character height, improved operator positioning, and context-aware punctuation, to name a few.

For instance, the strict equality sign in JavaScript (===) becomes three lines on top of each other. JavaScript developers use this symbol a lot, and it can get messy pretty quickly, so the conversion is neat and improves the readability.

So, this adds to their commitment to better differentiate closely positioned sequences of characters that would naturally require additional effort to locate.

Check out the installation guide for Fira Code in different editors

Hack

We should note that Hack was specifically designed for source code, but it has since found application in other areas as well. The font boasts an easily readable design, with its "waterfall" approach ensuring legibility at any size, from 8 pixels to 90 pixels. This makes it particularly suitable for coding, as text often needs to be viewed in very small font sizes.

In addition, Hack was crafted to look great on high-contrast screens, and its four supported styles (regular, bold, italic, and bold italic) allow it to perform well in a variety of environments, including terminals.

However, it's worth noting that Hack doesn't include ligatures, so if this feature is important to you, you may want to consider using Fira Code or Hasklig.

JetBrains Mono

JetBrains did their due diligence on this one. They conducted research and discovered that code is read and scanned differently than text in a book, for example.

In response, the JetBrains mono typeface is specifically designed for developers and focuses on code-specific eye movement, increased letter height, and over 100 custom ligatures for greatly improved readability.

Also, as of now, it has support for 148 languages and offers us various font weights. For optimal usage, the officially recommended settings suggest a font size of 13 and a line spacing of 1.2. The great thing about this feature-rich custom font is that it's open-source and free to download.

We recommned visiting the offical website that eloquently and thoroughly explains numerous features.

Final Thoughts

Ultimately, the best font choice will come down to personal preference and what you find most practical and accessible. Some developers prefer a lighter font, while others prefer a bolder one with more contrast. You may also want to consider factors such as ligatures, specific spacing approaches, and character shapes.

Bear in mind, that having a custom font won't make you a better developer but it will improve your overall coding experience. Take some time to experiment with our font selection and find what works best for you.

Useful Resources

The Official Source Code Pro Repository

Google Fonts - a large collection of free and open-source fonts

Extend your knowledge to how users perceive typography