One superfamily.
Five fonts.
Three variable axes.
Since the earliest days of the teletype machine, code has been set in monospaced type — letters, on a grid. Monaspace is a new type system that advances the state of the art for the display of code on screen.
Every advancement in the technology of computing has been accompanied by advancements to the display and editing of code. CRTs made screen editors possible. The advent of graphical user interfaces gave rise to integrated development environments.
Even today, we still have limited options when we want to layer additional meaning on top of code. Syntax highlighting was invented in 1982 to help children to code in BASIC. But beyond colors, most editors must communicate with developers through their interfaces — hovers, underlines, and other graphical decorations.
Monaspace offers a more expressive palette for code and the tools we use to work with it.
Font playground
What if?
Monospaced fonts are generally incompatible with one another. Each one uses different metrics, making it impossible to mix different fonts. Each Monaspace font is designed to be seamlessly mixed and matched. Layer more meaning onto code, with a palette that goes beyond colors and bolder weights. Build interfaces for code that require more structure and hierarchy.
What if Copilot had its own voice?
Ghost text makes it harder to parse and evaluate code suggestions. What if the typography made it clear?
What if Copilot spoke in its own typographical voice, and you could see which parts of your code it suggested after the fact?
Texture healing
Monospaced type suffers from an inherent problem of uneven texture — text with some areas that are significantly denser, and some that have an excess of whitespace. It’s an unavoidable consequence of trying to fit every letter into a uniform box, when some letters want more space, and some want less.
These shortcomings have been the same since the heyday of the Teletype machine in the 1960s. Texture Healing is a novel technique that evens out the density of monospaced type, bringing it closer to how proportional type has looked for centuries.
Texture healing preserves the monospace grid, and works in most editors without needing new software or editor plugins. How does it work?
In proportional typefaces, every glyph is designed with a unique width. The design of an m can be wider than the design of an i. Every glyph gets the space it needs, and no letter is stuck with too much or too little.
The design of each letter incorporates some amount of whitespace on both sides of a glyph. These sidebearings create the visual room that help us distinguish one letterform from the next.
Too little, and the letters will run together. Too much, and the letters will look disconnected.
But in monospaced faces, every letter must be the same width, regardless of what that letter needs.
Adjusting the sidebearings isn’t enough. The letter must be altered to either fill up the box, or squeeze into it — and still leave a little bit of room for sidebearings.
Narrow letters like l and i must be designed with exaggerated serifs to better fill the monospace box. Even with these synthetic additions, these narrow letters have more space than they need.
Wide letters like m and w are crammed into their boxes, and their shapes are visibly distorted compared to the rest of the alphabet. Their strokes are thinner, and the negative space inside the glyph is also compromised. There’s little room for these glyphs to grow bolder without turning into an unreadable blob.
Even though these letters have less space than they want, they still need to leave some room for sidebearings so they don’t crowd the adjacent letters.
Step by step
Let’s unpack how texture healing is applied.
In the word “calming” there are two pairs that can be texture healed.
The l has space to give, and the m would benefit from more space.
In the first pass, the generic l is replaced with one that is narrower and shifted to the left, away from the m.
The generic m can then be replaced by a version that extends to the left edge of the space.
Monaspace contains alternates for glyphs that can shrink or grow in either direction.
But texture healing can also work in more than one direction.
The next pair of characters is also eligible for texture healing.
As before, the letter with space to give is replaced with one that cedes some whitespace to its neighbor.
This time, it shifts to the right.
And now the m is replaced once more, with a variant that extends in both directions.
Texture healing finds the most visually compromised pairs and heals them with more legible replacements.
The resulting text still obeys the monospaced grid.
640k styles ought to be enough for anyone
While the variable fonts support any combination you can choose, every Monaspace font also defines common named weights and styles for applications that do not yet support variable fonts. The three axes are weight, width, and slant.
The weight axis ranges from 200 to 800
- 200: Extra Light
- 300: Light
- 400: Regular
- 500: Medium
- 600: Semibold
- 700: Bold
- 800: ExtraBold
The slant axis ranges from 0 to -11°
The more negative the value, the more the letters are slanted. At the midpoint of the range some letters change their shapes to become true italics.
- 0: Normal
- -5.5°: Swap obliques for italic letterforms
- -11°: Italic
The width axis ranges from 100 to 125.
- 100: Normal
- 112.5: Semiwide
- 125: Wide
Code ligatures
Monaspace includes code ligatures for a broad variety of programming languages, organized into stylistic sets that you can enable or disable according to your preferences.
Each stylistic set is roughly designed around the needs of specific languages. For example, ss01 includes ligatures for character sequences commonly seen in JavaScript, and ss05 provides ligatures for operators in F#.
You can enable as many or as few of them as you like.
In addition to the eight stylistic sets, there are two additional utility OpenType features which you can enable:
calt (contextual alternates) activates texture healing.
liga activates customized spacing of repeating characters, like /// or ||. It is designed to avoid activating inside longer sequences like ////.
Visual Studio Code
Choose the stylistic sets you want to enable, and copy the following line into your settings.json:
Contributors
Monaspace was made with the goal of improving all code, for all developers.
GitHub Next set out on this journey in 2022, and we were fortunate to find a type foundry that shares our passion for improving software in Lettermatic. The result is a marriage of form and function that opens the door to new developer experiences, and that would not have been possible without the domain expertise and skill of the Lettermatic team, and the time they invested to work with GitHub Next on figuring out how typography ought to work for code.
For a full list of contributors, documentation, and the fonts themselves, visit the Monaspace repo.