Fancy Up Your Fonts with Ligatures
"Woah, how'd you get your not equals to look like that?"
I've recently started a new job and am now taking part in regular code reviews. The majority of these reviews take place over a video chat in which screen sharing is used in conjunction with Intellij's "Git > Compare with branch" to display the diff. We then talk through the changes and raise any concerns with the changes.
On several occasions, usually mid-sentence, I get the question "Woah, how'd you get your not equals to look like that?" Or equals, or greater-than-or-equal-to, or lambda operator, or ... the list goes on.
"Oh, that? That's a ligature, you can turn that on easily in your Intellij settings."
I've had 'ligatures' in my "blog ideas" list for well over a year, so I've decided to go ahead and scratch that one off the list.
What are Ligatures?
According to fonts.com a ligature is "a special character that combines two (or sometimes three) characters into a single character."
Ligatures aren't available in most font sets. I first discovered them in Fira Code, when I was looking for a new monospace font to use for programming. It was one of those happy little accidents where I stumbled across something that I never knew I needed to solve a problem that I didn't even know I had. I had to try them out right away. And I fell in love with ligatures instantly. Ligatures make code look much cleaner, and scan much more quickly, in my opinion.
This is an image borrowed from the Fira Code repo displaying how all of the ligatures look.
Fira Code Alternatives
Enabling Ligatures in Intellij
Okay, you're convinced. Ligatures are great and you want to start using them immediately. So how do you do that?
To enable ligatures in Intellij (or any other Jetbrains IDE), the first thing to do is to open up settings (alt+ctrl+s on Linux/Windows or ⌘ + comma on Mac).
Then you can go to "Editor > Font" or start typing "ligatures" in the search input.
All that's left now is to select "Fira Code" or another font that includes ligatures and check the "Enable font ligatures" checkbox. (Fira Code is included with all of the newer Jetbrains IDEs, you may have to install any other fonts you want to try)
In addition to the Jetbrains IDEs, you can also enable ligatures in most other popular IDEs, code editors, and some terminals.
- Sublime Text
- Visual Studio
- Visual Studio Code
- iTerm 2
Also, I just learned while researching this post, you can import the CSS and use ligatures in most modern browsers!
So what are you waiting for? Fire up your favorite IDE and start playing with ligatures today!If you liked this post, you can subscribe to the rss feed or follow me @ToddEidson on Twitter to be notified of future blog posts.
Date Published: 19 January, 2020