Scott Hanselman

Monospaced Programming Fonts with Ligatures

July 21, 2017 Comment on this post [54] Posted in Musings | Open Source
Sponsored By

Animation of how ligature fonts change as you typeTypographic ligatures are when multiple characters appear to combine into a single character. Simplistically, when you type two or more characters and they magically attach to each other, you're using ligatures that were supported by your OS, your app, and your font.

I did a blog post in 2011 on using OpenType Ligatures and Stylistic Sets to make nice looking wedding invitations. Most English laypeople aren't familiar with ligatures as such and are impressed by them! However, if your language uses ligatures as a fundamental building block, this kind of stuff is old hat. Ligatures are fundamental to Arabic script and when you're typing it up you'll see your characters/font change and ligatures be added as you type. For example here is ل ا with a space between them, but this is لا the same two characters with no space. Ligatures kicked in.

OK, let's talk programming. Picking a programming font is like picking a religion. No matter what you pick someone will say you're wrong. Most people will agree at least that monospaced fonts are ideal for reading code and that both of you who use proportionally spaced fonts are destined for hell, or at the very least, purgatory.

Beyond that, there's some really interesting programming fonts that have ligature support built in. It's important that you - as programmers - understand and remember that ligatures are just a view on the bytes that are your code. If you custom make a font that makes the = equals site a poop emoji, that's between you and your font. The same thing applies to ligatures. Your code is the same.

Three of the most interesting and thoughtful monospaced programming fonts with ligatures are Fira Code, Monoid, and Hasklig. I say "thoughtful" but that's what I really mean - these folks have designed these fonts with programming in mind, considering spacing, feel, density, pleasantness, glance-ability, and a dozen other things that I'm not clever enough to think of.

I'll be doing screenshots (and coding) in the free cross-platform Visual Studio Code. Go to your User Settings (Ctrl-,) or File | Preferences, and add your font name and turn on ligatures if you want to follow along. Example:

// Place your settings in this file to overwrite the default settings
{
    "editor.fontSize": 20,
    "editor.fontLigatures": true,
    "editor.fontFamily": "Fira Code"
}

Most of these fonts have dozens and dozens of ligature combinations and there is no agreement for "make this a single glyph" or "use ligatures for -> but not ==> so you'll need to try them out with YOUR code and make a decision for yourself. My sample code example can't be complete and how it looks and feels to you on your screen is all that matters.

Here's my little sample. Note the differences.

