Font design in 7 days
How I taught myself to create and publish a font in 7 days
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:
- Pick a script
- Sketch out the characters
- Run it through my colleagues
- Vectorize them into .svgs
- Pull them into a font editor
- Export a web compatible format
- Write a simple app for the web using the font
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.
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.
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.
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.
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.
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.)
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.
