How to Create Typeface Characters

DiggThis
Download Source Files
  • Source files for this tutorial are available to Premium members.
    Get a Premium Membership

I started a character design project that merges typefaces into unique monsters, cute animals, and various other font inspired character creations. The method is simple, I take different sections of the characters of a specific font and I put them together, giving birth to different kinds of creatures.

The interesting thing about Typefaces is that each font gives a different aspects to the characters. That is the essence of Typefaces – Faces with Type. Learn the basics of how to create these fun characters!

Final Image Preview

Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

  • Program: Adobe Illustrator CS3
  • Difficulty: Beginner
  • Estimated Completion Time: 1 Hour

Below is the final image we will be working towards.

final

Step 1

First of all open Adobe Illustrator and create a new document (Command + N) at 600px by 600px.

1

Step 2

In this example we are using Helvetica Neue Bold, but you can try it with any type you like.

2

Step 3

Select the Type Tool (T), type down the whole type case (all the upper and lower case plus its numbers and signs), go to Type > Create outlines (Command + Shift + O) and then select the elements you are going to work with to create a typographical creature.

3a
3b

Step 4

In this occasion we are going to select the “a,” “i,” “?” “0,” and “>” characters.

4

Step 5

Once you’ve got the type forms you are going to work with select the lower case “a.” Then copy (Command + C) it, paste in front (Command + F) and use the Reflect Tool (O) to flip your second “a” on by its vertical axis at 90 degrees.

5a
5b

Step 6

Move it to the left until you get the form you can see in the image below.

6

Step 7

Now select both figures, click Add to shape area in the Pathfinder tab and then hit Expand.

7a
7b

Step 8

Select your new figure and right-click on it, then hit Release Compound Path in order to delete the low section of your figure. Paint the upper section with white. This is going to be the body of our character.

8a
8b
8c

Step 9

Now leave aside the body of our character and get ready to build its mouth and teeth. Take the “>” character and use the Rotate Tool (R) to flip it 90 degrees.

9a
9b

Step 10

Select the “>” character, then hit Shift + Alt and move it to your right in order to make a copy of the element, and constrain the horizontal movement.

10

Step 11

Using duplicate (Command + D), create six more “>” characters in order to have seven of them in total. Arrange them as you can see in the example below.

11

Step 12

Now select the seven signs, click Add to Shape Area in the Pathfinder tab and then hit Expand.

12a
12b

Step 13

As soon as you are done, copy (Command + C), then paste in front (Command + F) the new figure. Use the Reflect Tool (O) in order to flip the new copy of the figure on its Horizontal axis.

13a
13b

Step 14

Arrange them as you see in the example image below to get the teeth of the character.

14

Step 15

Finally select the “i,” right-click and hit Release Compound Path. Delete the dot of the “i” and rotate the body of the letterform 90 degrees.

15a
15b
15c
15d

Step 16

Now stretch and copy (Command + C) it, paste front (Command + F), and arrange the upper and lower lip.

16a
16b

Step 17

Select Teeth and Lips and click on Add to Shape Area in the Pathfinder tab and then hit Expand. Now you have a beautiful mouth!

17a
17b
17c
17d

Step 18

Move the mouth (white fill) over the body and distribute the elements as in the example below.

18

Step 19

Make a copy of the body (Command + C), paste front (Command + F) and go to Object > Arrange > Bring to Front (Command + Shift + Right Bracket key).

19a
19b
19c

Step 20

Now hold Shift and select both the body and teeth, then Right-click and select Make Clipping Mask. Then go to the Pathfinder Tab and click Crop.

20a
20b

Step 21

Select the “0,” Right-click over the selected element and select Release Compound Path.

21

Step 22

Move the inner section of the “0″ aside and duplicate the item. Then arrange both figures as the Eyes of our creature.

22a
22b
22c
22d

Step 23

Use the Direct Selection Tool (A) to select the lower half section of the “0,” then hit delete on your Keyboard. When you are done selecting both ends of the new figure apply Join (Command + J) and you have a foot.

23a
23b
23c

Step 24

Select the foot and use Shift + Alt to move it to your right in order to make a copy of the element. Arrange both feet as in the example below.

24a
24b
24c
24d
24e

Step 25

Take the question mark “?” and make two copies of it.

25

Step 26

Select the three elements and Right-click to Release Compound Path.

26

Step 27

Delete the two question mark dots and arrange the rest of the elements through Rotations (R) and Reflections (O) until you arrive at the image below.

27a
27b

Step 28

After that take another question mark and make two copies of it. Select the three elements and Right-click, then choose Release Compound Path.

28a
28b

Step 29

Delete two question mark dots and arrange the rest of the elements through Rotations (R) and Reflections (O) until you arrive at the sample image below.

29a
29b

Step 30

