+
Type in Context

Type in Context

Description:

In this lesson you will learn how different type styles, sizes and weights create good design.

(more)
See More
Try a College Course Free

Sophia’s self-paced online courses are a great way to save time and money as you earn credits eligible for transfer to over 2,000 colleges and universities.*

Begin Free Trial
No credit card required

25 Sophia partners guarantee credit transfer.

221 Institutions have accepted or given pre-approval for credit transfer.

* The American Council on Education's College Credit Recommendation Service (ACE Credit®) has evaluated and recommended college credit for 20 of Sophia’s online courses. More than 2,000 colleges and universities consider ACE CREDIT recommendations in determining the applicability to their course and degree programs.

Tutorial

What's Covered

Welcome you to today's lesson on type in context. For this lesson, you're going to learn how different type styles, sizes, and weights create good design. Specifically, this lesson will cover:

  1. Type Specimen
  2. Magazine Covers
  3. Inside the Magazine
  4. Movie Poster
  5. Creative Design

1. Type Specimen

All you've learned gets applied to many things like books, web design, and actually newspapers and magazines. Every magazine has its own design language, and all the things you've learned helps designers really think of creative ways to put type to use. Knowing all these concepts and applying them together, as opposed to any one single concept by itself, really puts a strong piece together.

Prior to a design, designers often spend time reviewing type families, and visualizing how they can enhance their design and visual message. They do this with a type specimen.

Term to Know

    • Type Specimen
    • A sample page of a particular typeface shown in a variety of sizes and linespacing.

Below is is what a type specimen looks like, and it's a sample page of a particular typeface shown in a variety of sizes and line spacing.

To the untrained eye, this might just look like a bunch of garble from an old newspaper from the top hat and monocle days, but as I mentioned, it's a type specimen. What this does is show you a variety of sizes, postures, line spacing for a particular typeface. So you can see how that typeface looks in different ways. Now, through the web, it's really easy to find type specimens for you to look at, like this particular website here. It's quite handy.

You wouldn't think so, but this is actually really, really useful because it lets the designer see how you could use the same typeface across a design to provide that unified look.



2. Magazine Covers

If you take a look at this Popular Science magazine cover from 1964, you can see that, aside from the heading, the majority of the white typeface is all the same, but it's used in different positions and different sizes to provide information while providing that unified look all around.

So there's a lot that you've learned that is being displayed here. The typeface is chosen to be used as a header, because it holds more weight. Serif is used to ground it to the page, and it's more legible from afar. But you might have noticed that the P is a little off? So maybe with a bit of manual kerning, you can fix that right up.

So the header now feels a bit more balanced.


3. Inside the Magazine

Take a look at the inside the magazine and look at the spread below.

This is the spread from Time Magazine. You can see the large headline text; the image is difficult to read, but you can still see that large capital letter that's being used to start off that sentence. 

You can also see the columns, and these columns are divided by alleys, and the gutter that's dividing the two pages that gives that nice clear separation from page to page. 

You'll also notice that the text is justified, which is easier for us to read because it flows really well from left to right, making it easier on the eyes and really makes these nice blocks of text-- as opposed to just center aligned, right aligned, or it's more raggedy. In the end, you get a nice-looking spread that's easy to read, with a functional design language.


4. Movie Poster

The image below could be a movie poster.

You can really see how important type can be. It more or less creates a brand, in this instance, something recognizable that you will associate to this movie. You can see that the main header that reads "Transformers" is a bit more decorative, definitely not a type that you'd find in a book. 

Notice the tracking of the lines of the text below "Transformers." There's more space between each letter in "dark of the moon," as well as "July 1, 2011." 

Selecting line spacing, typeface, and posture is very important because it directs eye flow. Which type has the most weight? Well, "Transformers" does. Then, for the most part, your eye flows below to "dark of the moon," which is smaller in size, but the proximity is right below the headline. Then your eye continues down towards the date, and then you might go back to the very top where you have that very compressed text that reads "a Michael Bay film." Or maybe you started 2 there first, and then you made your way down. Either way, the headline demands most attention, so that's where your eye tends to go -- or at least, that's where mine does.


5. Creative Design

It's easy to dismiss type as boring or unimportant compared to painting or graphic design and the like, but type can be used for creative design just as well.

Below is a simple, but beautiful design made entirely of type.

This designer used a variety of typefaces and different weights from different specifications, but used them in a way that created a visually-stimulating piece while retaining visibility. So it took a lot of skill. And you can still go on and examine each word, which they all have to do with biology. Also, the designer opted to use a variety of typefaces. It still creates this harmonized space somehow.

Likewise, below is another poster.

This also could be a movie poster for Titanic, and look how important type is here. You don't need a ship at all, or any graphics really. Type is placed in the right place, in the right size, and that's telling a story in addition to providing information. It successfully tells that story without sentences or images again, all through the use of type and just some clever design choices.

Summary

Well, that ends our lesson for today on type in context. This lesson covered the creation of a type specimen, as well as the type elements found on magazine covers and inside the magazine. Finally, this lesson looked at the innovative use of type on movie posters and in creative design.

Keep up the learning and have a great day!

Source: SOURCE: THIS WORK IS ADAPTED FROM SOPHIA AUTHOR MARIO E. HERNANDEZ

TERMS TO KNOW
  • Type Specimen

    A sample page of a particular typeface shown in a variety of sizes and linespacing.