monaspace.githubnext.com Open in urlscan Pro
2606:50c0:8002::153  Public Scan

Form analysis
0 forms found in the DOM

Text Content

 1. 
 2. /
 3. Monaspace




MONASPACE
MONASPACEMONASPACEMONASPACE

An innovative superfamily of fonts for code

DownloadLearn more
console.log(`Terminal dimensions: ${my_terminal.width} x
${my_terminal.height}`,) console.log(`Terminal dimensions: ${my_terminal.width}
x ${my_terminal.height}`,)
$l_optimized_time = $timing_obj->get_optimized_time($i_terminal_time);,)
$l_optimized_time = $timing_obj->get_optimized_time($i_terminal_time);,)
adjusted = [t.m_timingStart.to_millis() for t in log_lines if t >=
today_in_millis],) adjusted = [t.m_timingStart.to_millis() for t in log_lines if
t >= today_in_millis],)
std::transform(vec.begin(), vec.end(), vec.begin(), [](int num){ return num *
num; });,) std::transform(vec.begin(), vec.end(), vec.begin(), [](int num){
return num * num; });,)
let sumSensorReadings: u32 = (1..=10).filter(|x| x % 2 == 0).sum();,) let
sumSensorReadings: u32 = (1..=10).filter(|x| x % 2 == 0).sum();,)



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.

 * NeNeon
   Neon
   Neo-grotesque sans
   
 * ArArgon
   Argon
   Humanist sans
   
 * XeXenon
   Xenon
   Slab serif
   
 * RnRadon
   Radon
   Handwriting
   
 * KrKrypton
   Krypton
   Mechanical sans
   




FONT PLAYGROUND

JavaScriptHTMLCSSJavaPythonC++PHPF#
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// Import required module
const process = require('process');


// Define a class for Terminal
class Terminal_Dimensions {
constructor() {
this.width = process.stdout.columns;
this.height = process.stdout.rows;
}
}


// Implement timing
let timing_start;
const time_limit = 9999; // maximum time limit in milliseconds


const timing_start_m_ = () => {
timing_start = new Date();
};


const timing_end_m_ = () => {
let timing_end = new Date();
let time_spent = timing_end - timing_start; // in ms

return time_spent;
};


// Optimized function to test the timing mechanism
const some_function_w_ = () => {
for (let i = 0; i < 999999; i++) {
// Some operation
}
};


// Run function with timing
let my_terminal = new Terminal_Dimensions();
console.log(`Terminal dimensions: ${my_terminal.width} x
${my_terminal.height}`);










Font size16
Weight300
Width100
Slant0
Texture healing
Ligatures
Grid
ThemeAtom One DarkDraculaDarculaGitHub DarkGitHub LightVS Code DarkXcode
DarkXcode Light

Mix & Match


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.

Shuffle font combination
mmmmmm

eeeeee

rrrrrr

gggggg

eeeeee

// What if tentative ideas looked handwritten?

/**
 * What if docstrings looked authoritative?
 */
class Terminal_Dimensions {
  constructor() {
    this.width = process.stdout.columns;
    this.height = process.stdout.rows;
  }
}


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?

// Before
const [isClicked, setClicked] = React.useState(false);
// After
const [isClicked, setClicked] = React.useState(false);

Feature


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?

calming
calming
calming
calming
calming
calming

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.


Shuffle word
Texture healing off
TIME_limitTIME_limit
Texture healing on
Texture healing works by finding each pair of adjacent characters where one
wants more space, and one has too much. Narrow characters are swapped for ones
that cede some of their whitespace, and wider characters are swapped for ones
that extend to the very edge of their box. This swapping is powered by an
OpenType feature called “contextual alternates,” which is widely supported by
both operating systems and browser engines.
Contextual alternates are normally used for certain scripts, like Arabic, where
the shape of each glyph depends on the surrounding glyphs. And they are also
used for cursive handwriting fonts where the stroke of the “pen” might have
different connection points across letters. Texture healing is a novel
application of this technology to code. See our instructions for enabling
texture healing in Visual Studio Code.



STEP BY STEP

Let’s unpack how texture healing is applied.

Texture healing off

Texture healing on

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.

Styles


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

verbatim
verbatim
nimblest
nimblest
foothill
foothill
metaphor
metaphor
effusive
effusive
plummier
plummier
horology
horology
Monaspace neon
sanguine
sanguine
platypus
platypus
cosmical
cosmical
zoetrope
zoetrope
mirthful
mirthful
latticed
latticed
yodeling
yodeling
Monaspace argon
halflife
halflife
luminary
luminary
ornithic
ornithic
newfound
newfound
sundries
sundries
ambulate
ambulate
clavicor
clavicor
Monaspace xenon
epigrams
epigrams
panorama
panorama
chummily
chummily
humanist
humanist
wavemark
wavemark
xenolith
xenolith
coiffure
coiffure
Monaspace radon
moondust
moondust
kenotron
kenotron
bedazzle
bedazzle
rhomboid
rhomboid
polymers
polymers
enigmata
enigmata
futurist
futurist
Monaspace krypton
Italic

Feature


CODE LIGATURES

Monaspace includes code ligatures for a broad variety of 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 sets:

calt (contextual alternates) activates ligatures that adjust the visual
positioning of some character sequences without altering their shape or
appearance. Activating this feature will also enable texture healing.

