+
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

Type In Context

Video Transcription

Download PDF

Hi, everyone. My name is Mario. I'd like to welcome you to today's lesson-- type and context. For this lesson, we're going to learn how different type styles, sizes, and weights create good design. So, as always, feel free throughout the lesson to pause, fast-forward, and rewind at your own pace. And when you're ready to go, let's get started.

We're going to be talking about type and context, and how it's used around us. At this point, we've learned a lot from type, widths, ascenders, descenders, alignments, type specifications, serif, sans serif, and the list just goes on and on. We've covered a lot of ground, but in this lesson, you'll really get a chance to see why it's important, and how designers use what we've learned to create functional and appealing design.

So let's get to it. As I'm sure you know by now, all we've learned gets applied to many things like books, web design, and actually newspapers and magazines. And every magazine has its own design language, and all the things we'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 our only key term for today, which is a type specimen. This 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. So, again, it looks like this. 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. You can get another more modern example here for this DejaVu typeface. And 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.

If we take a look at this Popular Science magazine cover from 1964-- pretty awesome cover. 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 that I've mentioned. So there's lots that we learned that is being displayed here. The typeface is chosen to be used as a header, because it holds more weight. Serif is to ground it to the page, and it's more legible from afar.

But you might have noticed-- hey, isn't that P a little off? It just doesn't feel right-- and you're right. So maybe with a bit of manual kerning, we can fix that right up. And there you go. So the header now feels a bit more balanced. Aren't we glad we knew about kerning?

We took a look at magazine covers. Let's take a look at the inside. Look at the spread. And this is the spread from Time Magazine-- and what do we notice here that we've learned? We have our large headline text, and I know most of the text here is hard to read, but you can still see that large capital letter that's being used to start off that sentence there-- that capital M.

We also have our columns, and our columns are divided by alleys. And then, we have a nice gutter that's dividing the two pages that gives that nice clear separation from page to page. You also notice that our 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. A lot to consider and apply, but in the end, you get a nice-looking spread that's easy to read, with a functional design language.

Here's another example of type and context. This could be a movie poster. And 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. And 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. And 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."

So selecting line spacing, typeface, posture, and more is very important here 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 then proximity is right below the headline. And 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 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.

So all the things we've learned here are being applied. Very important. Weight, tracking, line spacing, typeface, and so on. So we looked at magazines and magazine spreads, movie posters, and I wanted to end with just a few pieces that were less about layout and more about design for us designers. 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.

So we have this simple, but beautiful design made entirely of type. And 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. As I mentioned, it still creates this harmonized space somehow. So very, very clever use of type.

Likewise, here's 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.

Well everyone, that ends our lesson for today. We'll end with our single key term, which was type specimen-- a sample page of a particular typeface shown in a variety of sizes and line spacing. I hope you've enjoyed this lesson with me today. My name is Mario, and I will see you next lesson.

Notes on "Type in Context"

Citation

Image of Magazine Covers, Creative Commons

http://www.flickr.com/photos/davidorban/4472746709...

Image of Caslon Specimen, Public Domain


Image of Dejavu Font Speciment, Public Domain


Image of Popular Science Magazine, Creative Commons

http://www.flickr.com/photos/x-ray_delta_one/42750...

Image of Time Magazine Spread, Creative Commons

http://www.flickr.com/photos/matchthehatch/4473048...

Image of Transformers, Creative Commons

http://thehybridmotion18.deviantart.com/art/Transf...

Image of Biology Typography, Creative Commons

http://venustraphobiame.deviantart.com/art/Biology...

Image of Titanic Typography, Creative Commons

http://niteshneela.deviantart.com/art/Titanic-1553...


TERMS TO KNOW
  • Type Specimen

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