Font design in 7 days

How I taught myself to create and publish a font in 7 days

Ashis Panday
Jul 19, 2018 · 6 min read
Image for post
Image for post
Final Font Rendition as a Devanagari Calculator using Devcode

A TypeSprint! Making fonts & working to publish

I have a growing interest in Typography. Therefore I decided to create a font. The process wasn’t new. I had done a few courses in the past, when in college, but I’d never gone beyond the WIP (work in progress) stage.

This time around I was going to work to publish.

My Plan of action was rather straightforward:

Ambitious? Maybe.

But I wasn’t going to dwell over it too much.

1 Picking a script

I have a habit of overcomplicating things for myself. And so I did. I decided to work with Devanagari. It offers a set of challenges, just the right amount to get me excited on a project

  • For one, it is very different from Latin (one that I work with almost 90% of my time.)
  • It demands more number of glyphs and characters owing to its wider range of ligatures from its compound forms/conjunct consonants.
  • Some of which have very complex shapes and spirals
  • And nuanced curves corresponding to different writing styles (which I learnt through this process)
  • Also, from a personal stand point, I was poor at Nepali (my second language in school), and I thought this would be a fantastic way to get back to re-learning it.
Image for post
Image for post
Credit Unsplash

2 Sketching

Before I sat down at my drawing table, I quickly referenced the character sets of a few fonts I liked. I came up with the idea of making a mono-stroke font, like the ones they use in CAD softwares; an industrial style Devanagari (no proper reason whatsoever, besides the ‘unusualness’ of it).

For a Latin script I know exactly the letters to start off with — HONGUSKY (something I learnt during my ‘Type Design’ course in college under one of India’s most eminent typographer Prof. Mahendra Patel). These letters form the basis for all other glyphs in the font.

I didn’t have the same for Devanagari.

And so, I had to invent my own.

I started out by looking at all the alphabets and segregating them into different buckets based on their shape. For example—‘ga’, ‘jha’, ‘na’, ‘bha’ & ‘ma’ to me felt like they shared a similar structure. Therefore starting with ‘ma’ as my base for this particular set felt appropriate. Likewise, I did the same, so on and so forth till I had all the sets ready.

3 Feedback

I shared these sketches with my colleagues to see whether I’ve got them all correct.

Interestingly, I learnt that I write many characters very differently than my friends at work. For instance, the way they write the letter ‘ha’ was something that I had never seen before. Another insightful revelation was that we (as in the Nepali speakers) use the same character for the alphabet ‘cha’ and the numeral ‘6’ ; both are pronounced the same. Whereas Hindi speakers say ‘cha’ for the alphabet and ‘chey’ for the numeral ‘6’ and therefore write them differently.

4 Vectorize

Next up was to create svg files of each character. To do this I used “Dotgrid”, a simple vector editor from the guys at Hundred Rabbits.

Image for post
Image for post
Dotgrid interface

Dotgrid is real simple to use. I often use it to create vector icon sets. It provides you with a grid of dots to which your points snap. The toolbar has just the right amount of necessary options for you to play with. To the point, simple and lightweight.

It took me about a day or two to create most of the consonants and export them as svgs. I did face small hiccups and got stuck with a few alphabets—like the tail of ‘da’ or the ring of ‘na’. As I created each set, I lined them up in a row to check whether they looked like they belonged to the same family. I tried constructing words, shuffling them and kept going back to the editor to make small corrections. Sometimes, I made two or three alternatives of a character to see which one works best.

Image for post
Image for post
Test

This part of the process took the most amount of time. Even until the end I kept finding one flaw or the other and had started to get a bit frustrated. I knew that I had given myself very little time to do this. Still, the thought that I would not be able to complete it within this time was constantly buzzing around my head. I was approaching the deadline.

I paused, and went through my todo list. There was still a lot of work to be done. I panicked. I started thinking of alternatives. But I was pretty clear about my goal to use this font in a web project at the end of this exercise.

It was a difficult call, but I ended up skipping the few unfinished consonants and started creating the numerals and other symbols. The idea being that I would write a simple calculator app.

I was finally moving again. It took me an evening to create all the numbers and a few symbols for the intended calculator design.

Image for post
Image for post
Numbers & Symbols

5 Font Editor

I had bought Birdfont’s professional license earlier this year, thinking I would start learning the software sometime soon. Unlike more professional editors like Fontographer, Bird-font seemed to have a much smaller learning curve and therefore perfect for beginners. The interface is simple and they also have a quick-start guide that was more or less sufficient for this project.

Image for post
Image for post
Birdfont interface

Tip: Before you bring your svgs into the editor make sure you convert them into outlines. I’m certain that there’s a different way to export strokes or to recreate them within the editor but for then this method seemed to work to my favour.

(Birdfont.org already have a good set of tutorials in their website, so I won’t be going over them here.)

Kerning and spacing each character to the desired output was a painstakingly long drawn task. However, the output in the end of it all was thoroughly satisfying. I exported the font file and installed it in my system for one final inspection (I had done multiple exports and installations by this time. At times the font looked too thin, or the spacing was a bit off, or a character need a slight tweak.)

Image for post
Image for post

6 Export For Web

The final_final_forsurefinal export.

7 Using The Font

I christened my font “Devcode” — Devanagri for code :)

I wrote a simple font end code for (the face of) a calculator. You couldn’t use it; my javascript skills are still in the making. But I created a few mockups in Sketchapp to share with my team. And that was it.

Image for post
Image for post
Final Web App

Resources

DotGrid by Hundred Rabbits

Birdfont by Johan Mattsson

‘Work To Publish’ — Jack Conte

Treemouse

We work with the invisibles and stir revolutions

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