Font Ligatures for Fun and ... Fun
1 min read

Font Ligatures for Fun and ... Fun

Have you ever seen screenshots of someone's editor and they have a cool arrow instead of |> or ->? Those are font ligatures, which Wikipedia describes as "In writing and typography, a ligature occurs where two or more graphemes or letters are joined as a single glyph." They're more than just special cases where two letters don't have any kerning, but rather, they're specifically designed to fit in with the given font.

I always assumed it would take Effortâ„¢ to set up a font with ligatures, or that it would be expensive, like Operator Mono, at $199! Turns out, there's a great free alternative, and it only takes a couple minutes to set up with VSCode.

Fira Code is an extension of Fira Mono, and the ligatures look gorgeous. Trying it out is easy:

  1. Clone the repo with git clone git@github.com:tonsky/FiraCode.git
  2. Open Font Book and hold Cmd+O to trigger Add Fonts
  3. In the Fira Code repo, select everything in distr/ttf
  4. In VSCode, open your settings, and navigate to Text Editor > Font
  5. Make your first font 'FiraCode-Retina', or just 'Fira Code' if you're on an older laptop.
  6. Tick the checkbox for Font Ligatures

...and that's it! You can switch to a different tab/pane and try typing |>, ->, or any other ligature you can see on the Fira Code readme.