Web Development: The Basics of Drawing Type & Creating Your Own Handwritten Font

The Basics of Drawing Type & Creating Your Own Handwritten Font

Final product image — What You'll Be Creating

Ever wanted to give your digital layouts and designs a truly personal touch? In this typography drawing tutorial, we’ll look at how you can create a font from your own handwriting, for use on your computer.

The typography drawing 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 optimize your handwriting to ensure high quality and versatility. And lastly, we’ll analyze some different methods for getting your font onto the computer and converting your hand-drawn letters into a digital font.

Heartland Handwriting Script Font is available on Envato Elements.

Looking for ready-to-use handwritten script fonts? Scroll down after this tutorial. We have a selection of top handwritten fonts from Envato Elements. You can also try the free handwritten fonts from Envato Elements, or check out our recommended handwritten script fonts available to download:

What You Will Learn In This Typography Drawing Tutorial

How to draw fonts
Basics of typography drawing
How to write your own characters
How to scan and digitize your handwritten script font
How to make a handwritten font in Illustrator

1. Practice Typography Drawing

What you’ll need for the first part of this typeface drawing 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 mm apart. 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, or Garamond. 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 the Glyphs 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. How to Write Your Own Characters

Now that you’ve practiced typeface drawing, 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 typography drawing 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