Designing a Coding Font

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

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.

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.

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.

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.

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

• Part 2 — Distinguishable Glyphs in Coding Fonts
• Monoid — Preview and download page
• Ligatures and coding fonts — Another article of mine about Monoid
• Pragmata Pro, Fira Mono, Source Code Pro