TLDR: Developers, the fonts that you use matter! They help you find bugs and lessen eye strain.
Why do Fonts Matter?
Did you know that there's a whole industry revolved around fonts? Typeface and typography are some terms used in this space, and their goals are to design fonts/letters to improve experiences or give products identity. As developers, we look at code all day long. Shouldn't we try to improve that experience, so that we can be more productive? Well, there are many fonts out there that do just that! Some popular ones include Fira Code, Source Code Pro, Jetbrains Mono, and Ubuntu Mono. But these are just a few, there are tons more.
Here are some reasons why picking the right font will help you, as a developer:
- Easily find typos.
- Quickly find variables and functions.
- Identify programming-specific characters.
- Reduce eye strain.
Plus, they just look cool, and who doesn't like that? 🤣
Differences Between Normal Fonts
Fonts for programmers are designed with programmers in mind. The philosophy behind these ideas differ amongst typefaces, but they aim to do the same thing: improve the developer experience.
Let me go into some details about the font: Jetbrains Mono, my current font of choice.
Jetbrains Mono has the following features:
1. Increased font height, so code is easier to read.
How does this help? Well, a more readable font will help you find typos because you can easily identify each character you type. And no more squinting! You're eye's will be much less strained since you don't need to squint anymore.
2. Ligatures which help you identify special characters used in programming.
Take a look at what I mean from the images below. Notice how arrow functions go from => to an actual arrow. This makes special characters stand out and look how they should.
OFF
ON
3. Each character is distinct.
I'm sure you've experienced something like this. You look at a character and wonder if its a capital I or a lowercase l. They look the same with a lot of standard fonts (like this one that I'm using for my blog!).
4. Letters flow vertically.
When we code, we do a lot of vertical scrolling and, in tern, a lot of vertical reading. Jetbrains Mono is designed to be super legible and flow vertically.
MonoLisa is another popular dev font. Part of their design philosophy includes horizontal flow, so each character flows to the right, making horizontal reading much smoother.
MonoLisa also has a wider font, which makes your code less condensed and easier to read.
Test Them Out Yourself!
If you're not sure which font will work best for you, check out this font playground. You'll be able to select from a bunch of different fonts to try out.
Summary
If you're a developer, I highly recommend downloading some programming fonts and see what works best for you. They can improve your workflow by reading code more easily. And you'll have less eye strain since everything's more legible.
For more information:
Thanks for reading!
Consider following me for more!
Top comments (30)
Ligatures are a very love-them-or-hate-them thing. Some are too unusual to the point of sometimes interfering (curse you
.-), but customizing them is relatively easy in most cases. But I've found some developers actually do struggle with them, because they're far more used to reading traditional syntax. Three-character ligatures are also often too wide (===for the JS devs). I love them for the readability (because I tend to read the operators as single instructions anyway) but I can see where the trouble lies.Increased font height is not quite right. What is important is the ratio of the heights of majuscule vs. minuscule characters. Too high a ratio and the minuscule (lowercase) characters are too difficult to read. But too low a ratio and the contrast between the majuscule (capitals) and minuscule characters makes it difficult to pick out the capitals. There is, pun intended, a golden ratio that makes for the most readable typeface, though perhaps this differs slightly for different readers.
If height were the correct measure and bigger is better, then why not just make majuscule and minuscule characters the same height?
Also, ligatures are not really better until you learn them. After that, they might be, but unless there is a much larger adoption rate, then the confusion caused to those unfamiliar with them (I always do a double take) might outweigh the benefits.
That said, it is awesome to see someone giving typography the attention it so richly deserves, and especially so in the DX space. Now if we could just get devs to understand and respect the use of whitespace, contrast, alignment, etc. we might really have something revolutionary. :-)
Thanks for commenting Charles! Yep you nailed it right on the head, its about the "golden ratio".
Thanks, Anthony.
I've been thinking about your second recommendation since I replied earlier. I do love me some ligatures in properly typeset type. And I agree that in general they can improve readability. And they also strongly alter the feel of the type, and in a good way.
That said, I am going to come down hard against their use in code, and I think that you should rethink your recommendation to use them. I suspect that some of the joy of using them in literary text has sort of bled over. But code is different.
In code, it's not about distinction, so the distinctiveness of ligatures over character combinations is not really relevant. With code it is about familiarity, readability, and typeability. And it is the first and last of those on which ligatures fall down.
The vast majority (virtually all) of the tutorials, books, examples, etc. out there do not use ligatures, so these symbols are absolutely not familiar to the average coder. But worse, how does one type them? If I see
<>, I can see that it is two characters and I can look at my keyboard and see those characters represented there. Easy peasy.But if I see a flat diamond shape (or, worse, a long double arrow), then where is the key for that? Is it a special character? Should I go looking for it in a menu somewhere? Is there a tricky key combination to create it? But
|=>and->>and/=are obvious. Even the newest of newbies can find these keys on the keyboard with a little effort.And after years of typing these key combinations and using them in my code, I read them effortlessly.
!==and=>might as well be words to me, and to anyone who has spent even a little time writing JS or TS.So I strongly suggest that you rethink that recommendation. Do you have any actual studies to back it up? Unless everyone wants to learn which ligatures represent which key combinations and remember a large number of them across many languages, and all the books, tutorials, examples, etc. want to get with the program, I think this recommendation doesn't really pass the sniff test.
Still, a welcome article. Do you intend to write more about DX, including using techniques such as proximity to group related elements and space them from unrelated elements? (Blank lines are your friends!) Spacing around operators to increase readability? Examples of great naming? There is so much work to do in the DX field. Thanks for chiming in.
Yep I will 100% agree with you that ligatures aren't the best for beginners since, like you mention, they are kind of hard to distinguish. But it's primarily used just for people more comfortable using them (maybe a more advanced or familiar user). After all, these fonts are installed and configured on your local machine, so it's personalized to the dev who is on that machine. If I were working on a project that uses version control, I'm not pushing my changes with my local font. That would be a mess!
Thanks again for your insight and interest in this! To answer your question, yes, I will be posting more DX things. My next articles will be about Terminal settings and other enhancements!
True, on your own machine it would be no problem. If you love 'em, go for it.
But your article didn't make that clear, and might be interpreted by beginners as if it's something that they have to do. That's why I responded as I did. As a teacher and mentor, I am always cognizant of how things might be interpreted by a beginner.
Thanks for your excellent responses. Good points, all.
Yep, I'll be sure to be more clear and mention it next time. Thank you!
Noticed Microsoft's latest-ish version of Cascadia Code has italic ligatures in it. It makes italic text into handwriting-like. Found it useful to quickly identify and ignore language keywords when reading code. Example:
To enable those in vscode one couldnt just set
"editor.fontLigatures": truebut had to add a list of strings that I dont understand what does:"editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'zero', 'onum'". What does that do exactly? Why isnt it enabled if I just say "true"?Yea Cascadia Code is so nice!!
The
ss##things stand for different Stylistic Sets in the font,zeromeans you want to use the slashed zero, andonummeans to use Oldstyle Figures for the numbers, so numbers are at varying heights. (Info found here: docs.microsoft.com/en-us/typograph...)As far as why you can't just specify
trueand have it turn on all the ligature options, I'm not sure, but possibly because there would be conflicting options in this particular font? I'm also curious now if someone knows the answer to that one.Downed JetBrains...Love the font, thx.
JetBrains Mono thats my developer font it replace Fira Code which is also quite good. Can't get enough of those ligatures.
Yep they are so clean, I've tried both but prefer Jetbrains Mono right now.
I'm still sticking with Fira Code, but JetBrains Mono does have its upsides over it. I prefer Fira for slightly better readable characters, imo.
Yea it's my daily driver right now. Glad you like it!
Mac OS has the nicest developer font bundled with it, SF Mono. It's also downloadable separately from Apple themselves for personal use, developer.apple.com/fonts/
Such an underrated little typeface, that. JB Mono is also great though.
I didn't know it was built-in! That's cool!
Shameless plug: if you want one from a classic terminal, github.com/rbanffy/3270font is your font.
Hello from a fan!
3270 is the font I use for my iTerm2 Quake profile ;-)
The 3278-2 was the best computer terminal ever created.
From photos of the actual IBM terminals, I must agree.
I never had the privilege of working with an actual 3270 terminal. Instead we used an emulator on Windows NT, and the font was Courier, or something like it.
Check out my project to add ligatures to Operator Mono
github.com/kiliman/operator-mono-lig
That's sick. Awesome job!
I use Cascadia Code by Microsoft on Windows Terminal and VScode.
This is a great font too!
Ligatures are probably the worst invention of the last few years for me. I can't tell if a big "equals sign" is == or === unless I have used a ligature font before, I find |> becoming a triangle extremely disturbing and most times I look at those symbols and I don't know how to type them, because they're not in my keyboard. This is not a good thing and adds additional overhead.
Also, having <= turned into the lass or equal sign changes the size, not to mention that some people actually have ≤ mapped somewhere or copy-pasted from it, and at this point it is indistinguishable.
Not to mention that having
!=transformed into a thing with a slash is not straight forward. There are languages who use~=as the "not equal" sign.Ligatures adds nothing that is objectively good and makes life harder to understand code when someone who uses it shows you a print or shares screen.
practicaltypography.com/ligatures-...
The ligatures look cool but, as they introduce ambiguity, they are detrimental to the usability of the editor. How can you tell the difference between <= and ≤? Or between -> and →? Yes, I do have these characters mapped on my keyboard, I do use them occasionally, and I wouldn't want my text editor to show me these glyphs unless that's really what I typed.
As an example, I may write a condition “α ≥ 0” in a markdown file, and “alpha >= 0” in a source file next to it. If I see “alpha ≥ 0” in the source, I would assume I made a typo.