Scott Hanselman

Monospaced Programming Fonts with Ligatures

July 20, '17 Comments [64] 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
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb
Thursday, 20 July 2017 22:39:30 UTC
Another marvellous font for coding and supporting ligatures is Pragmata Pro - tho it's not free.
Jens Greven
Thursday, 20 July 2017 22:41:41 UTC
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
Keith
Thursday, 20 July 2017 22:43:10 UTC
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/
Thursday, 20 July 2017 23:05:32 UTC
What's the deal with 0xAB_DE_F?
will
Thursday, 20 July 2017 23:10:57 UTC
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.
Bruce
Thursday, 20 July 2017 23:13:56 UTC
Where did C in 0xABCDEF go? 0xAB_DE_F
Anders Gjære
Thursday, 20 July 2017 23:18:41 UTC
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.
CarlD
Friday, 21 July 2017 00:08:17 UTC
I’m a big fan of Pragmata Pro too, but as Jena said - not free. Well worth the license cost though. Check it out.
Neil Merton
Friday, 21 July 2017 01:33:51 UTC
Another satisfied Fira Code user here. Been using it for a month or two, and am really liking it.
Eric
Friday, 21 July 2017 01:52:33 UTC
Maybe you can internally petition to get Consolas to add ligatures. I really like the font already and ligatures would make it awesome.
Brian
Friday, 21 July 2017 02:04:28 UTC
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!
Stephen Willcock
Friday, 21 July 2017 02:23:00 UTC
I made my own font a couple years ago and put in a bunch of ligatures. I still use it today.
Jeremiah
Friday, 21 July 2017 05:14:45 UTC
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.
Friday, 21 July 2017 05:49:14 UTC
This is quite a innovative use on Ligatures. Good work in sharing us on how to use these for coding.
Friday, 21 July 2017 06:16:59 UTC
Remember ASCII 16 bit characters?
No?
Here it is.
Friday, 21 July 2017 07:12:07 UTC
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.
John
Friday, 21 July 2017 07:17:26 UTC
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.
Peter
Friday, 21 July 2017 07:29:49 UTC
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.
Peter
Friday, 21 July 2017 07:45:09 UTC
website, Valuable information! Looking forward to seeing your notes posted. The information you have posted is very useful. Keep going on, good stuff. Thank you for this valuable information. I have enjoyed reading many of the articles and posts contained on the keep up the good work and hope to read some more interesting content in the future.



Friday, 21 July 2017 07:54:37 UTC
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.
Drake
Friday, 21 July 2017 08:51:27 UTC
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.
Friday, 21 July 2017 09:20:13 UTC
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. ;-)
Mike Woodhouse
Friday, 21 July 2017 09:55:19 UTC
(Not related to programming fonts) Abusing OpenType font ligatures: Sans Bullsh*t Sans
Zuba D'lama
Friday, 21 July 2017 10:07:53 UTC
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).
Malcolm
Friday, 21 July 2017 11:39:03 UTC
Another vote for Pragmata Pro, I've used it for years.
Quooston
Friday, 21 July 2017 12:34:03 UTC
Iosevka fontis worth the mention as well https://be5invis.github.io/Iosevka/
Aliaksandr
Friday, 21 July 2017 12:52:23 UTC
For some reason this showed up in my feed reader (theoldreader) with a right to left text orientation.
Friday, 21 July 2017 12:54:19 UTC
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.
Friday, 21 July 2017 17:24:13 UTC
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.
Friday, 21 July 2017 18:12:40 UTC
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
Friday, 21 July 2017 19:07:00 UTC
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.
Rich Ellis
Friday, 21 July 2017 19:07:38 UTC
0xAB_CD_EF is a C#7ism where you can add underscores in Hex literals to make long ones easier to read.
Scott Hanselman
Friday, 21 July 2017 19:42:01 UTC
I will try them, but I would really like to see a Consolas ligature font. Consolas seems so natural for a VS user.
GabrielGM
Friday, 21 July 2017 21:00:03 UTC
I'm waiting for consolas to support ligature. You're MS guy may be you can do something about it.
vanh phom
Friday, 21 July 2017 21:36:36 UTC
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
Friday, 21 July 2017 22:55:00 UTC
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 ;)
will
Friday, 21 July 2017 23:01:13 UTC
@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.
Anon
Saturday, 22 July 2017 00:09:51 UTC
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.
Anon
Saturday, 22 July 2017 01:00:41 UTC
Being using firacode in VS and VSCode since it announcement. Love it!
Viktor
Saturday, 22 July 2017 03:52:19 UTC
Insightful post keep it up
Saturday, 22 July 2017 04:22:52 UTC
Awesome post
Saturday, 22 July 2017 04:39:13 UTC
Great post
Saturday, 22 July 2017 09:52:26 UTC
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.
spudgun
Saturday, 22 July 2017 13:46:49 UTC
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)".
mike
Saturday, 22 July 2017 21:46:37 UTC
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.
jgierer12
Sunday, 23 July 2017 14:03:04 UTC
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
Sunday, 23 July 2017 21:13:57 UTC
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.
hannenz
Monday, 24 July 2017 07:19:57 UTC
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.
Jakub Januszkiewicz
Monday, 24 July 2017 10:06:35 UTC
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
Monday, 24 July 2017 11:20:25 UTC
Download cinemabox hd app on any device to watch movies gmail sign up free
Monday, 24 July 2017 11:44:22 UTC
Please avoid animated gifs on your blog. I have it up on my igHome page, and it's really annoying.
Monday, 24 July 2017 13:27:58 UTC
"...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.
Finnur Hrafn Jónsson
Monday, 24 July 2017 23:57:47 UTC
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
Tuesday, 25 July 2017 01:37:04 UTC
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.

Keith Nicholas
Tuesday, 25 July 2017 11:14:21 UTC
Somewhat it help me for my project. So, Thanks a lot. Project was - Happy Raksha Bandhan Images
Wednesday, 26 July 2017 05:06:49 UTC
This is really a great article and great read for me. Its my first visit to your blog and i have found it so useful and informative specially this article.
I have bookmarked it and I am looking forward to reading new articles. Keep up the good work!
Also download here PSC Routine 2017
Wednesday, 26 July 2017 09:56:22 UTC
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! <--
Anders Madsen
Wednesday, 26 July 2017 17:39:13 UTC
great post
thanks for sharing
Wednesday, 26 July 2017 17:40:08 UTC
good article
thanks
Friday, 28 July 2017 19:41:04 UTC
My personal favorite to use for coding is the Cousine font.
https://fonts.google.com/specimen/Cousine
Xavier
Monday, 31 July 2017 09:37:56 UTC
This is a great post. So clear and easy to follow. Thanks for the tangible and attainable help. All your hard work is much appreciated.
Wednesday, 02 August 2017 14:24:16 UTC
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
ShadowFox
Thursday, 03 August 2017 01:28:17 UTC
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.