// FIRA CODE
object o;
if (o is int i || (o is string s &&
int.TryParse(s, out i)) { /* use i */ }
var x = 0xABCDEF;
-> --> ==> != === !== && ||<=<
</><tag> http://www.hanselman.com
<=><!-- HTML Comment -->
i++; #### ***

Fira Code

Fira Code

There's so much here. Look at how "www" turned into an interesting glyph. Things like != and ==> turn into arrows. HTML Comments are awesome. Double ampersands join together.

I was especially impressed by the redefined hex "x". See how it's higher up and smaller than var x?

Monoid

Monoid

Monoid prides itself on being crisp and readable on retina displays as well as at 9pt on low-res displays. I frankly can't understand how tiny font people can function. It gives me a headache to even consider programming at anything less than 14 to 16pt and I am usually around 20pt. And my vision is fine. ;)

image

Monoid's goal is to be sleek and precise and the designer has gone out of their way to make sure there's no confusion between any two characters.

Hasklig

Hasklig takes the Source Code Pro font and adds ligatures. As you can tell by the name, it's great in Haskell, as for a while a number of Haskell people were taking to using single character (tiny) Unicode glyphs like ⇒ for things like =>. Clearly this was a problem best solved by ligatures.

Hasklig

Do any of you use programming fonts with ligatures? I'm impressed with Fira Code, myself, and I'm giving it a try this month.


Sponsor: Thanks to Redgate! A third of teams don’t version control their database. Connect your database to your version control system with SQL Source Control and find out who made changes, what they did, and why. Learn more

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Hosting By
Hosted in an Azure App Service
July 21, 2017 2:39
Another marvellous font for coding and supporting ligatures is Pragmata Pro - tho it's not free.
July 21, 2017 2:41
I've been using FiraCode for a few months now, and I struggle when coding on a machine other than mine, that does not have FiraCode installed. You become used to it surprisingly quickly, and it does make reading code so much more pleasant
July 21, 2017 2:43
FiraCode all the way. I've been using it for almost a year now. I can't go back to other fonts any more. (Also, it comes handy for learning FP using FSharp or Elm).

FiraCode looks pretty damn sweet in VS Code. I wrote about it here:
http://www.mindbodysouldeveloper.com/2016/10/23/why-i-changed-my-visual-studio-code-font-to-fira-code/
July 21, 2017 3:05
What's the deal with 0xAB_DE_F?
July 21, 2017 3:10
Just to clarify Will's query, the sample code has 0xABCDEF but the demo images seem to be missing the C.

I assume that the underscores in the hex value are part of the ligature additions. That definitely seems misleading to me but each to their own.
July 21, 2017 3:13
Where did C in 0xABCDEF go? 0xAB_DE_F
July 21, 2017 3:18
I tried out Fira Code for a month or so a while back - found I didn't prefer it to Consolas, so I switched back. I could definitely see how it could be preferable for working in F# though.
July 21, 2017 4:08
I’m a big fan of Pragmata Pro too, but as Jena said - not free. Well worth the license cost though. Check it out.
July 21, 2017 5:33
Another satisfied Fira Code user here. Been using it for a month or two, and am really liking it.
July 21, 2017 5:52
Maybe you can internally petition to get Consolas to add ligatures. I really like the font already and ligatures would make it awesome.
July 21, 2017 6:04
I'm using Hasklig for all my Jetbrains IDEs including C# with Rider, works really nicely :) I prefer it over Fira Code - mostly as the 'r' looks out of place in Fira Code somehow. Hasklig doesn't have a ligature for != though which Fira Code does, but I'm not sure I like that one anyway!
July 21, 2017 6:23
I made my own font a couple years ago and put in a bunch of ligatures. I still use it today.
July 21, 2017 9:14
I've been using Fira Code for almost a year now, mostly doing Xamarin work, loving it! When showing code to other people, I do get a lot of "huh! what kind of programming language is that??" questions. For presentations, it might be wise to switch back to regular monospaced fonts to avoid confusion.
July 21, 2017 9:49
This is quite a innovative use on Ligatures. Good work in sharing us on how to use these for coding.
July 21, 2017 10:16
Remember ASCII 16 bit characters?
No?
Here it is.
July 21, 2017 11:12
I've bee using Fira Code for a while now. I was actually pretty impressed that it doesn't mess with character widths, so => is still two characters wide and your code will still line up correctly.
July 21, 2017 11:17
Does anyone have this working in VS 2015?
I went to the Fira Code link in the article (on GitHub) and the docs say it's compatible on VS2015 and 2017 simply by installing the font and selecting it.
I did the following:
- downloaded and extracted
- right-click-install
- switch back to VS2015 windows, tools >> options >> font & colours >> texteditor >> fira code.

The font in my editor changes but when I copy/paste Scotts example there are no ligatures shown. At the time I pasted into a C# class file.
July 21, 2017 11:29
Solved my own problem.
Despite the newly installed Fira code being available in the font list and changing the Visual Studio 2015 font to something different to what I was using (Consolas) it wasn't really doing it right. A restart of Visual Studio sorted it out.
July 21, 2017 11:54
Another interesting post Scott. I am currently using Meslo LG on both Visual Studio and VSCode but I will give a try to Fira Code.
July 21, 2017 12:51
Wow!! this Fira Code looks great. Thank you Scott. I was in love with Inconsolata for a very looong time but ligatures just makes it so pretty to read.
July 21, 2017 13:20
The comments above are all very positive, which makes me wonder if I've got it wrong!
I did try using ligatures briefly a while back. I say "briefly", because I quickly reverted - I found I needed to continually translate mentally from ligature to code and it added a processing overhead that my ageing brain couldn't deal with.
I'll agree that it's pretty, though. ;-)
July 21, 2017 13:55
(Not related to programming fonts) Abusing OpenType font ligatures: Sans Bullsh*t Sans
July 21, 2017 14:07
I'm a recent convert to Fira Code - it's a revelation in VS Code although it really doesn't look as good in Visual Studio proper - presumably due to differences between the WPF font renderer and that used by the Electron shell (Chrome presumably).
July 21, 2017 15:39
Another vote for Pragmata Pro, I've used it for years.
July 21, 2017 16:34
Iosevka fontis worth the mention as well https://be5invis.github.io/Iosevka/
July 21, 2017 16:52
For some reason this showed up in my feed reader (theoldreader) with a right to left text orientation.
Jim
July 21, 2017 16:54
I like the subtle changes just as extending the equals and the 'goes to' lambda style operators. Less keen on the total conversion of !=, that seems too much of a departure.

