Design a stunning typeface with just six shapes

A modular typeface is an alphabet constructed out of a limited number of shapes or modules. The design we’re making here uses just six different modules that can be transformed subtly, by rotating, flipping and so on, to create an entire alphabet.

Design a stunning typeface with just six shapes

We’ll work with the Pen tool, and make basic use of the Pathfinder and Transform commands. Using Illustrator’s Snap To Grid option I’ll also demonstrate some simple rules that will help you draw well-proportioned and attractive curves.


The process will give you an insight into how typefaces are constructed and a feel for aspects like letter spacing. The ability to build modular alphabets can be a really powerful tool in the creation of bespoke type treatments, and can help you produce beautiful, original pieces of artwork.





01

01 First things first: go into Illustrator’s View menu and ensure Show Grid and Snap To Grid are ticked. Illustrator’s default grid setting is usually fairly good. If you’re unsure, just set Gridline Every to 72pt, with Subdivisions set to 8. Make sure you have an even number of subdivisions – for reasons that will become apparent in the next steps.
02

02 Consistency is key. Every letter in this alphabet will be constructed using just three different sizes of curve. They’re all scaled proportionally so the middle one is exactly twice the size of the smallest, and the largest one is twice as large as the middle one. This consistency of proportion is a simple way to make the characters aesthetically pleasing.
03

03 The majority of the characters in this typeface will use this shape, and this one module will define the feel of your alphabet. It’s a case of using the Pen tool to draw the shape outline, so where you place your points is crucial. The inside stroke should be half the size of the outer stroke, meaning the shape will terminate in a fine point.
04

04 Again, next it’s a simple case of using the Pen tool to construct your second shape. This time both the curved strokes are the same size.
05

05 Now you’ve drawn your two basic shapes, use the Ellipse tool to draw a circle with a diameter of four cells, so it’s the same width as the widest end of your shapes. Make a duplicate of the basic shapes and use the Pathfinder panel’s Unite command to join the circle to their flat tops.
06

06 The four shapes we’ve just made, plus a simple rectangular vector shape, make up the entire set of modules we will use to construct our complete alphabet.

07

07 Playing around with the width and height of each character will have a profound effect on the feel of the typeface as a whole. Taller alphabets – known as ‘condensed’ – are high impact and eye-catching, but they’re generally not as legible. More conventionally proportioned alphabets are easier to read and generally feel ‘friendlier’. We’re making a regular typeface.
08

08 Now you have your height and width locked down and your five basic shapes drawn, you’re ready to construct the alphabet. It’s a simple case of moving and transforming your basic shape into place. With Snap To Grid turned on, everything should snap into place nice and easily.
09

09 At this point you can do one of two things: if you know what your heading is you can just create and use the letters you need, or if you want more flexibility you can construct an entire alphabet, so that later on you can write whatever you like, without being restricted.
10

10 Once you’ve arranged all the pieces of the letters for your new modular alphabet, you need to use the Pathfinder Unite command to stitch all the individual modules together and make a continuous outline. Make sure you link up all the elements of each letter separately, otherwise the whole word will be a grouped object and you won’t be able to adjust the letter space – which we will do our next step.
11

11 Now your letters are complete and have a continuous outline, you can flip to a black stroke to fill and see your finished characters. This is the stage at which you can sort out the letter spacing for whole words. I’ve put about two cells between each character, but this is by no means fixed. You should do whatever you think looks best or best fits in the space you’re working with.
12

12 The article I’m creating this type treatment for is about autumn, so I’ve used an image of some vividly coloured autumn leaves to generate my colour scheme for it. The typeface has quite a fluid, organic, natural shape, so this, coupled with the gorgeous autumnal colour scheme, hopefully creates an appropriate and compelling spread.

1 comment:

Anonymous said...

This typeface you've created, is it avalable for purchase?! Thanks