Giter VIP home page Giter VIP logo

monaspace's Introduction

Monaspace

The Monaspace type system: a monospaced type superfamily with some modern tricks up its sleeves. It is comprised of five variable axis typefaces. Each one has a distinct voice, but they are all metrics-compatible with one another, allowing you to mix and match them for a more expressive typographical palette.

Letters on a grid is how we see our code. Why not make those letters better?

✨ An exploration from GitHub Next. ✨ See the full story of Monaspace at monaspace.githubnext.com.

🔤 Download the latest release 🔤

image

Overview

Monaspace is made available as both a variable-axis font and as static builds. You can install them both side-by-side; their family names are distinct. For example:

  • Monaspace _____: the static family
  • Monaspace _____ Var or VF: the variable family

The variable fonts have one file per family (Neon, Argon, etc). Modern and convenient!

The static fonts have one file per cut per family. The variable axes have named stops for each of the axes, like light or bold for weight, italic for italics, and semiwide and wide for width. The combinatoric explosion of all these properties means that the full installation of static fonts involves hundreds of font files. But for situations which don't yet support variable fonts, the static builds give you a wide variety of stops throughout the range of each axis.

Coding Ligatures

There are eight groups of coding ligatures, separated into stylistic sets. You may be able to selectively enable or disable individual sets:

  • ss01: ligatures related to the equals glyph like != and ===.
  • ss02: ligatures related to the greater than or less than operators.
  • ss03: ligatures related to arrows like -> and =>.
  • ss04: ligatures related to markup, like </ and />.
  • ss05: ligatures related to the F♯ programming language, like |>.
  • ss06: ligatures related to repeated uses of # such as ## or ###.
  • ss07: ligatures related to the asterisk like ***.
  • ss08: ligatures related to combinations like .= or .-.

You must enable discrectionary ligatures first, often using the dlig setting. See below for editor-specific instructions.

A visual glossary of code ligatures available in the Monaspace type system

Desktop Installation

MacOS

You can manually drag the fonts from the fonts/otf and fonts/variable directory into Font Book.

There is also a script which automates the deletion of all Monaspace fonts from ~/Library/Fonts and then copies over the latest versions. Invoke it from the root of the repo like:

$ bash ./util/install_macos.sh

Webfonts

All files with a .woff or .woff2 suffix are intended for use on the web. You do not install them with your operating system, but rather add them to your web development project.

As with the desktop fonts, they are made available both as variable and static fonts.

Editors

Visual Studio Code

Texture healing and coding ligatures are controlled by the same setting. You can enable either, or both.

If you only want texture healing and basic coding ligatures, add the following line to your settings.json:

  "editor.fontLigatures": true,

Note

This setting is not available from the graphical settings editor, you must create it manually.

If you want more coding ligatures, you must customize that setting to specify all of the sets you want enabled:

  "editor.fontLigatures": "'calt', 'liga', 'dlig', 'ss01', 'ss02', ... (more stylistic sets) ...",

Note

You must start the setting with 'calt', 'liga', 'dlig'! The stylistic sets will not have any effect without enabling contextual alternates, ligatures, and discretionary ligatures.

If you want coding ligatures but do not want texture healing, you can elide the calt setting:

  "editor.fontLigatures": "'liga', 'dlig', 'ss01', 'ss02', ... (more stylistic sets) ...",

Contribution

There's no formal contribution guide yet! If you're interested in contributing to the typefaces, you should read the Texture Healing guide, as it explains how to produce the neccessary alternate glyphs.

Renamer utility

This is a convenience utility which renames moves the built fonts into the respective directories. You will need Deno installed, and invoke it thus:

$ ./util/renamer.ts --src="~/path/to/the/built/fonts"

License

SIL OFL. See LICENSE.

Support

Please file issues on this repo. Monaspace is not a supported product; do not reach out to GitHub support with questions as they do not provide support for GitHub Next explorations.

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.

Lettermatic

lettermatic logo

GitHub Next

GitHub Next Logo

Special Thanks To

  • Anna Thomas
  • Marg Chronister
  • Jane Solomon

monaspace's People

Contributors

idan avatar colebemis avatar juanrgon avatar robwalkerco avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.