Main problem for me is that we do a lot of Pull Requests, so I am as likely to see code in a browser as a editor. I think flipping between two fonts like that would probably be a worse experience.
Lex
July 21, 2017 21:24
I've been using FiraCode for few months and it's easy to read code with this font. It looks great in both Visual Studio and VS Code.

I think MS should provide one of these fonts by default along with Consolas when we install Visual Studio though installing FiraCode and using it is easy.
July 21, 2017 22:12
If only all programming fonts did this.

Would love to see http://input.fontbureau.com/ add ligatures.

See also: https://gist.github.com/renatorib/a0d7af29133c8a775b0740d0b67e32a8
July 21, 2017 23:07
Tried a couple of these. Couldn't get used to them. Using ligatures is a great idea. But (1) I don't really care for the fonts themselves -- Consolas has spoiled me, it's really comfortable for my eyes -- and (2) I think these fonts take ligatures too far. I'm with Mike above, I'd rather not have to mentally translate what I see with what's actually there.

If I could do such a thing, I'd make a version of Consolas that uses ligatures to make small changes (e.g. tighten spacing between = and > in =>), but I'd leave characters visually distinct. I don't care for the merged look. I feel like I have to keep peering at it to figure out whether the lines are == vs ===, => vs ==>, etc.
July 21, 2017 23:07
0xAB_CD_EF is a C#7ism where you can add underscores in Hex literals to make long ones easier to read.
July 21, 2017 23:42
I will try them, but I would really like to see a Consolas ligature font. Consolas seems so natural for a VS user.
July 22, 2017 1:00
I'm waiting for consolas to support ligature. You're MS guy may be you can do something about it.
July 22, 2017 1:36
I saw @sarah_edo using Operator Mono at a workshop last week and so I looked into it; it's a $200 font BUT maaaan is it sexy when paired with Fira Code!

https://medium.com/@peterpme/operator-mono-fira-code-the-best-of-both-worlds-191be512fd5e
July 22, 2017 2:55
But somehow we've gone from 0xABCDEF to 0xAB_DE_F.

I'm finding that translation difficult in either direction. What's the explanation?

