Designing a Coding Font

General design thoughts and a slightly different approach when designing Monoid — an open source coding font.

Andreas Larsen
Jul 18, 2015 · 4 min read

This article is fairly short. I’ll go into detail in part 2, 3…etc. which I’ll write soon. I’m @larsenwork on Medium, Twitter and GitHub

UPDATE: Read part two “Distinguishable Glyphs in Coding Fonts” here.

Another coding font?

I’ve kept changing and tweaking other coding fonts so now that I’ve learned how to design fonts I wanted to make a no compromise coding font of my own.

It’s called Monoid and it’s open source with ♥︎ and all that fad.

Compromise

When (type) designing you’re solving multiple problems at a time. The solution to one problem often conflicts with another problem.

I started by writing down an ordered list to help maintain a clear focus and make consistent design choices throughout the design process.

Priorities

These are the priorities I made for Monoid. I’ve also listed the top priorites for Fira Mono, Source Code and Pragmata Pro below — those are just my interpretation.

Image for post
Image for post
Image for post
Image for post
I’m using 3 fonts for comparison throughout these articles: Source Code Pro, Pragmata Pro and Fira Mono. They’re great fonts with different qualities.
Image for post
Image for post
Image for post
Image for post

Monoid

  1. Legible —It should be easy to read and tell the letters apart.
  2. Compact — More code on your screen is always better.
  3. Pretty — Because we look at code for hours every day.

Fira Mono

Part of the great Fira font family by Mozilla.

  1. Pretty — Especially at bigger sizes. The signature “a” is just 😛.

Source Code Pro

The “jack of all trades” when it comes to monospaced fonts.

  1. Versatile — Can be used for almost anything and get away with it.

Pragmata Pro

Is another great coding font.

  1. Compact — One of the most narrow/compact ones out there.

A different approach

I chose to take the legibility priority one step further by looking at what my prefered line height for coding was. It was 15px so I wanted Monoid to look really sharp at that specific grid size — i.e. maximum legibility at 15px.

This can be achieved in different ways:

Bitmap

With bitmap fonts you “simply” take that grid a fill the relevant pixels to create the glyphs.

  • Pros: Perfectly crisp at a specified font size. Nostalgia.
  • Cons: Jagged. Not scaleable.
Image for post
Image for post
Image for post
Image for post

Outline

You don’t normally think too much about the grid when designing outline fonts (conventional digital fonts). You draw the font to look as good as possible and often inspect the letters by printing at 300 dpi.

Then you’d hint it. Hinting is basically distorting the shape at smaller sizes to make it fit the grids as much as possible. Hinting can be done automatically which gets you decent results. Doing it manually is obviously better but it’s really time consuming and boring.

The Monoid Way…

What I’ve done is basically combining the two approaches and drawn outlined glyphs to fit the 15px grid initially.

The grid obviously limits your resolution when drawing so that e.g. the “M” and “N” end up being equal width but the resulting letters are very sharp at 15px — with almost bitmap like sharpness.

Image for post
Image for post
Monoid, Fira Mono, Source Code Pro and Pragmata Pro

The End

Next I’ll probably write about designing the individual glyphs and/or what to keep in mind when designing a font optimised for coding. Stay tuned:)

You can find parts of this article and future articles in this video. Recorded at Netcompany in Copenhagen.

Links

Larsenwork

Articles on web and type design+development

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store