Designing a Coding Font
General design thoughts and a slightly different approach when designing Monoid — an open source coding font.
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.
Monoid
- Legible —It should be easy to read and tell the letters apart.
- Compact — More code on your screen is always better.
- Pretty — Because we look at code for hours every day.
Fira Mono
Part of the great Fira font family by Mozilla.
- Pretty — Especially at bigger sizes. The signature “a” is just 😛.
Source Code Pro
The “jack of all trades” when it comes to monospaced fonts.
- Versatile — Can be used for almost anything and get away with it.
Pragmata Pro
Is another great coding font.
- 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.
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:)
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