Type drawing

Drawing with type

Our Western letterforms have lost their pictorial origins. We are so over-familiar with them, we don’t see this anymore. This exercise will de-familiarize you with letters so that you may approach them as drawings, a classic warm-up exercise in most design courses.

Types of type

Type comes in thousands of font styles, but there are some basic classifications:

The majority of fonts you see on the web and in print are serif or sans-serif.

Thinking with type

Read the Anatomy section of Ellen Lupton’s Thinking with Type to understand the basic terminology we’ll use in the studio when discussing how to use letterforms.

Exercise 1: Installing a font and analyzing the typeface

1 — Find a font

For your artwork project, you may want to find and install a font your computer doesn’t have (and yes, in our networked lab, you can temporarily install a font). Visit 3 font library sites: Google Fonts, Adobe Fonts, and Font Squirrel.

• How are these sites similar and different? Which sites offer free fonts? Can you download fonts? Are there any limits (for example, free but only for non-commercial use)?
• At ONE of these sites, do a font search. Find an example of ONE of each: serif, sans-serif, display, and script font. Your choice should NOT include one of the fonts listed above.
• Download ONE serif OR sans-serif font for the next part.

2 — Install your font

• On a personal machine, use instructions for Windows 10, Windows 11, or Mac OS.
• In our networked lab, use instructions for Font Book. Remember: your installation will only last as long as your working session. Keep a copy of your font in your Digital Archive, where you can easily find it to re-install for your next session.

3 — Understand the typeface properties of your font

Using Ellen Lupton’s Anatomy guide, figure out the following:

• Is the x-height more than half the size of the cap height?
• Which ascenders, if any, extend higher than the cap height?
• Which letters, if any, overhang the baseline?
• Any outstanding or unusual features? Are there ligatures or character variants? Unusual ascenders or descenders? Is the character proportion narrow, condensed, compressed, wide, or extended?

Exercise 2: Figure-ground manipulation with Pathfinder

Recall that figure-ground is one of the Gestalt principles and is widely used in graphic design, especially in logos. The perceptual factors of Gestalt create visual frames of reference that provide the designer with the psychological basis for the relational organization of graphic elements. By using contrast between elements, figure-ground allows the viewer’s eye to “read” imagery. Figures are positive elements defined by spatial relationships existing among them. The ground becomes the white space, a negative space that completes the visual image.

In the pre-digital past, designers had to put a lot of effort into precisely illustrating figure-ground concepts. Illustrator has made the process easier. In this exercise, we will create a simple figure-ground vector. We will overlap letterform elements and create a spatial relationship between them by using the Pathfinder palette. For this warmup example, use the letterforms V and A.

1 — Create a new file and create the letters

2 — Use Create Outlines and overlap letters

3 — Use Pathfinder

Exercise 3: Your personal logotype

Logos and logotypes

A major activity in the graphic design world is the creation of effective logos. Logos for leading brands like Nike are instantly recognizable around the world, without even having the word “Nike” anywhere near its “swoosh” form. Logos like these are known as iconic logos.

For startups (like you), the abstraction of an iconic logo doesn’t work as well from a recognition standpoint. So we’ll turn to the logotype, a distinctive use of letterforms to generate a graphic identity in this exercise. An example of a recognizable logotype is the blue “F” that stands for Facebook.

Our logotype exercise will be more challenging, as we’ll be making it using the phenomenon of figure-ground inversion we learned above.

Create your logotype

1 — Generate an idea

• Select two typefaces. One should be the font you downloaded, and the other will already on your machine. If the font you downloaded was sans-serif, the other font should be serif (or vice-versa). Avoid using a display or script font for the exercise.
• Use your first name and last name initials, and assign one typeface to each letter. You may switch that assignment as you experiment.
• In an idea-generating tool like a sketchbook or Jamboard, develop 3 concepts combining the two letterforms to generate a unified image that plays with figure-ground relationships, scale, and defamiliarizing the original identity of the letter. Look at general geometry, patterning, and contrast in the letters.

2 — Create a new file and create the ground

3 — Create the figures

4 — Develop one of your ideas into a composition

5 — Use Pathfinder to finish the composition

Video demo

Here is a 12-minute viewing of the process outlined above. I speak slowly so I won’t take it personally if you run it at 1.25 or 1.5 speed!

Exercise 4: Saving and sharing

File types and their common uses

You’ll need your file to eventually escape out of the proprietary .ai file type for people to see it!

Different kinds of file types have specific functions in particular contexts, as detailed below. For some of these file types, we access a Save As function, while for others, we Export.

Using the chart as a guide, save your file, first as a .ai type, then as a .jpg, a .png, a .gif, an .svg, and finally a .pdf.

1 — Save each file type

• Use the logotype file you created to generate each of the file types listed above.

2 — Embed and link the files

• Embed or link (as appropriate) each in your process journal or blog. Which ones give you trouble with embedding, forcing you to create links instead? Which ones look better as an embed? For embedding assistance, use the Embeds guide.