The following presentation on using two of the Gestalt principles of visual perception in typographic design was written and produced by Mike Cuenca. If you find this presentation helpful, you'll probably like the Typography Basics presentation, as well.

The movie runs approximately 7 minutes. You can return to the beginning of the movie by pressing the Quit button. On Windows machines, you can access the Shockwave controls to adjust the volume and pause the movie by right-clicking anywhere in the movie window. On the Mac, access the Shockwave controls by control-clicking in the movie window.

After you finish watching this presentation, don't forget to visit the Typography Basics presentation.

WARNING: The movie is quite large and is intended for viewing over broadband connections. The movie will stream into your computer and play as it loads, but you will still experience a long wait if you are using a telephone-line modem.

 

If you don't have the Macromedia Shockwave plug-in, you'll need to download and install it before viewing this movie.
  Enter

 

Original content copyright 2000 Mike Cuenca.
All copyrighted images remain the property of the original owners
and are used here for educational purposes only.

Recommended Reading:   



Gestalt and Typography Script

By Mike Cuenca

This script was written to accompany the multimedia teaching presentation that is online at http://www.seekpeace.com/gestalt. This type of teaching presentation can be presented on any visual medium, including online, CD-ROM, in person via PowerPoint, etc. If you visit the online presentation, you can follow along with the script.



1. Hi. I'm Professor Mike Cuenca. Welcome to Gestalt & Typography. In this presentation, I hope to help you learn more about how to create effective typographic presentations using two principals of the Gestalt theory of visual perception. I think you'll be surprised by how easy to apply these theories really are. Let's get started.

2. Besides having heard Robin Williams as "Mork" frequently proclaim that "the Gestalt is now", you might have also heard Gestalt described in this way. The whole is greater than the sum of its parts. In other words, when we combine certain things, they become something more than just a group of those things. Does that make sense to you? Here, let's look at some examples.

3. First, let's consider the musical note. By itself, it really means nothing. But let's say that we put together several thousand of them. Will we then have merely several thousand notes?

4. No. We'll potentially have a musical masterpiece. Those thousands of notes become a completely different whole. Now let's consider the objects with which we're presently concerned.

5. This is merely a letter. But when we combine this letter with thousands of other letters . . .

6. . . . we wind up with a much greater whole than merely thousands of indistinct letters. We wind up with a message. Words, sentences, paragraphs, ideas, dreams, masterpieces. Got it? Okay, then let's look at it another way. What if we combine all those thousands of letters, but we make them all the same size and weight and we space them apart equally. What is the result?

7. A puzzle. When the letters are all the same and they're all the same distance apart, the ideas they represent become much more difficult to perceive . So let's look at how two of the principles of the Gestalt theory of visual perception can help us communicate our messages more effectively.

8. First, let's consider the Gestalt principle of Proximity. As you might guess, this principle concerns the spacing of visual elements.

9. We'll start off with a dot. By itself, it's merely a dot. But what if we combine this dot with a bunch of other dots? See for yourself.

10. Now what do you see? Just a bunch of dots? What about a large square or box formed by the dots? See it? What if the arrangement of the dots changes?

11. Now you see columns of dots. Or . . .

12. . . . Rows of dots. As you can see, simply adding more or less space to the arrangement can change how you perceive the group. Okay. So let's alter the arrangement again.

13. Now the dots are a lot closer together. Let's see what happens if we now place some spaces between some of the dots, creating distinct groups of the dots.

14. Can you see a familiar pattern developing?

15. How about now? Can you see the pattern that we commonly associated with columns of type? What I think is really cool is to realize that it's actually the empty spaces between groups of letters that help us define the groups and perceive them as words. In other words, we can perceive the message more easily when there is separation between ideas.

16. Okay, now let's move on to the second of these Gestalt principles: Similarity. Once again, it's pretty easy to guess where we're headed: how much alike and/or different are the visual elements in our message?

17. We'll start here again with the group of dots. In this figure, they're all the same. Watch what happens when we change some of them.

18. See how their association changes? Now they're no longer a box or square of dots. Now they're columns of dots. Let's try it a couple of other ways. Watch as the similarity of the dots causes you to see them as distinct groups.

19. Okay, so now let's apply this to typography. Here we have a newspaper article. The type is all set the same size and weight. The words are all capital letters. There are no additional spaces between words. Even though you can read it, it takes more effort and concentration to do so. Let's go ahead and apply the principal of proximity.

20. See? Just by separating the groups of letters into individual groups it becomes much easier to make sense of the message. Let's apply proximity once more.

21. Now you see that we can begin to separate individual ideas and themes in our message to further enhance the readability of the intended message. Now let's apply the principal of similarity.

22. Notice how much easier it is now to make sense-even with just a quick glance-of this message. Now it's easier to see the individual ideas. Notice how the principal of Similarity has been applied three times to the byline group. This shows quickly the difference ideas presented there.

23. This piece of a page from Tim Harrower's book "The Newspaper Designer's Handbook" shows how you can use the principles of proximity and similarity to increase the contrast of the message to enhance its readability. Look at how many different type styles and presentations are used here. Bold type, italic type, all caps, flush left, justified, flush right. All these contrasts help communicate the message more quickly and effectively.

24. Let's look at some real world examples to see how these principles are applied today. This newspaper page from the 1840s is typical of that era. Notice the almost total lack of contrast on the page. All the type is the same size and weight. The reader must spend a lot of time on this page to make sense of it. Imagine trying to find a specific story on this page.

25. Compare that with this page. Look how much easier it is to quickly perceive the messages presented on the page. Look how easy it is to see what's presented on the page and where to look to find out more about it. All of this is accomplished by varying the spacing of the different elements using the principle of Proximity, and by varying the size, style, weight, and so on, of the type using the principle of Similarity.

26. These principles are effective in all media for which we produce typographic presentations. Check out this early version of the New York Times web site. Look how Proximity and Similarity are effectively used to guide your eye around the design. You can easily locate the individual ideas and themes. You can much more easily locate what you may be seeking on the page.

27. Here in this television promo from CNN you can see effective use of these two Gestalt principles. Notice how the two program names and times are separated from each other by proximity and how their air times are separated from their program names by similarity.

28. Again here, you see how the program name is separated from the air time by the use of the principle of Similarity.

29. Well that's it. I hope that you've learned how to apply these two Gestalt principles to help you enhance your typographic presentations. Thanks for joining me.