Ever wanted to give your digital layouts and designs a truly personal touch? In this tutorial we'll look at how you can create a font from your own handwriting, for use on your computer.
The tutorial will be split into three parts. Firstly, we'll look at the basics of drawing a typeface. Then, once we're warmed up, we'll see how you can optimise your handwriting to ensure high quality and versatility. And lastly, we'll analyse some different methods for getting your font onto the computer and converting your hand-drawn letters into a digital font.
1. Practice Drawing Type
What you'll need for the first part of this tutorial:
- drawing paper (white)
- sharpened HB or 1H pencil
- ruler with millimetre measurements
You probably write scribbled notes or lists every day, but you're rarely conscious of your handwriting. When you suddenly become very aware of your own handwriting, it can start to look unnatural.
You should first get into a more natural mode of writing. I find the best way to do this is to practice drawing a typeface. This is also really useful as it makes you more aware of the key characteristics of a typeface, and makes you more able to recognise common features (consistencies) between different characters within a typeface. This will prove useful when we start to refine our own handwritten characters, and optimise them for digitisation.
Step 1
Lay your ruler flat across the page, at a horizontal angle, as straight as you can make it. Take your sharpened pencil and, pressing down moderately hard, draw a line above the top edge of the ruler.
If your ruler is a standardised 30 mm-wide ruler, you can keep the ruler in place, and draw a second line along the bottom edge of the ruler. This has the benefit of ensuring both lines are perfectly parallel. Otherwise, simply create two horizontal lines, 30 mmapart. The lower line represents the Baseline, and the top line is the Cap Height.
Mark out the top 10 mm third of the total height between the lines and draw a third horizontal line with your ruler and pencil, pressing down more lightly to make a slightly fainter line. This line represents the x-height. Swot up on your typography terms, such as x-height and baseline, in my article on The A to Z of Typography.
Step 2
You can repeat the sequence of lines, using the same measurements from Step 1, to create a page filled with lines. This is your own writing grid, on which you can practice drawing typefaces.
Step 3
Open a software program where you can easily edit text, such as Adobe InDesign, or even Microsoft Word or Pages.
Select a classic Serif typeface, such as Adobe Caslon Pro, which is shown here, orGaramond. To practice drawing a typeface it's best to pick a serif to draw at first, as sans serif typefaces have more subtle features, and can be more tricky to draw accurately if you're a beginner.
Type the following characters: 'H n o y', with a space between each. These are good characters to pick, as they display a range of different features: two vertical stems and a crossbar on the 'H', an aperture and serifs on the 'n', a fully enclosed counter on the 'o', and a sweeping descender and diagonal arms on the lowercase 'y'.
If you're working in InDesign you can also switch on the baseline grid (View > Grids & Guides > Show Baseline Grid) to more easily see how the proportions of the characters line up with each other.
Blow up the characters at large scale on your screen, or zoom in. Now you can start to draw the characters. Alternate between using your ruler and drawing strokes by hand. Don't worry if your attempts look a little messy—the aim of this exercise is for you to become comfortable with drawing type, and to observe the characteristics of the typeface and the similarities (or differences) between each character.
You will notice that serif typefaces are based on the principles of symmetry and order. Extend the strokes from the edge of the characters and notice the angles and proportions. Stems are almost always the same width, whatever the character, but you might notice that the size of the serifs is slightly larger on the uppercase 'H'. Notice also that some parts of the characters are thinner; these sorts of stroke are called hairlines.
Step 4
Though we won't apply all of these characteristics to our handwritten font, it's really important to recognise that all typefaces are governed by a set of rules, whether formal, which is more common with serif and sans serifs type, or informal, which is more common with hand-drawn, painted or handwritten typefaces.
Once you've practiced drawing a typeface, or several typefaces if you want, you should start to do a bit of research on handwritten typefaces, to help you think about how you want your handwritten font to be organised.
Go to a font resource site like FontSquirrel or DaFont and take a look at the handwritten fonts available there. Pick a font that you think shares qualities with your own handwriting and download it.
Choose a software programme that will allow you to view the full set of characters in the font. Adobe InDesign is a good choice, but you could also use Glyphs, which we'll take a closer look at later on.
In InDesign, create a text frame and set the Font to your newly downloaded font. Here, I've chosen Wagnasty. Go to Window > Type & Tables > Glyphs to open theGlyphs panel. You'll be able to see the full set of characters available in the typeface.
Make a note of the types of characters that are present, and what's notably absent. For example, in Wagnasty we've got:
- a full set of uppercase letters, A to Z
- no lowercase letters
- a full set of numbers, 1 to 9
- full-stop (.), comma (,), colon (:), semi-colon (;), exclamation mark (!), question mark (?)
- apostrophe (')
- round (parentheses) brackets (), square brackets [], braces/curly brackets {}, and chevrons <>
- some basic maths/equation symbols (= + %)
- hashtag (#)
- some currency symbols
- asterisk (*)
- forward slash (/), backslash (\), dash (-), swung dash (~), vertical bar (|)
This is a basic set of characters that would allow you to write most things in the English language without too much of a problem.
You should also note if the font has any additional weights, e.g. bold or italic. More often than not, a handwritten font will have only one regular weight, as the font needs to look authentic. Applying a different weight might look unnatural.
Most handwritten fonts have a similarly basic set of characters. Like Callie Hand:
Or some might include a few more, like Journal, which includes some quirky hand-drawn symbols or images:
2. Writing Your Own Characters
Now that you've practiced drawing typefaces, and had a look at the range of handwritten typefaces out there and the characters available within each typeface set, you can start to think about putting your own personalised typeface together.
For this section of the tutorial you'll need the following:
- lined paper (a scruffy old notebook will suffice)
- drawing paper (white; and with some texture if you want to give a more informal, rustic appearance to your characters)
- sharpened HB or 1H pencil
- ruler with millimetre measurements
- a fine-point liquid ink pen in black (I like to use a Pilot Hi-TecPoint)
- eraser
Step 1
Many people will have developed over time two or more variations of their handwriting. When I write down longer passages of text, my handwriting tends to join together, and slant slightly to the right, creating an italicised cursive type.
However, there are a number of problems with trying to convert cursive, or script, handwriting to a digital font. You would have to ensure that the kerning (space between characters) is set down very precisely, so that the characters always appear perfectly joined up. You would also have to ensure that every combination of characters would look perfectly joined up, which is very difficult without having to spend hours post-editing the script on your computer.
So, unless you're looking for a headache, it's recommended that you look to digitise handwriting that is not cursive. Instead, it should have stand-alone characters that will not need to be refined to correspond precisely with any given neighbouring character.
Luckily, I often use a different variation of my handwriting, usually for annotating documents or writing quick notes. It's all set in uppercase, and is not joined up. It too has a slight italic slant.
Pick out a short passage from a book, and copy out the text onto lined paper using your natural handwriting style. While doing your best to keep the writing natural, try to make sure the characters are not joined up or touching too much. It doesn't matter if you mix upper- and lowercase letters. But note, if you want to do that, you will have to eventually create a full set of uppercase characters and a full set of lowercase characters.
You can also practice writing out a few symbols, such as exclamation marks or brackets.
You can use this book passage as a useful reference for when you start to create your final handwriting sample. It doesn't always feel natural to write individual characters, in an A to Z order, so you can look over to the passage and see how you created a 'G' or an 'F', for example, when you were writing in a flowing, natural way.
Step 2
Return to your drawing paper. Take your pencil and ruler and, following Steps 1 and 2 ofPart One of the tutorial (above), draw a sequence of three lines, representing the cap height, x-height and baseline.
In Part One, we created a group of lines that measured 30 mm in total height. However, if you tried to write naturally at this scale, you would certainly struggle! Reduce the total height between the Cap Height and Baseline to 6 mm; mark out the top 2 mm third of that to show the x-height.
You might even find that this is still too large to allow you to write naturally without straining. Write a couple of characters onto the paper, to see what size you naturally write your characters.
Reduce the total height to 4 or 5 mm if you're more comfortable writing at a smaller scale.
Repeat the sequence of lines until you have filled the page.
Step 3
Take your ink pen (the black ink will create good contrast for scanning later on) and rotate the paper just a little anti-clockwise. This is to avoid straining the arm too much as you write.
At the same pace you would normally write, write the uppercase characters from A to Z in one go, along the same line if you have room.
If you make any mistakes, simply try again on the next line down. But don't worry about any minor errors or quirks in the writing. You want the writing to look organic and natural, and perfecting it too much will get rid of that.
Referring back to the list of characters we noted in Part One of the tutorial, write down other characters in the same natural style, and at the same scale. If you want to, you can also write a set of lowercase letters, a to z, as well.
Step 4
Allow the ink to dry completely, and then take an eraser and carefully rub out the pencil lines around the characters so that you are left with a lovely set of clean characters, ready to be scanned.
3. Scanning and Digitising Your Font
For this final part of the tutorial you will need:
- a scanner (or alternatively a tripod and digital camera)
- Adobe Illustrator
- access to a font editor/conversion software programme, e.g. FontLab Studio or Glyphs (you can get a free 30-day trial of Glyphs, and a mini version is available on Mac apps)
Note: We'll take you through the process of using Glyphs in this tutorial, but there are loads of great type editing programmes out there. I personally find Glyphs to be very user-friendly, but many typographers will also put forward strong cases for FontLab andRoboFont.
Step 1
Setting the scanner to a high dpi (I scanned at 1600 dpi), scan in your handwriting sample.
Save the file as a TIFF or JPEG. Then open Adobe Illustrator and create a New Document.
Go to File > Place and select your scanned image. With the image selected, open theImage Trace panel (Window > Image Trace). With the Preview box checked, set theMode to Black and White, and adjust the Threshold, Paths and Corners levels until you're happy with the accuracy of the trace. Click Trace.
Then, with the image still selected, go to Object > Image Trace > Expand. As a final step, Control-Click (Mac OS) or Right-Click (Windows) > Ungroup.
Now you need to get rid of all the white sections on the image. Open the Layers panel(Window > Layers) and create a new layer. Drag it down to sit the new layer below the image layer. Select the Rectangle Tool (M) and drag to create a rectangle that extends across the whole artboard. Set the Fill to a contrasting bright color.
Now you can see more easily where there is white on the image. Select the white area around the outside and delete. Select the smaller white areas inside the bowls and counters of characters, and delete.
You've successfully vectorized your handwriting, great work!
Step 2
Now open your font editing software. Here, I'm going to take you through the process of digitising your handwritten font using Glyphs.
Go to File > New to create a new Glyphs font. On the left-hand side of the Glyphs window that opens you'll see a menu of options, listing groups of characters you can add to the font.
Click Letter to view the full set of menu options. To insert uppercase letters, selectUppercase. A full set of uppercase characters, from A to Z, appears in the window.
Double-click a character to edit it directly.
Hop back over to Illustrator and select the relevant vector character. Go to Edit > Copy.
Return to Glyphs, and go to Edit > Paste. Glyphs will place the vector in the window, ready for you to scale and adjust. The numeric values at the bottom of the screen are editable, allowing you to adjust the space to the left and right sides of the character, affecting the kerning.
To the left of the window you can see '-' and '+' symbols, which allow you to scale the character. You can also manually adjust the scale, using the Scale (S) tool accessible in the tools panel running along the top of the window.
You should use the guides on the screen as a guide, sitting the bottom of the character on the Baseline, and the top of the character (if it's uppercase) meeting the Cap Height line.
Step 3
You can flick back to view the full set of characters by clicking the Font tab towards the top of the window.
Repeat the process above, double-clicking characters in Glyphs to open them, and flicking back and forth between Illustrator and Glyphs, copying and pasting characters across.
You can also start to add in other sorts of characters, using the left-hand menu in the Glyphs window. You will have to manually add Numbers and Punctuation marks, selecting them from the pop-out menus and selecting Generate.
Step 4
Once you've added in all the characters for your font you can give it a name.
Go to File > Font Info to open a new window.
Give the font a suitable name, and you can also add in additional details, such as your name, your website and your Copyright info. Once you're done, simply close the window.
Step 5
Once you've edited the characters in your font you can export it as a digital font.
Go to File > Export.
Keep the default options as they are, to create an OpenType Font, then click Next. Save the font in a folder that's easily searchable.
You can exit Glyphs and navigate to your chosen folder, to view the font file.
You can then install this on your computer, as you would any standard .otf font.
Conclusion
Your handwritten font is now complete, and ready to use as a digital font across your own documents. Use it to add a personal touch to notes or annotations, or incorporate it into design layouts to make your artwork truly unique!
Let's recap what lessons we've covered in this tutorial. We looked at:
- how to practice drawing type, and recognise common elements and rules across typefaces
- how to apply those drawing lessons to your own handwriting, optimising it for digitisation
- how to scan your artwork and vectorise it in Illustrator
- how to convert your vectors to a digital font, editing it using Glyphs or other font editing software
Awesome work! Have fun creating more of your own fonts—why not experiment with different hand-drawn or painted styles?
