What sets Dank Mono apart?

Designing a coding font for aesthetes with attention to detail

Phil Plückthun
7 min readApr 29, 2018

--

You might’ve seen “Dank Mono” recently. A couple of months ago I started to work on creating an entirely new coding font from scratch. There were a couple of motivations behind some of the design decisions that I’ve made along the way, and how better to explain them than in a concise post?

Early preview of the font with its basic glyphs, See: https://twitter.com/_philpl/status/983050429419458561

I am not a typographer nor a designer. However, I am a developer, and I care deeply about my everyday work environment and the code I look at for multiple hours a day. I learned the basics of typography slowly but steadily with the goal of creating “Dank Mono”. It has been a tedious process of reading every I article I could find, iterating slowly, sketching glyphs and discarding drafts, but in April 2018 I was finally able to release my font publicly.

Initially, you might compare Dank Mono to other coding fonts you know, Fira Code, Monoid, Operator Mono, or countless others, but the goals of each of these fonts are quite different. I can’t speak for every typographer who created a coding font, but I can explain my specific considerations of how I designed mine. I believe that Dank Mono has a unique idea that will set it apart.

Aesthetics up close

The main goal of Dank Mono is simple. When coding on a comparatively high resolution display at a font size of 13–14px, does it make sense to optimise a coding font for anything lower than that, like some coding fonts do?

As developers, our job involves looking at code—be it our own or someone else’s—for almost the entirety of a typical working day. Sometimes we might enjoy writing some code, or we might dislike it, or struggle to get it just right.

When dealing with a multitude of different problems when writing code, we might forget to think of ourselves. Putting a little time into the details of your coding environment can make a huge difference in making you happy at work.

Dank Mono is about details and aesthetics. It doesn’t compromise to optimise rendering at small font sizes. At that point coding can become an endless strain of looking at a lot of text as if it was far away. Instead it focuses on making all glyphs as delightful as possible as sizes you’ll actually use.

When you look at certain features of the glyphs, you will see a lot of details in the cornering that are typically avoided by coding fonts. While some of these features make Dank Mono unsuitable at small sizes, they contribute to the overall feel of the font.

Note that some features of Dank Mono are invisible at smaller sizes or would contribute jaggedness at sizes below 10px. These are specifically for presentational purposes, but are indeed visible on high-resolution displays even at 14px sizes in a subtle way.

In short, Dank Mono is not a font that is optimised to look good on older, low resolution displays, at small font sizes. It is meant to be used at a comfortable font size for most, and its details would allow you to scale the font size up so that you can use it to even present your code to others.

Fun & familiar

An important part of every coding font is that every letter and symbol should be immediately recognisable while still adhering to the monotone spacing.

When you deprioritise other goals of a coding font, like a very clear geometric form and rendering on small pixel grids, it is possible to call upon a wide variety of “familiar” feeling shapes for basic letters. Furthermore it’s possible to introduce “fun” curves that feel less rigid.

Note how Dank Mono’s “a” introduces more curves. Especially the corner curving into the “bowl” here is a recurring feature that in my opinion adds a lot of character to the font and feels more friendly.

These features are reminiscent of regular sans-serif fonts, that are not intended for coding. Dank Mono is a mix of different ideas and I’ve tried not to take in too many “established” patterns of existing coding fonts.

Some glyphs are very different from what you’d expect in a coding font. In its “Q”, Dank Mono takes inspiration from “Sweden Sans”, a font iconically crafted from unique features found on Sweden’s signage.

It’s also worth noting that Dank Mono attempts to apply reasonably symmetric forms, which can here be compared to Operator Mono balancing out the Q’s tail.

No fear of being different

For me this was all about trying out new ideas and seeing if people respond well to them. One of these ideas is an “f” with a descender, which is not commonly seen in a coding font.

Fun fact: This is a personal touch that was left over from the sketching phase. I handwrite my “f”s with a descender so this is one feature that I incorporated into the font.

Here’s a comparison of Dank with Fira. You can clearly see the low descender versus Fira’s “f” ending at the baseline. Also noteworthy is Dank’s very less openly curved ascender.

In summary, Dank Mono is taking in non-coding glyphs’ features as mentioned before, and it tries to apply different takes on some common coding glyphs.

Italics are like a pinch of herbs

After having used Operator Mono for a long time, I’ve learnt to value its italic style. It’s especially great for keywords and comments in code.

You will notice however, that a lot of italic glyphs in Dank are a little more measured and don’t feature as “enthusiastic” strokes as Operator, which I believe helps to make the italic glyphs fit in more with the regular ones.

Spacing is a terrible chore

I found spacing to be the hardest part of creating the font. In a monospaced font small details can dramatically alter the felt space between glyphs. A lot of it comes down to adjusting the side bearing, essentially the centring of a glyph. But in some cases serifs have to be added to an otherwise sans-serif font to make up for the negative space of the font.

The solution in Dank Mono’s case is as mentioned to add serifs to a couple of letters (i, l, r, I), but these serifs should not take up more space than is necessary to reduce an excessive size of the side bearing.

It’s also worth noting that, again, this glyph is not strictly geometrical and avoids having too many right angles. It has a nice rounded corner and the upper serif is tiny compared to Operator Mono and Fira Code.

Note: It’s important to mention that Operator Mono, as far as I understand, is going for a “typewriter”-like style, which makes some of its features more extreme.

Collaborative iterations

I like to take in as much feedback as I can. For that reason I’ve created a GitHub repository for the font, purely for the purpose of GitHub issues and a potential, future project board for prioritisation. If you have any suggestions or feedback, feel free to take a look: https://github.com/kitten/dank-mono

Hopefully we can work towards a versatile font that helps you to enjoy coding even more. Cheers!

A code snippet using Oceanic Next as seen on the dank.sh site

What do you think?

I hope this has been a comprehensive overview over what Dank Mono is trying to be and achieve, and explains some of its features that set it apart.
Please let me know if I should write more articles like this one, with more comparisons of glyphs or other case studies. What could be next?

  • A reflection on some current and future ligatures?
  • A closer look at programming symbols?
  • A look at more letters?
  • A look at diacritics and the ongoing effort of internationalisation?

Most importantly, if you like what you see, check out Dank Mono’s website at https://dank.sh to see more examples and to purchase a licence. If you decide to buy the font, here’s a discount code, valid for the first 10 people: “medium-april28–28223”

--

--

Phil Plückthun

FRP, React, RxJS & the likes • @FormidableLabs • @reactivate_ldn • Core Contributor of styled-components 💅 • Let’s put some CSS in your JS! 💥 • 🐙🍕☕⚛