GitHub Monaspace Case Study

Custom Fonts For

A LETTERMATIC CASE STUDY: MONASPACE

By Lettermatic

GitHub Next, an experimental research incubator within GitHub, first reached out to Lettermatic about fonts in August 2021. As we spoke with Idan Gazit, Head of GitHub Next, it became clear that he, like all of us at Lettermatic, had a strong appreciation for beautiful and functional typography. This shared interest led us to talking about typography designed for code editors, which we all had some questions about.

Why hasn’t typography for code editors changed much since the advent of modern development tools? Why aren’t there more options available to developers who want to customize their experience of writing code? There is no shortage of opinions about document formatting, syntax highlighting systems, or color themes for editors — but why are developers expected to pick a single typeface to work with every day? These questions would lead GitHub and Lettermatic on a journey to make Monaspace: a superfamily of five interchangeable typefaces designed specifically for code, and one of Lettermatic’s most ambitious projects.

Information

• № of Families: 5
• № of Styles: 42 static styles per family, 210 total styles + variable styles
• Classification: Humanist Sans, Grotesque Sans, Slab Serif, Script & Mechanical
• Released: November 2023
• Head of GitHub Next: Idan Gazit
• Vietnamese Consultancy: Donny Trương

All in all, each Monaspace font contains over 6,000 unique glyphs and supports over 200 languages. All five typefaces have three variable axes — weight, width, and slant — giving users high levels of personalization and accessibility features straight out of the box. Each family in Monaspace is designed on the same grid, which means you can mix and match fonts from this superfamily without breaking the grid of your code editor. The fonts also use a novel technology that we call Texture Healing, which adds a never-before seen level of legibility to monospace typefaces. In line with GitHub’s commitment to the open source mission, the entirety of Monaspace is open source and free to download by anyone with an internet connection.

The Brief & The Process

In order to have some perspective on this project, it’s valuable to do a brief tour through the history of how fonts usually work. Most typefaces in the Latin script are proportional, meaning that every glyph in the typeface is permitted to have a width that suits that particular letter. Eventually, as handmade typography made way for more mechanical processes, glyphs often were assigned the same widths throughout the alphabet to make the engineering more straight forward. These typefaces are called monospace, as opposed to proportional. The vast majority of typewriters were designed on monospace systems.

In modern code editors, we have inherited the monospace system. One particularly interesting thing about typesetting for code is that it has effectively evolved in its own branch of typographic hierarchy, separate from everything else. No other kind of typesetting uses color coding as the expected primary method of telling things apart.

Monaspace is a superfamily of five typefaces designed specifically to give developers a flexible toolkit to do their best work. This project supports a high level of personalization using font genre, weight, width, and slant, along with a new spacing technology we call Texture Healing to make code easier to read and digest at a glance.

Texture Healing

Texture Healing is the context-aware feature we developed for this project. This branch of the project grew out of our desire to solve a texture issue inherent to all monospaces: squished letters and large gaps of negative space produced when you force all letters, no matter their shape, into the same-sized box.

The biggest constraint of monospaces is that when you make all the glyphs the same width, some of the letters that like to be wider like 'm' and 'w', inevitably end up looking squished. On the other end of the spectrum, the letters that like to be narrower like 'i' and 'l', end up looking like they have too much empty space around them. These squeezed letters and extra white spaces make the texture of the text more of a strain to read.

The aim was to give wider letters more breathing room when they appear next to a narrower letter, making those typically squished letters more pleasant to read, all without breaking the monospace grid.