Yours,
ProggyTinyFan ;)
July 22, 2017 3:01
@will (and everyone else who has mentioned this) - I belive 0xAB_DE_F is a typo, it was intended to say 0xAB_CD_EF. Scott explained the meaning of that in another comment above.
July 22, 2017 4:09
I wish there was a variant of consolas with these programming ligatures. I tried a bunch of the other ligature fonts but I really can't get over consolas.
July 22, 2017 5:00
Being using firacode in VS and VSCode since it announcement. Love it!
July 22, 2017 13:52
I'm perhaps in a minority but I have to say that I prefer === with spaces between each character than all 3 being joined together. It's much clearer at a glance that it is 3 equals signs and not possibly 2. In programming its quite important which of =, == and === that you are using at any given time. Joining them together will lead to confusion (especially if you are changing between different systems, editors and fonts during the day. You could easily confuse them and introduce bugs.
July 22, 2017 17:46
I agree emphatically with @spudgun who writes " I have to say that I prefer === with spaces between each character than all 3 being joined together." Likewise, thee bang in != is very important to retain, otherwise the NOT is expressed inconsistentlym as the bang will be removed in "1 !=2" but retained in "!string.IsNullOrEmpty(s)".
July 23, 2017 1:46
I'm currently using Iosevka, which has some ligatures (arrows and HTML comments) but is less "in your face" (for example, it leaves == and != untouched). It also has a variant specifically for the terminal which disables all ligatures.
July 23, 2017 18:03
Yuck! Why would you want a font that is essentially obfuscating your code by requiring you to think to figure out what characters are actually there?
Sam
July 24, 2017 1:13
The "redefined hex x" in Fira Code looks exaclty like the mathematical times operator (multiplication sign (U+00D7)) × , which in turn I would have expected to replace the asterisk(*) as multiplication sign -- a pity that it doesn't.
July 24, 2017 11:19
Pretty, but useless to me. I tried Fira Code for a moment a while back, but it made my code so much harder to read - I was constantly checking how many "="s there are in my comparison operators. Basically what Sam said - those fonts just obfuscate the code.
July 24, 2017 14:06
I've been using FiraCode for a few months and have installed it on Visual Studio on all my laptops. It's become indispensable.

There is nothing more magical than typing in '->' for a lambda function and seeing an APL-style glyph emerge.

I 100% disagree with the otherwise brilliant Matthew Butterick on this. https://tinyletter.com/mbutterick/letters/q-ligatures-in-programming-fonts-a-hell-no
July 24, 2017 15:44
Please avoid animated gifs on your blog. I have it up on my igHome page, and it's really annoying.
July 24, 2017 17:27
"...Most people will agree at least that monospaced fonts are ideal for reading code and that both of you who use proportionally spaced fonts are destined for hell, or at the very least, purgatory..."

As it appears that Niklaus Wirth is not following your blog as I do, it will be my responsibility to state the case for proportional spacing even though I have not received the Turing award as Niklaus has :)

Like many programmers I had accepted the "fact" that program code should be using monospaced font. That was until I read the book on Modula-2 written by Wirth where he states the case for using proportional spaced fonts.

His main arguments as I remember are as follows:

Books have been published for centuries with proportionally spaced fonts for a very good reason. The text is more readable and about 30% more characters can fit in one line using proportional rather than monospaced font reducing the need to split logical lines into physical lines.

I grew up programming with line printers incapable of printing any proportionally spaced fonts. Lots of systems did not support proportional fonts for a long period maybe leading programmers to think that monospaced fonts where an inseparable part of programming.

In my experience, proportional fonts have worked very well. On occasion, I have come across code formatted in a way that seems to assume monospaced fonts for display but that has not bothered me much.

I don't see any fundamental difference between software code and other texts that requires monospaced font for programming.
July 25, 2017 3:57
Unfortunately VS2017 doesn't support hyphen based ligatures. A great pity indeed. Scott please ask the team to fix that.

https://github.com/tonsky/FiraCode/issues/259
July 25, 2017 5:37
tried it for a bit, but they are basically gimmicky and I find it more gets in the way of editing code ( especially as I use Vim keybindings, though in actual vim some people change the font for the highlighted line to a non ligature version )

but other than a nicer visual look, it doesn't really improve things.

July 26, 2017 13:56
Important FYI (as Peter said) in Visual Studio .NET (also 2017), after installing the font - restart VS.NET! or else the fonts will appear very thin etc.

After that IMO `Hasklig Semibold` looks a lot like all time fav. Consolas.. `Fira Code` seems a wee bit to busy for me.

So --> Restart VS.NET! <--
July 26, 2017 21:39
great post
thanks for sharing
July 28, 2017 23:41
My personal favorite to use for coding is the Cousine font.
https://fonts.google.com/specimen/Cousine
August 02, 2017 18:24
Thanks for the great post! I went hunting around for my favorite font and found someone added ligatures to it as well!

FixedSys Excelsior

https://github.com/kika/fixedsys
August 03, 2017 5:28
I'm going to try out FiraCode. But I've noticed none of them have support for the ?. functionality in C# 6.

Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.