Now you’ve got the tentacles of our Type Creature. Arrange them in the body.

30

Step 31

Once you are done, select all tentacles and Right-click over the selection to Group.

31

Step 32

Copy (Command + C), paste in front (Command + F), and use the Reflection Tool (O) to flip the copy on its Vertical Axe at 90 degrees.

32a
32b
32c
32d

Step 33

Arrange them as shown below.

33

Step 34

Finally take de dot of the question mark, make a 45 degree Rotation (R) and use the Direct Selection Tool (A) to select the top point of the square. Now stretch it as you can see in the figure. You are ready to enjoy your Type based monster!

34a
34b
34c
34d
34e

Conclusion

For the final image below, I added a simple background effect. Go ahead and create your own. You can also take this into Photoshop now and add some texture. For some inspiration visit Typefaces and have fun! You can learn more about the typefaces project in my interview on Vectortuts+.

final

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Related Posts

Add Comment

Discussion 37 Comments

  1. Joe Strong says:

    I love the idea! Looks awesome

  2. Merineo says:

    interesting stuff

  3. Roctopus says:

    Hey great tut
    Always love Julian (Typefaces) work.
    Great concept and loverley stylisied character.
    Aces

  4. Tom says:

    Very creative. Sometimes simple things can make very interesting artwork.
    Thanks for the ideas!

  5. Tanner says:

    Thats a funny idea would have never thought to do it
    very creative

  6. Syco says:

    omg so interesting :D i love it. thanks for sharing

  7. HK says:

    Interesting Idea! I will definitely have fun with this one. Thanks!

  8. Melody says:

    That’s a neat way of using typography. helps create uniformity with all the pieces too..awesome idea.

  9. So happy with this tutorial !
    really love to work with you again Sean :)

    Cheers.
    TF.

  10. fady says:

    its verry good
    i love it

  11. Karim says:

    actually the idea is great! but the outcome is kinda disappointing. It looks cool, but for a Typeface-Character I would wish to see clearly where the Type is used. If you dont see the tutorial u wouldnt imagine this was made out of simple letters and symbols.

    Still niceTutorial.

    • The idea behind Typefaces is that you don’t realice that its make out type. Still its structure is basically type made so the union between type and character is stronger.

      With Typefaces i don’t want to make calligrams, the idea is to go a little bit further.

      Thanks for comment Karim, helps to clear out the difference between common calligrams and Typefaces characters.

      Cheers!

      • Karim says:

        Ok cool, didnt knew that there was a difference :)

        So actually its pretty awesome then! :)

        Thx for you answer!

        Cheers back!

  12. denny says:

    very cool

  13. Peach says:

    Nice tut. Very creative way of using typography

  14. Abctgomar says:

    Creative, extremely suitable for Beginner.

  15. Raoul says:

    I gave “that” excercice to my 1st year students, a great way to use typography without thinking making mystakes =) (creative way as said Peach)

    Thank you.
    R.

  16. ADrian says:

    Interesting idea, great for uniformity!

  17. Meister Eder says:

    This graphic was the ignition of this graphic battle:
    http://www.mediengestalter.info/forum/35/typefacebattle-126335-1.html

  18. You know somehow I’ve never even heard of this process until now?! I’m going to enjoy practicing it. Thanks for the new creative outlet… visit my blog to see my first try:
    http://kookaburrito.blogspot.com/2010/01/typeface-characters-01.html

  19. Terence says:

    This is very cool. Did this last semester in my gd class.

    canvasscribbles.com

  20. Mal says:

    Very inventive! always good to find new ways of using the common tools

  21. WOW! such a nice little ”monster” came out of plain text…very imaginative!

  22. JeroenT. says:

    Very Nice tut! I’ve Seen how Creative designers can be with some Text :)

    Keep up the good work ;)

    Greetz,

    J.

  23. imahinasyon says:

    tuts mate! thanks for the ideas.. you make me inspired.

    ciao.

  24. Max says:

    wow! i like it

  25. padizine says:

    Question marks for tentacles, that one cracked me up. I can imagine a bloodthirsty monster with menacing tentacles crawling towards a kid, but the monster has puppy eyes and says: “No Hug?”.

  26. Jacob Cass says:

    Here is another tutorial on how to create a font monster, using a similar process.
    http://www.layersmagazine.com/using-the-glyphs-panel-in-illustrator.html

    Nice monster btw :)

  27. Thanks for it. Different concept

  28. JUAN says:

    GENIAL VIEJO

  29. nice and creative, definitely a different use for type, fun too!

  30. nathalie says:

    This tutorial, although simple, really helps beginners like me! we had to do a project during one of my university design classes where we had to morph words into the thing they were of (like dog into the shape of a dog… or at least something best represents it!) … and this tutorial would of been so useful!! I’m forwarding it to my old professor right now :) Thank you!

Add a Comment