5 min read

The finest (and free) ligature code fonts

Sweet ligatures. They make the code more expressive and easier to read. I can’t go back anymore now. There are gorgeous arrows and sassy comparisons all over my lizard brain. I welcome you to the world of open source code fonts with well-made ligatures and finely tuned spacing.

The editor used in the making of the screenshot is the open source editor from Microsoft, Visual Studio Code. If you feel for trying it out in VSCode you should open settings (cmd-,/ctrl-,) and enable “Font Ligatures”. Be sure to select a font family that supports ligatures as well. The font size used in the screenshot is 12pt.

This is the mashup of characters I used to create the screenshots:

ABCDEFGHIJKLMNOUPQRSTUVWXYZ
0123456789!&#(){};
www ~= ~- ~@ #! #: ## ### ####
#{ #= #: ..< 0xFF // /// </> <!--
i++ ++i *** `${}` !! i** i-- >> >>> <> /==
<-> <- -> => <=> <== ==> <= >= !== != || &&
<~~ <~ <+ >>= <<= ->>
<|||<|| <| <|> |> ||> |||>
<!-- HTML Metadata  --> 

const font: string = 'Fira Code iScript'
const price: number = 0

// TODO => Refactor in the far future
() => {
  if ((font.length !== 0 && price ** 0 === 0) || font) {
    return '<html>Awesome!</html>'
  }
}

Fira code

Github

Fira Code is a terrific choice when it comes to finding the most delightful code font with ligatures. There is a lot of development on it such as adding new ligatures so be sure to try it out to see if it fit you.

Monoid

Github

Monoid is another impressive font that is “crazy crisp at 12px/9pt”. They also have a nice website where you can see the font live.

Iosevka

Github

Iosevka comes with over 2000 glyphs and it is built code from code. If you feel for tweaking Iosevka you can adjust its parameters and built it yourself. They have a really aesthetic pleasing website where you can see it live.

Hasklig

Github

Hasklig is a fork from the superb Source Code Pro from Adobe with ligatures added.

Fixedsys Excelsior with ligatures

Github

Fixedsys Excelsior is retro looking font with fine ligatures sprinkled on top.

DejaVu Sans Code

Github

This font is based on DejaVu Sans Mono but with added ligatures.

Victor Mono

Github

Victor Mono is a newcomer with semi-connected cursive italics and many ligatures. It also comes in seven weights and they have a lovely website to see it in action.

Cascadia Code

Github

Cascadia Code is a fresh code font with programming ligatures created by Microsoft. It is made specially for the new Windows terminal.

Cursive fonts

You probably have seen some people have delightful cursive text for certain symbols in the editor. I believe most of them are using the paid font Operator Mono but if you don’t want to pay for a font then there are some great free alternatives out there. They usually combine a ligature font (Fira Code etc.) with a cursive font to create the effect.

Some of them are:

To make this work in VSCode, you have to paste this in the settings.json. This snippet is taken from the repository to Firicico.

"editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": [
          "comment",
          "entity.name.type.class", //web.archive.org/web/20220120233411/https://class names
          "keyword", //web.archive.org/web/20220120233411/https://import, export, return…
          "support.class.builtin.js", //web.archive.org/web/20220120233411/https://string, Number, Boolean…, this, super
          "storage.modifier", //web.archive.org/web/20220120233411/https://static keyword
          "storage.type.class.js", //web.archive.org/web/20220120233411/https://class keyword
          "storage.type.function.js", // function keyword
          "storage.type.js", // Variable declarations
          "keyword.control.import.js", // Imports
          "keyword.control.from.js", // From-Keyword
          //"entity.name.type.js", // new … Expression
          "keyword.control.flow.js", // await
          "keyword.control.conditional.js", // if
          "keyword.control.loop.js", // for
          "keyword.operator.new.js", // new
        ],
        "settings": {
          "fontStyle": "italic"
        }
      }
    ]
  }

Fira Code iScript

This is a mashup of Fira Code and Script12 to make certain symbols appear cursive.

Github

Editor support

Most editors support it but some require a plugin for it to work. The editor support section on Fira Code’s Github repo sums it up. If you are not using some obscure editor from the 90’s you should be good to go.

If you want to test them out without installing them on your computer then you can try most of them on Programming Fonts.

Happy coding with ligatures added!

© 2024 Andreas Rein