How do you take letters hand-painted on paper and turn them into a typeface someone can actually use?
I'll walk you through my process of how I made the Little Wonder font, from my initial ink paintings of the letters to scanning, tracing and using Glyphs app to turn them into a fully fledged typeface.
This article is more of a general overview of the steps involved rather than an in-depth guide covering every single detail.
Painting the letters is the easy bit. Making a font isn't.
Painting all the glyphs is the fun part. That's the most enjoyable part. Making those letters into a font takes considerably longer. And to be honest with you, it's a total ball ache.
Little Wonder took me roughly a week, and that's fast for a typeface. But for me, it's still too slow.
The painting, that comes naturally. The other part, that's more of a slog.
Little Wonde is a script typeface I made using a Chinese ink dip pen and paper. Here's how it went from ink on a page to a working font, including the parts that took a hell of a lot longer than you might expect.
Why I chose a Chinese ink dip pen
I love the Chinese ink dip pen. I love dipping it into the ink, the different brush sizes you can get and the expressive marks it makes.
It allows you to create really thick brush strokes and really thin ones, simply by lifting your hand slightly and using a different part of the brush. That's what I love about it.
With this font, I wanted something expressive that flowed freely across the paper. That's why I chose the Chinese ink dip pen. It's big, it's bold, it's brash. Exactly what I wanted.
That was the look I was going for with Little Wonder. So off I went, painting my way through the alphabet.
Part One: Painting the Alphabet
Before you start painting on paper, it's a good idea to have a baseline, x-height, ascender and descender guides to help keep all your letters the same size.
What I normally do is draw out several sets of these guides using a thick marker pen. Then I place my A4 paper on top and put the whole lot on a light box so I can see the guides through the paper.
That way, I can keep everything consistent and reuse the same guides for each new sheet of paper.
I started by painting a complete alphabet on A4 paper.
This part comes naturally. I can work through the alphabet in less than an hour, painting, repainting and testing letters in ink as I go.
Then I started writing words and phrases.
That's when you find out whether your letters actually work together.
Part Two: Scanning the Ink Paintings
Once you've got all the painting done with your medium of choice on paper, then comes the tedious task of scanning them all in.
I tend to scan everything at 150 DPI. And yes, it's quite tedious. Coffee helps.
Once I had the letters, I physically scanned the sheets and opened them in Photoshop.
Then came the cleaning up.
There are plenty of tutorials online showing you how to do this, but basically, I just used Brightness and Contrast in Photoshop. I pushed both up until all the paper texture disappeared.
All I needed was a clean black-and-white version of my scanned-in paintings. I didn't need the paper texture, so I got rid of it completely.
Cleaning up all the scans in Photoshop is time-consuming, but it's relatively simple. You'll find tons of tutorials online showing you how to do it.
Organising the letters into layers
Once I've cleaned everything up, I cut each individual letter onto its own layer.
Then I copy all the different scans into a single Photoshop file. This makes life much easier later on when I want to trace everything in Illustrator using an action.
Part 3: Converting the Hand-Drawn Paintings into Vector Outlines in Adobe Illustrator
Little Wonder is a standard outline font, not an OpenType-SVG font. I needed to turn the scanned paintings into vector shapes.
I did that in Adobe Illustrator using Image Trace.
Create a trace preset experiment
Before tracing everything, I spent time setting up a preset. I wanted it to pick up as much of the ink detail as possible without creating too many points in the outlines.
For this particular font, I aimed for roughly a thousand points or fewer per glyph.
That was my working target, rather than a universal limit. The idea was to preserve the look without making the letters unnecessarily complicated.
Hundreds of layers. One useful Illustrator action.
I had hundreds of layers containing bitmap artwork that needed tracing. I recorded an Illustrator action. It worked through the layers in sequence: apply my Image Trace preset; hide the layer; move down to the next layer; repeat.
You just have to trust the process, so to speak. You can run the action five times and then just keep repeating it. You might want to stop halfway through to check that everything's working as it should, but it's such a quick process that it's hardly worth bothering.
Getting the letters onto a baseline
After tracing, I assembled the letters into a baseline grid in Illustrator. Basically, I set up guides for the baseline, ascender, descender and x-height. These would be used later with the Fontself plugin.
I dropped in the A first, then aligned the other letters and checked how they connected. I ended up with a huge, long line of letters, so I had to make my canvas massive.
It helps to put multiple lines on the same canvas. For example, you could have your capital letters on one line, lowercase on another, then symbols, numbers and so on. That really helps keep everything organised.
If a connection didn't work, I had two options. Go back to the paper and paint another letter, or be quite sneaky and adjust the vectors in Illustrator.
I did both.
When I adjusted the outlines, I tried my very best to keep the hand-painted feel. But you have to be pragmatic about it. You can't keep all the detail. It's just too many points. So something's got to give somewhere.
This is how I made Little Wonder. It isn't necessarily how I work now.
Part Four: From Illustrator to Fontself
Once I'd assembled and aligned the letters, I used Fontself, a plugin for Illustrator, to create an initial working font file.
I'm not going to explain how to use Fontself here. That's a whole article in itself. But if you like working in Illustrator first, Fontself basically saves you from having to copy and paste every single letter from Illustrator into Glyphs.
It reads your baseline and your glyphs and creates a working font file that you can then open in Glyphs.
It was a game changer for me when I first discovered the plugin. And the guys who developed it are really good guys. I've spoken to them many times.
I'd really recommend buying this piece of software. It's not expensive, and there's also a Photoshop version for creating OpenType-SVG fonts.
Part Five: Glyphs
Glyphs is a professional font design app. It's quite expensive to buy, although I think there's a lighter version available.
I'm not going to get into the whys and hows of using it here. That's a whole lot of information, and frankly, it would be a bit of an overload.
All you really need to know is that Glyphs is the app I use to create my fonts. I don't use any other font creation software.
Then I took the font into Glyphs to check all the outlines. There's nearly always a problem with the outlines, and it can take quite some time to fix collapsed points, handles and all the other little issues.
But basically, all you need to know is that I fixed the inconsistencies and made quite a few tweaks to get the font and all its points behaving properly.
Next came working out the left and right side spacing for each glyph.
And finally, the kerning. That's where the real work lies.
That's where most of the time went.
Why spacing and kerning took the longest
Spacing controls how the letters sit alongside one another. Kerning lets me adjust particular pairs.
With Little Wonder, those adjustments also needed to make the letters join correctly. The connecting strokes had to meet precisely.
I'd estimate that around 90% of the overall time went into this stage of making the font work: spacing, kerning, testing and fixing things.
Painting another alphabet would have been easy. Getting all those connections right took patience.
Testing in Photoshop and Illustrator
I didn't just look at the letters inside Glyphs and decide they were finished.
I exported a working font into a test directory, then opened Photoshop or Illustrator and typed samples.
I looked at how the letters fitted together, whether the connections worked and how the words felt as a whole.
Then it was back to Glyphs. Tweak here, tweak there. Export another version and test it again.
That back-and-forth was a substantial part of the job. I needed to see the font working in the applications where someone would actually use it.
How long did Little Wonder take to make?
About a week, from the ink paintings to a working font.
The painting was the easiest part. Cleaning everything in Photoshop and tracing it in Illustrator took longer.
But the spacing, kerning and testing in Glyphs took the longest by far.
That's what you don't see when you look at the finished typeface. You see the ink and the flowing letters.
You don't see me going back into Glyphs to adjust another join, then opening Illustrator to type the same word again.
I can paint the alphabet in less than an hour. Getting two Os to sit together nicely? That's where the week goes.
How much of the original ink detail survived?
I'd say about 40%. The other 60% was lost in the process.
That's an estimate, obviously.
Too many points can cause real problems in my workflow. I want to keep the detail. Then I try to export the font and the software says no. At that point, I have to work out which letter is causing the problem. That can take a hell of a long time.
When the font won't export
It's something I'm constantly battling with when I make this kind of font. I want to preserve as much of the original painting as possible, but I also need a font that will export and work properly.
So back I go, simplifying outlines and checking that they still look right.
Adding alternative letters
Little Wonder includes alternative versions of letters, mainly to mix up the look and feel.
Repeated letters can look repetitive. Hardly a shocking discovery, but it becomes noticeable when you're trying to preserve the feel of lettering made by hand.
The alternatives give you some variation, so you don't always have to use exactly the same shape.
Final thoughts
I hope you've found this information helpful. I know it's a bit vague in places, but it does give you a quick rundown of my process for making this kind of font.
I do have other ways of working, especially now that AI and our robot overlords have taken over. Some of these steps can be optimised, but I'm not going to get into all that here.
Of course, you'll need the right tools. For my process, that's Adobe Illustrator, Fontself and Glyphs. But you could probably do something similar without spending a fortune on software. Hunt around long enough and you'll find free alternatives to Illustrator. You wouldn't have the Fontself plugin, but you could use the lighter version of Glyphs.
And don't forget, pens, paper and whatever medium you choose are relatively cheap. You don't need any fancy technology for that part of the process. Just something to make marks with and a bit of imagination.
Anyway, see you later.
About the author
Written by Simon Stratford, type designer and graphic designer. These are my opinions, reached after too little sleep and too much coffee. You can also follow my antics on @itsmesimonok, or leave a comment below. Despite all the opinions, I’m actually quite nice.