DEV Community

Cover image for How I ended up creating my own programming font...
psudo-dev
psudo-dev

Posted on

How I ended up creating my own programming font...

TL;DR

The second version of psudoFont Liga Mono is a programming font with ligatures, inspired by Menlo/Meslo and IBM Plex Mono/Lilex.

If you want to skip the story and just get the font, you can download it here, in the psudoFont Liga Mono repository.

psudoFont Liga Mono Example

psudoFont Liga Mono was born... twice!

This was what I actually wanted from the get-go, a cohesive font family, with a thinner regular style and an italic that I liked. But I didn't think that I was going to go through all the hustle of creating my own font.

In the end it all came down to not feeling that itch anymore. And that was also how I ended up creating my own color theme for VSCode: Nebula Oni Theme - the theme used to render the code examples in this post.

How did I end up here?

Like I said previously, I was in search of the perfect programming font - for me, of course.

I ended up researching about it because, at the time, I wanted to mix and match two different fonts in one. My go-to font was Menlo/Meslo, but I thought it was a bit too thick, and I liked the italic version of IBM Plex Mono/Lilex, but not the rest of it.

With what I was able to learn how to use parts of Meslo for the regular, bold and bold italic and Lilex for italic. Although they were different, they were close enough to work together, and I thought that was that, the end.

I thought that it would suffice to calm down my itch since the alternative would be to learn how to edit glyphs, redesign lots of them, make them work together, etc. and that would be too much work for another thing that I had no idea where to start.

But I underestimated the itch - and myself too -, so just a month later, I started to work on this new version, this time not just a Frankenstein font but a proper font family.

How to make a font?

I didn't know the answer to that question but then, after some research, I found out that the glyphs were basically an SVG file and that I was able to copy from the font editor to Adobe Illustrator - a software I know better - and edit the vectors there and then copy it back to the font editor.

One of the problems I had was that Lilex had 1000 UPM - think it like 1000 points of resolution - while Meslo had 2048 UPM. You couldn't simply copy one to the other, not to mention, the thickness and italic angles between these two fonts were not the same.

After a few days and hours and hours messing with it, I've changed lots of details and redesigned the glyphs to make it more cohesive between all instances of the font, and I thought I was done.

I had no idea it would take another 2 or 3 redesigns and a month until I was actually done for real.

Learning process

I've learned a lot during the process but copying and redesigning in Adobe Illustrator, exporting SVGs, importing them back to the font editor, etc. That was certainly NOT optimal.

I could say that I jumped the gun a bit, I should have learned how to use the font editor first, but I was too eager to get started that I put that aside for a bit - until I struggled enough that I had no alternative other then actually learning it.

The previous process was very repetitive and time-consuming, which is prone to errors, not to mention that it was harder to make the glyph's curves and corners more consistent.

I also managed to scale Meslo down to 1000 UPM, so I could copy and paste directly from one to the other, which also took a while - but by the end of the project I ended up scaling all the glyphs to 2048 UPM anyway.

In the last version, I had to almost start completely from scratch again, but this time I knew what I was doing, so it was faster and easier. But I still had to review several times until I was satisfied with the result, in other words, until the itch was gone and there was nothing else I wanted to change or revise.

I mostly edited through the font editor, only going to Illustrator for some specific things that were easier to do there. I have to admit that I still don't know how to use the font editor properly, but I've learned enough to get a result that I felt satisfied with.

Design choices

I used Lilex as a base because it would be easier than starting from scratch or making all Meslo glyphs thinner, plus, I would have to adjust the x-height of all characters of one of the fonts.

Lilex has 1000 UPM, so I scaled up all glyphs to 2048 UPM, which seems to be the standard for most new fonts. I had previously scaled down Meslo to 1000 UPM because I was having issues with scaling it up - but after some effort I was able to solve it.

For regular I kept Meslo as a reference but there were also some symbols, marks and even small details that I preferred from Lilex - like the ending's curves and angles - so I used those as well.

Lilex's italic had a lot of sharp corners, so I redesigned them all to be more rounded and smooth. This small detail made me redesigned lots of glyphs. I also changed some characters like w, v, r, {, }, @, 5, 6, 9, etc. Actually, I had to change the numbers in both regular and italic.

psudoFont Liga Mono Example

Another thing that I didn't like about Liga Meslo LG M DZ were the ligatures combinations for fi, ffi, fl, ffl, etc. They get too close together, I don't like how it looks. So I'm not supporting these ligatures.

Meslo had almost double the glyphs compared to Lilex - which already had more than 1400 glyphs -, and it wouldn't be viable for me to redesign and adjust all these extra characters, so I didn't. They don't affect the overall use, it still supports all Lilex ligatures and symbols and some extras I included.

Is the itch gone?

For now, yes. But who knows, maybe in a few months I'll be back here again, creating version 3.0... NOT! I hope that at best I only have to do minor adjustments and fixes in the future, but no font overhaul.

Considering that when this all started I didn't know how to edit a single glyph, all the challenges in between and 3 redesigns later, I would say I liked the final result.

Although it was inspired by Meslo and Lilex, a lot of glyphs are unique to psudoFont Liga Mono, so I can say it's its own font family. But this seems to be a common practice in the community.

If you've read until here, I appreciate it. I hope you found it interesting. Also, give psudoFont Liga Mono a try, and ultimately, if you really like it, would you consider buying me a coffee to support my work? Thank you! Spread the word!

Examples

Click on the images to see a larger version with more details, the low-res image rendering is pretty bad for texts with dark backgrounds.

  • TypeScript

Hourglass Example
(Nebula Oni Theme: Hourglass/Grey)

  • Python

Cerberus Example
(Nebula Oni Theme: Cerberus/Glacial Blue)

  • C

Spirograph Example
(Nebula Oni Theme: Spirograph/Purple)

  • Terminal

Terminal Example

Top comments (0)