dlig (discretionary ligatures) activates a basic set of ligatures that are
shared by many programming languages and frameworks — mostly sequences of
repeating characters.

Visual Studio Code

Choose the stylistic sets you want to enable, and copy the following line into
your settings.json:

"editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'ss07',
'ss08', 'calt', 'dlig'",
Copy to clipboard
 * ss01 10
   
   ==
   ...............................
   ==
   ===
   ...............................
   ===
   =/=
   ...............................
   =/=
   !=
   ...............................
   !=
   !==
   ...............................
   !==
   /=
   ...............................
   /=
   /==
   ...............................
   /==
   ~~
   ...............................
   ~~
   =~
   ...............................
   =~
   !~
   ...............................
   !~
 * ss02 2
   
   >=
   ...............................
   >=
   <=
   ...............................
   <=
 * ss03 10
   
   ->
   ...............................
   ->
   <-
   ...............................
   <-
   =>
   ...............................
   =>
   <!--
   ...............................
   <!--
   -->
   ...............................
   -->
   <~
   ...............................
   <~
   <~~
   ...............................
   <~~
   ~>
   ...............................
   ~>
   ~~>
   ...............................
   ~~>
   <~>
   ...............................
   <~>
 * ss04 5
   
   </
   ...............................
   </
   />
   ...............................
   />
   </>
   ...............................
   </>
   /\
   ...............................
   /\
   \/
   ...............................
   \/
 * ss05 2
   
   |>
   ...............................
   |>
   <|
   ...............................
   <|
 * ss06 2
   
   ##
   ...............................
   ##
   ###
   ...............................
   ###
 * ss07 7
   
   ***
   ...............................
   ***
   /*
   ...............................
   /*
   */
   ...............................
   */
   /*/
   ...............................
   /*/
   (*
   ...............................
   (*
   *)
   ...............................
   *)
   (*)
   ...............................
   (*)
 * ss08 3
   
   .=
   ...............................
   .=
   .-
   ...............................
   .-
   ..<
   ...............................
   ..<
 * dlig 65
   
   <!
   ...............................
   <!
   ~~
   ...............................
   ~~
   **
   ...............................
   **
   ::
   ...............................
   ::
   =:
   ...............................
   =:
   ==
   ...............................
   ==
   =!
   ...............................
   =!
   =/
   ...............................
   =/
   !=
   ...............................
   !=
   --
   ...............................
   --
   <~
   ...............................
   <~
   <~
   ...............................
   <~
   </
   ...............................
   </
   ##
   ...............................
   ##
   (*
   ...............................
   (*
   ..
   ...............................
   ..
   ..
   ...............................
   ..
   ..
   ...............................
   ..
   ..
   ...............................
   ..
   /*
   ...............................
   /*
   /=
   ...............................
   /=
   //
   ...............................
   //
   &&
   ...............................
   &&
   ~~
   ...............................
   ~~
   ~>
   ...............................
   ~>
   *)
   ...............................
   *)
   */
   ...............................
   */
   \/
   ...............................
   \/
   ||
   ...............................
   ||
   |>
   ...............................
   |>
   ::
   ...............................
   ::
   :=
   ...............................
   :=
   :>
   ...............................
   :>
   :<
   ...............................
   :<
   =~
   ...............................
   =~
   =:
   ...............................
   =:
   ==
   ...............................
   ==
   =>
   ...............................
   =>
   !~
   ...............................
   !~
   !=
   ...............................
   !=
   !!
   ...............................
   !!
   >:
   ...............................
   >:
   >=
   ...............................
   >=
   ->
   ...............................
   ->
   <~
   ...............................
   <~
   <|
   ...............................
   <|
   <:
   ...............................
   <:
   <=
   ...............................
   <=
   <-
   ...............................
   <-
   </
   ...............................
   </
   #=
   ...............................
   #=
   ##
   ...............................
   ##
   (*
   ...............................
   (*
   .=
   ...............................
   .=
   .-
   ...............................
   .-
   ..
   ...............................
   ..
   ?:
   ...............................
   ?:
   ?.
   ...............................
   ?.
   ??
   ...............................
   ??
   ;;
   ...............................
   ;;
   /*
   ...............................
   /*
   /\
   ...............................
   /\
   /=
   ...............................
   /=
   />
   ...............................
   />
   //
   ...............................
   //
 * calt 24
   
   //
   ...............................
   //
   ///
   ...............................
   ///
   &&
   ...............................
   &&
   !!
   ...............................
   !!
   ??
   ...............................
   ??
   ?.
   ...............................
   ?.
   ?:
   ...............................
   ?:
   ||
   ...............................
   ||
   ::
   ...............................
   ::
   :::
   ...............................
   :::
   ;;
   ...............................
   ;;
   ..
   ...............................
   ..
   ...
   ...............................
   ...
   =!=
   ...............................
   =!=
   #=
   ...............................
   #=
   :=
   ...............................
   :=
   =:
   ...............................
   =:
   =:=
   ...............................
   =:=
   :>
   ...............................
   :>
   >:
   ...............................
   >:
   <:
   ...............................
   <:
   :<
   ...............................
   :<
   ..=
   ...............................
   ..=
   ..-
   ...............................
   ..-


Made with :heart:


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.





WHAT WILL YOU MAKE WITH MONASPACE?

Download

℣

© 2023 GitHub. All rights reserved.