IntroductionWelcome| 00:04 | Typography is a deep and wonderful universe.
| | 00:08 | Looking at Letterforms, we can see that there
are independently beautiful as works of art.
| | 00:13 | In addition to being beautiful,
Letterforms also form words, sentences, and thoughts.
| | 00:19 | These are the very foundation of our history.
| | 00:22 | Letterforms enable us to communicate with
one another and to transmit every aspect of
| | 00:27 | our civilization from
one generation to the next.
| | 00:30 | I'm Ina Saltz, and I'd like to welcome you to the
world of Typography. Typography is everywhere.
| | 00:37 | It has traditions, practices,
functions, and a language all its own.
| | 00:42 | Type plays a vital role in every form of media.
| | 00:46 | The whole idea of this course is to give you a
solid foundation in the basics of Typography.
| | 00:51 | Whether, you're designing a brand identity, a book,
a website, or just a brochure for a local business.
| | 01:00 | If you've never had any formal training in
Typography, there will be plenty of material
| | 01:04 | in this course to help you make better
decisions about your Typographic usage.
| | 01:10 | Even if you're not new to the field, I think
you'll find this course to be a great refresher,
| | 01:15 | and you may even discover some new concepts and
practices that will improve your use of Typography.
| | 01:22 | We'll explore universal and timeless principles of
Typography and explain good Typography practices.
| | 01:29 | We're going to get up close to the details of
type so you can get a better sense of why
| | 01:33 | it works the way it does.
| | 01:35 | We're going to talk about basic principles of Type to
help you make the best design choices for your projects.
| | 01:41 | And we'll go over naming conventions.
| | 01:43 | So you can speak about Type with
professionalism and confidence.
| | 01:47 | I'm passionate about letterforms.
| | 01:50 | For more than 30 years, I've been deeply involved
in the world of Type, and I'm excited to share with you
| | 01:54 | the Foundations of Typography.
| | 01:57 |
| | Collapse this transcript |
| Why good typography matters| 00:00 | Type can help form that critical
first impression about your message.
| | 00:05 | Type is important because the viewer gets an impression
about your message before even beginning to read it.
| | 00:11 | For example, Type can appear
to be friendly or aggressive.
| | 00:16 | It can suggest a
traditional or a modern approach.
| | 00:20 | It can look feminine or masculine.
It can look calm or chaotic.
| | 00:26 | As a designer, you want to choose a type style
that best expresses the message you want to send.
| | 00:32 | When type is used well and does its job, a
positive impression is made immediately at a glance.
| | 00:38 | When we see these type used well, we are
already absorbing key information about the content.
| | 00:44 | In today's immersive visually driven media culture,
people are becoming more and more visually sophisticated.
| | 00:52 | Even those who haven't been educated in the
fine points of typographic usage, can sense
| | 00:57 | the difference between well executed typography
and type that has been chosen or used thoughtlessly.
| | 01:03 | They may not be able to explain exactly why
they have a negative feeling but they know
| | 01:08 | something is not quite right.
| | 01:11 | Companies spend a lot of time and money, formulating
their typographic branding and corporate identities.
| | 01:17 | They understand that type has a personality.
It makes an impression.
| | 01:22 | It can pack a punch and evoke an
emotional response from the viewer.
| | 01:27 | In every situation, good, clean
typography can make a difference.
| | 01:31 | I know that typography can be intimidating
but in this course, I'm going to help you
| | 01:36 | see the differences
between good and bad typography.
| | 01:39 | We'll cover the proper way to choose typefaces, how
to combine typefaces, and how to arrange type well.
| | 01:47 | Good type usage will always enhance
and amplify the meaning of the text.
| | 01:52 | Remember good type matters.
| | 01:55 |
| | Collapse this transcript |
| The power of type| 00:00 | Type is important because it conveys information.
| | 00:03 | But good type choices can also add a powerful boost to the
information, making it more visible and easily accessible.
| | 00:11 | The primary goal of good type is
to visually communicate its message.
| | 00:15 | I want to show you a couple of examples that prove how the
power of type can even be a matter of life and death.
| | 00:22 | Two of my favorite examples are
Highway Signage and Prescription Labels.
| | 00:26 | The first example involves very large
letterforms that have to be easy to read at 60 miles an
| | 00:33 | hour and from a sufficient distance so that
you can read it in time to make a quick decision.
| | 00:39 | Now imagine that you are driving at 60 miles an hour at
night in a rainstorm, the type still has to do its job.
| | 00:46 | The critical information on the highway signage must be
legible to the driver, even under the worst conditions.
| | 00:54 | My second example of the power of type involves
really tiny type, on the humble little prescription bottle.
| | 01:01 | Its instructions and identifying information
can often be hard to read, especially by an
| | 01:06 | older person whose eyesight is impaired.
| | 01:09 | A designer named Deborah Adler was inspired to
redesign prescription packages when a household
| | 01:15 | medication mix up made her
grandmother seriously ill.
| | 01:19 | She redesigned the type on the prescription
bottle by changing the typographic hierarchy,
| | 01:24 | adding color, enlarging the most
important type and using a more legible typestyle.
| | 01:31 | Target was so impressed by her redesign that
the new packaging was rolled out at all Target
| | 01:36 | stores and is now being
implemented by other companies as well.
| | 01:41 | So you can see, in some cases, good type can
even mean a difference between life and death.
| | 01:46 | Good type usage isn't just a matter of aesthetics,
it is a matter of strong, legible communication.
| | 01:51 |
| | Collapse this transcript |
| The theory of typographic relativity| 00:00 | I'd like to talk about an important concept
in typography, which is the role of proper
| | 00:06 | proportions, or as I like to call it,
the Typographic Theory of Relativity.
| | 00:12 | This theory applies to
everything you design using type.
| | 00:16 | This is about the way in which
typographic elements interact with each other.
| | 00:21 | A successful design has many parts and those
parts all exist in relation to one another.
| | 00:28 | For example, if you are following a recipe
when you're preparing a meal, and you decide
| | 00:33 | to change the amount of one of the ingredients,
you have to also change the amounts of the
| | 00:38 | other ingredients in proportion.
| | 00:41 | The relationships of all of the ingredients
to one another is a key factor in how they
| | 00:46 | interact to create a balance of flavors.
| | 00:49 | Put another way, every ingredient has
an effect on every other ingredient.
| | 00:55 | Another example of the Theory of Relativity is the
feeling you get when you walk into a well-designed room.
| | 01:01 | You feel comforted by the
flow of space in the room.
| | 01:05 | Its proportions, surfaces, colors, and shapes,
and all of its furnishings, accessories, and
| | 01:11 | lighting appear to go together seamlessly.
| | 01:15 | It's not random, it's not an accident,
it's the sum total of good decision-making and
| | 01:21 | an understanding of how every
element interacts with every other element.
| | 01:26 | Type is like that too.
| | 01:28 | Typographic elements exist in
a relationship to one another.
| | 01:31 | They must be balanced in size,
weight, position, orientation.
| | 01:36 | There must be balance among styles, colors, and other
factors in order to clearly communicate your message.
| | 01:44 | Everything in your design exists
in relation to everything else.
| | 01:48 | That is what I mean by the
Typographic Theory of Relativity.
| | 01:53 |
| | Collapse this transcript |
| Getting the most out of this course| 00:00 | In most lynda.com videos, the exercise files are
projects that you can download to help you follow along.
| | 00:07 | But this course is different.
| | 00:09 | In this course, we are delving into
typographic principles and guidelines, language, type
| | 00:14 | history, and type classification, so there
aren't any projects to follow along with.
| | 00:20 | But I have included a few
resources for this course.
| | 00:23 | These documents have been provided in the
exercise files tab on the course details page
| | 00:29 | for all lynda.com subscribers.
| | 00:32 | Or if you're watching this tutorial on a DVD-ROM,
the exercise files have been included there.
| | 00:39 | One of these documents is a list of type blogs
and newsletters which feature recent font releases.
| | 00:45 | I recommend you check these out to help you
stay plugged in to the latest developments
| | 00:50 | and news in the world of typography.
| | 00:53 | Another document is a list of typography books
you should take a look at to continue your learning.
| | 00:59 | There's also a list of schools, organizations,
and conferences that are all about typography.
| | 01:05 | And I'm including links to type management software
and type design software that I discuss in this course.
| | 01:11 | These documents aren't necessary to follow
along with this course, but they will give
| | 01:16 | you some helpful resources to keep learning
and take your type usage to the next level.
| | 01:22 | With that in mind, let's get
started with Foundations of Typography.
| | 01:27 |
| | Collapse this transcript |
|
|
1. Typographic DifferentiationSerif vs. sans serif| 00:00 | Serif and Sans Serif, these are the
two most basic kinds of letterforms.
| | 00:06 | So let's start by looking at the
differences between these two styles.
| | 00:11 | First, let's define type with Serifs.
| | 00:15 | These are the letters that have the
little extenders sometimes called little feet.
| | 00:19 | There is a small group of Serif typefaces.
They're quite different from one another.
| | 00:25 | But the one thing they have in common
is that they are all Serif typefaces.
| | 00:30 | Serifs are evident in the capital
letters and the lowercase letters.
| | 00:36 | The Serifs at the bottoms of the
letters are also known as footers.
| | 00:43 | Let's look at some differences.
| | 00:45 | It's not really important right now
that you know which typefaces are which.
| | 00:49 | But I want to teach you to be a good type
detective to know what details to look for
| | 00:54 | when you're looking at a typeface.
Here are lowercase Ls from five Serif typefaces.
| | 01:00 | Let's look at some
specific differences between them.
| | 01:04 | Being a good type detective, you can see
that the angles of the Serifs vary quite a bit.
| | 01:11 | Now let's look at the footers.
| | 01:13 | You can see that their thickness and
their width and their shape also vary.
| | 01:19 | Let's look at the Serifs, and I want you to observe
how the shapes and the weight of the Serifs vary.
| | 01:26 | We're looking at these details greatly enlarged,
but all of these details matter, because they
| | 01:31 | affect how the typeface looks when it
is set in a size suitable for reading.
| | 01:37 | Now I'd like to explain the difference between two broad
categories of Serif, what we call Bracketed and Unbracketed.
| | 01:46 | Unbracketed Serifs have a sharp 90 degree corner
angle and Bracketed Serifs have a curved transition
| | 01:53 | from the Serif to the stand.
| | 01:56 | There is another category of Serifs called
Slab Serifs and they are just what they sound like.
| | 02:03 | Look at the differences between
these examples of Slab Serif fonts.
| | 02:07 | You can see different letter widths, different
details, but there is one thing they all have in common.
| | 02:14 | Their horizontal strokes, their Serifs, are the
same width or weight as their vertical strokes.
| | 02:21 | Now let's take a look at Sans Serif.
| | 02:24 | You can see that these
letters are without the little feet.
| | 02:28 | In French, Sans means without so
Sans Serif means without Serifs.
| | 02:34 | Sometimes we just call them Sans for short.
Here are some well-known Sans Serif typefaces.
| | 02:40 | Look closely, you can see that these
examples have distinct differences from one another,
| | 02:46 | but they all have one thing in common.
They have no serifs.
| | 02:51 | So now you have the broad
strokes of type classification.
| | 02:54 | We'll go into more depth on type
classification later on in this course.
| | 02:59 | There are tens of thousands of typefaces in
each of these categories that are available
| | 03:04 | from the many type foundries and type sellers and no
one can be familiar with all of them, not even me.
| | 03:10 | But if you can learn to distinguish the
important differences and characteristics of basic type
| | 03:15 | styles, it will help you make smart
choices in designing your projects.
| | 03:20 | Being a good type detective and learning to see the
different types of Serif and Sans Serif is the first step.
| | 03:30 |
| | Collapse this transcript |
| Display type vs. text type| 00:00 | An important distinction in typography is the
difference between Text Type and Display Type.
| | 00:07 | Here's what you need to remember.
| | 00:09 | Text Type is type that is designed to be
read in large quantities at small sizes.
| | 00:15 | For example, the bulk of the text in any
newspaper, magazine, or book is Text Type.
| | 00:21 | It's also called Body Type or Body Copy.
| | 00:25 | Display type, on the other hand, is type that
14 point or larger, and it's typically used
| | 00:31 | in small quantities for emphasis and effect.
| | 00:34 | The vast majority of the 200,000 or so
typefaces now available are Display typefaces.
| | 00:42 | Display Type encompasses an
enormous variety of letterforms.
| | 00:46 | But first let's talk about Text Type.
| | 00:50 | Depending on the type style, Text Type is
typically between 8 point and 10 points in
| | 00:55 | size or possibly 12 point type, depending
on the typeface. Because Text Type is small
| | 01:02 | it has to be easy to read.
| | 01:05 | The most famous essay on text typography
was written in 1930 by Beatrice Ward.
| | 01:11 | Beatrice Ward used the
metaphor of a crystal goblet.
| | 01:14 | She said that the goblet should be clear so that its
contents would be what you see, not the goblet itself.
| | 01:21 | She was making the point that clarity in
typesetting allows the content to be easily appreciated,
| | 01:27 | suggesting that printing or
typography should be invisible.
| | 01:32 | Smooth reading is the goal.
| | 01:34 | It may seem effortless when
we're in the process of doing it.
| | 01:37 | But in reality, when we're reading, we rely
on many tiny cues to help us take in words
| | 01:43 | and passages of text in fractions of a second.
| | 01:47 | Letterforms need to be super clear so that
it takes as little effort as possible, in
| | 01:51 | fact, no conscious effort at all
to see the shapes of the letters.
| | 01:57 | Typefaces that are designed to be read in
large quantities at small sizes share some
| | 02:02 | important qualities and characteristics.
| | 02:04 | If you look at these examples of widely used text
typefaces, everyone has open spaces inside the letters.
| | 02:12 | The body height of the letters
is tall, compared to the capitals.
| | 02:16 | They have rhythmic and repetitive
shapes and they are a medium weight.
| | 02:21 | And it's easy to identify letters
immediately because of their details.
| | 02:26 | Some of the most popular text typefaces used
today are digital versions of typefaces that
| | 02:31 | have been around for hundreds of years
because they still work perfectly well, such as the
| | 02:36 | first three in this example.
What about Display Type?
| | 02:41 | Display Type is just the opposite.
| | 02:43 | Display Type depends on its unique
form to announce and amplify its content.
| | 02:48 | It is not supposed to be invisible and in the
vast universe of display typefaces available,
| | 02:54 | there is something for every possible use.
| | 02:57 | For example, in the category of typefaces
that look like handwriting, hundreds of typefaces
| | 03:02 | are available, here are just a few examples.
| | 03:05 | Something else to keep in mind about Text
Type and Display Type, Text Type can function
| | 03:10 | as Display Type by being made larger.
| | 03:13 | But Display Type can rarely be used to
function at small sizes like Text Type.
| | 03:18 | Later in this course, we're going to cover
when and how to use Text Type and Display
| | 03:24 | Type to make your design
projects look professional.
| | 03:27 | I want you to think of display
typefaces like the icing on a cake.
| | 03:32 | Display Type should be used in
small quantities and with restraint.
| | 03:35 | A little intense sweetness goes a long way.
| | 03:40 |
| | Collapse this transcript |
| Type history| 00:00 | Let's take a brief look at the history of our
letterforms, so we can have a better understanding
| | 00:06 | of how we organize and identify type,
which is known as Type Classification.
| | 00:11 | Most systems of type
classification are based on type history.
| | 00:15 | So, let's go back in time to see
how we inherited our letterforms.
| | 00:20 | The foundations of Western writing
go back to the 5th century BCE.
| | 00:25 | Carved Greek letters were one of the
first formal uses of Western Letterforms.
| | 00:30 | Roman Monumental Capitals appeared in the 5th
century BCE and are the ancestor of all serif typefaces.
| | 00:37 | Among passionate typophiles like myself,
the most wired example of carved Roman capitals
| | 00:43 | is still visible at the base of Rome's Trajan
Column, which was completed in the 1st century.
| | 00:50 | It's believed that these letterforms were
created with a broad edged brush, and that
| | 00:55 | the action of the broad edge combined with the
incised V cuts of the chisel led to the creation of Serifs.
| | 01:03 | All over Western Europe in the millennium
that followed, pockets of different lettering
| | 01:08 | styles flourished and
handwritten letterforms continue to evolve.
| | 01:12 | There are plenty of resources in the
exercise files, if you want to know much, much more.
| | 01:17 | But for our purposes, a significant
milestone in clean, uniform, legible letterforms came
| | 01:24 | during the rule of the Emperor
Charlemagne in approximately 800 A.D.
| | 01:29 | He decreed that the Carolingian
letterforms should be universally used, these are the
| | 01:35 | basis for the lowercase
letter forms we recognize today.
| | 01:39 | But the biggest turning point was
the new technology of movable type.
| | 01:43 | This has been largely attributed
to one man, Johannes Gutenberg.
| | 01:48 | His Gutenberg Bible printed in 1455 remains one of the
finest examples of the art of typography ever created.
| | 01:56 | He modeled his type on letterforms in use at
the times, which are called Blackletter or Fraktur.
| | 02:02 | We'll talk more about those
forms later in this chapter.
| | 02:07 | Although Gutenberg did not invent movable
type or the printing press, he put together
| | 02:12 | existing devices and technologies to
replicate typographic pages mechanically.
| | 02:17 | This enabled literacy to spread throughout
Europe, which was certainly one of the most
| | 02:22 | momentous developments in the
history of human civilization.
| | 02:27 | Later in the 15th century as the
technology of movable type spread the typefaces used
| | 02:32 | by Gutenberg gave way to typefaces based on
Roman letterforms, and the Carolingian minuscule,
| | 02:38 | that was the beginning of the era of type,
and here is where type history begins to shape
| | 02:44 | our systems of type classification.
| | 02:49 |
| | Collapse this transcript |
| Type classification| 00:00 | Let's look more closely at some shapes and
other details, which can help us categorize
| | 00:06 | typefaces, beyond just serif and sans serif.
| | 00:09 | Almost all typefaces belong
to a recognized tradition.
| | 00:13 | In order to make informed decisions about their use, we
need to locate typefaces within their historical context.
| | 00:21 | Although there's no single universal system of
type classification, I would like to introduce
| | 00:25 | you to the basic most widely
recognized categories of type.
| | 00:30 | The first Roman serif types are called Oldstyle.
They were created between the late 15th century
| | 00:36 | and the mid 18th century.
| | 00:38 | Here are some examples, notice how they have
low contrast between thick and thin strokes,
| | 00:44 | and they have thick bracketed serifs.
| | 00:47 | You will also notice the long senders and
descenders, the parts of the letters that
| | 00:51 | extend above and below the body height, and
within the body they have smallish spaces.
| | 00:58 | The next major category of
type is known as Transitional.
| | 01:02 | Transitional represents the stylistic bridge
between Oldstyle and the next category MODERN.
| | 01:08 | You can identify transitional
typefaces by their sharper flatters serifs.
| | 01:13 | You'll also see a tighter bracketed curve and
the stress in the curved letters is more vertical.
| | 01:19 | Here is where we can see the access known as
the stress, it is an imaginary line connecting
| | 01:26 | the thinnest parts of an O.
| | 01:28 | In Transitional typefaces, there is a
higher contrast between thick and thin strokes.
| | 01:34 | The change in appearance from Oldstyle to
Transitional occurred in the mid 18th century,
| | 01:40 | partly due to advances in
printing and font making technology.
| | 01:45 | Modern typefaces made their first
appearance in the late 18th century.
| | 01:49 | We can easily recognize Modern typefaces,
noticed the extreme contrast between thick
| | 01:54 | and thin strokes and the ultra thin un-bracketed
serifs, which are horizontal, or nearly horizontal.
| | 02:02 | Slab Serif, the next major category
also emerged in the mid 18th century.
| | 02:07 | These fonts were useful for advertising and
signage, because of their weight and strong presence.
| | 02:13 | In the Slab Serif category, serifs are generally
un-bracketed or square and the main characteristic
| | 02:19 | of Slab Serif is the lack
of contrast between strokes.
| | 02:23 | That means that the thicks and thins
are of equal or almost equal weight.
| | 02:28 | In the late 1800s Sans Serif typefaces
also evolved to meet the needs of advertising.
| | 02:34 | There are three main
categories of Sans Serif typefaces.
| | 02:38 | The first is called Grosteque,
which is also known as Gothic.
| | 02:42 | Grotesques have slight
variations in stroke width.
| | 02:46 | The letters are fairly wide and the rounded
letters are often a bit squared off, if you look closely.
| | 02:53 | There are two other distinct kinds of Sans
Serif typefaces that you should know about,
| | 02:58 | Humanist Sans Serif have the
proportions of classical Roman letters.
| | 03:03 | If you look closely, you'll see some of the
proportions of the hand-lettered Roman forms.
| | 03:09 | The last category of Sans Serif are the easiest
to spot, they are based on the Geometric forms
| | 03:14 | of the circle, square, and triangle.
| | 03:17 | Geometric Sans Serif reflects the
modernist movement of the early 20th century.
| | 03:23 | Futura, Avant-Garde, and Kable are some of
the most widely known Geometric Sans Serifs.
| | 03:29 | So now we have looked at specific details
in the groups of major serif and sans serif
| | 03:34 | categories in order to organize,
and identify them, or classify them.
| | 03:40 | They are other typefaces more newly designed,
which follow the style of a type classification,
| | 03:46 | so they are also included in that
category, they are known as Revivals.
| | 03:50 | So, next time you're at a movie theater watching
a film's title sequence with a group of friends,
| | 03:56 | you will be able to impress them by saying
just check out that Geometric Sans Serif.
| | 04:01 | More important, understanding type classification will
help you decide which typefaces to use for your project.
| | 04:08 |
| | Collapse this transcript |
| Other type categories| 00:00 | We're going to look at some
other categories of typefaces,
| | 00:04 | the kinds of typefaces that don't fit as neatly into
classification categories. These are all display typefaces.
| | 00:11 | So, remember that they should be used
at larger sizes and in small quantities.
| | 00:16 | One category that is easy to identify and
that is hugely popular right now is Scripts.
| | 00:22 | These are letterforms that are
based on handwritten letters.
| | 00:24 | They are mostly or partly attached to
one another with connecting strokes.
| | 00:29 | Here are some common examples, they can
vary from very formal to very informal.
| | 00:34 | One of my favorite formal scripts is
Bickham Script, because it is fabulously elegant,
| | 00:39 | and it comes with hundreds of
alternate flourishes in its character set.
| | 00:43 | For example, look at 15 possible
variations of the lowercase H in Bickham's Script.
| | 00:51 | You will see scripts in use everywhere.
| | 00:55 | Informal scripts can look like
handwritten or brush written letters.
| | 01:00 | There are hundreds of wonderful new scripts
now available with varying degrees of weight,
| | 01:06 | fluidity, and alternate characters.
| | 01:10 | Scripts like Zapfino can be tricky to use
well, because they sometimes have been swashes
| | 01:15 | which can get tangled up when lines are stacked.
| | 01:19 | Used with restraint, flourishes can add a
bit of pizzazz to your layout, this is a page
| | 01:24 | from a cookbook designed by one of my students.
| | 01:28 | Here is a beautiful modern use of a script
face, notice how all of the flourishes on
| | 01:33 | the left echo the swirls of the
carrot stocks in the photograph.
| | 01:37 | I love the visual pun between the lovely curves
of the stocks and the fanciful swirls around the title.
| | 01:45 | Another very popular category of type is
Blackletter or Fraktur, you can see how these letters
| | 01:51 | do indeed look fractured or broken, because
each letter is made up of individual strokes.
| | 01:58 | In this category there are also
hundreds of wonderful choices.
| | 02:01 | My favorite is called Fette
Fractur, it is just so juicy.
| | 02:06 | These spiky letters are often
erroneously called Old English.
| | 02:10 | In this example you can see white typefaces
are called Blackletter they tend to be heavy
| | 02:15 | in appearance, they have very small spaces
within the letters, there is very little space
| | 02:20 | between letters, and very
tight spacing between lines.
| | 02:23 | So their overall color on
the page is heavy or black.
| | 02:28 | Here's a modern take on Blackletter.
| | 02:32 | Beyond the world of Blackletter and Scripts
there are huge numbers of decorative and ornamental
| | 02:37 | typefaces that were invented to respond to the
needs of advertising, brand identity, and promotion.
| | 02:43 | Some of these over-the-top and
outrageous styles justify classification.
| | 02:49 | Display Typography is as
volatile as the fickle winds of fashion.
| | 02:53 | There are unexpected reinterpretations or
revivals of previously dated styles and
| | 02:59 | all kinds of eccentric experiments.
| | 03:02 | Some of these become new
classics and others fade away.
| | 03:05 | Browsing through the endless type choices
available it might seem overwhelming, but
| | 03:09 | the more you really look at type with a
critical and informed eye, the more educated your eye
| | 03:14 | becomes, and you will develop a
deeper awareness of what to look for.
| | 03:18 | This will help you find a display
typeface to match your specific needs.
| | 03:23 |
| | Collapse this transcript |
| Guidelines for combining typefaces| 00:00 | Because of the complex array of typographic
choices that are readily available, the most
| | 00:05 | common question I'm asked is how do
I know what Typefaces go together?
| | 00:10 | Let's try to take some of the
mystery out of making good type choices.
| | 00:14 | What we are looking for are type combinations
which will live harmoniously with one another.
| | 00:20 | Using too many Typefaces
can create visual cacophony.
| | 00:24 | It's like type soup, in many cases you
might be better off selecting just one Typeface
| | 00:29 | which has a large family of variations.
| | 00:32 | Helvetica Neue, for example is a very
large family with many weights and widths.
| | 00:38 | And each of these comes with a
matching set of italic letters.
| | 00:41 | Because the fonts all originate from one family member,
you can be sure the other family members will play well together.
| | 00:50 | Here are a couple of projects each of which
sticks to using one large Typeface which allows
| | 00:55 | the designer to achieve many different effects.
| | 00:59 | Each of these examples is really
varied yet uses only one Typeface.
| | 01:04 | You can see here that by using many
different weights and widths from one family there's
| | 01:10 | plenty of typographic diversity.
| | 01:12 | But let's say you do need or
want more than one Typeface.
| | 01:16 | Here are some factors that
might help you decide which to use.
| | 01:20 | The most important factor is contrast or differentiation,
a common situation is body text plus headlines.
| | 01:28 | Your Text Type choice will
most likely be a Serif text face.
| | 01:33 | So for contrast, you will want to look for something
like a Sans Serif that has a variety of bold weights.
| | 01:40 | In this page from Vibe magazine each Typeface plays a
different role and each is a strong contrast from the others.
| | 01:48 | Most projects don't need more than two well-chosen
Typefaces to create a broad and useful typographic hierarchy.
| | 01:56 | When combining Typefaces,
consider their basic characteristics.
| | 02:01 | Typefaces from a Similar Historical Period whose families
have different features, may work well together.
| | 02:07 | Another possibility, combine Typefaces by
the Same Designer, since they will have a
| | 02:12 | stylistic connection, or you might want
to choose two very opposite Typefaces,
| | 02:19 | one very traditional and sober,
the other, friendly and warm.
| | 02:24 | Typefaces with a Similar Body Height can
make good companions as long as their styles are
| | 02:29 | different enough to have a strong contrast.
| | 02:32 | A common mistake in combining Typefaces is
putting together Typefaces that are individually
| | 02:37 | idiosyncratic, that is they have Strong
Stylistic details, so they conflict with one another.
| | 02:44 | And here we are with Eurostile and
Cochin looking very unhappy together.
| | 02:50 | If you find it necessary to add a third Typeface to a text
face in a Sans Serif, a Slab Serif might be a good choice.
| | 02:58 | This works well if you have a need for a third
of typographic texture or content which needs
| | 03:04 | to be separate and stand out
from the other text elements.
| | 03:08 | Think of putting together an outfit where
each piece of clothing has a complex pattern,
| | 03:13 | maybe a fashion maven
compare these successfully.
| | 03:17 | But in all likelihood the
effect will be jumbled and unmatched.
| | 03:21 | One simple piece and one complex piece work
much better, that way the stylistic details
| | 03:27 | of both can be appreciated.
| | 03:30 | Choosing two simple pieces or Typefaces
works well too, differentiation is the key.
| | 03:37 | Combining Typefaces need not be any more
complicated than putting together an outfit.
| | 03:42 | The elements should compliment one another.
| | 03:44 | There are no hard and fast rules,
but let good taste be your guide.
| | 03:49 |
| | Collapse this transcript |
| Using cases| 00:00 | When we talk about cases we are describing
the difference between Uppercase and Lowercase.
| | 00:06 | Each of these conveys a different message, so you
want to learn how to use cases to their best advantage.
| | 00:13 | Uppercase or Capitals were
originally called MAJUSCULES.
| | 00:17 | I like that name, because it
reminds us that MAJUSCULES are majestic.
| | 00:21 | MAJUSCULES have a stronger
presence on the page or screen.
| | 00:26 | In this poster you can see how powerful these
capitals are, they're like giant building blocks.
| | 00:32 | And this is an Urgent Medical Care facility, so
capitals convey a sense of trustworthiness and authority.
| | 00:40 | Capitals generally have more visual weight and
they command more attention, so they indicate
| | 00:45 | importance, they convey a sense of
authority and sometimes formality.
| | 00:50 | Caps don't like to be too close to one another, they
feel more comfortable with a bit of extra space around them.
| | 00:57 | And there are minuscules, you can
think of minuscules as miniature.
| | 01:02 | We call them lowercase.
| | 01:04 | Lowercase letters tend to look friendlier, warmer,
more personal, and more informal than uppercase letters.
| | 01:11 | I love the petco logo, because it
seems just right for warm and cuddly pets.
| | 01:17 | And this logo for The Bubble magazine is a
great choice, because the letters look like
| | 01:21 | Bubbles, so there's a perfect
match between image and intent.
| | 01:25 | Unlike Capitals, shapes of Lowercase
letters are designed to work in closer contact and
| | 01:31 | to be more interconnected than uppercase letters.
| | 01:35 | On this title page the letters feel
comfortable, even though they're close together.
| | 01:40 | When you're using Lowercase or a mixture of Uppercase and
Lowercase, it sends a friendlier, more low-key message.
| | 01:48 | Cases also have a volume control, you can
see the difference that Caps and Lowercase
| | 01:54 | have when you compare the effects visually.
Which one seem more suited to these words?
| | 02:00 | Perhaps the word dancing in Caps is more active
like Salsa, and the Lowercase dancing is Ballet.
| | 02:07 | You can also think of the effective Caps as a
louder voice and upper and lower case in a softer voice.
| | 02:14 | Lowercase can be loud, but can still
be informal and fun, as in this example.
| | 02:20 | When you are choosing cases for your project,
think about the qualities you are trying to
| | 02:24 | convey, upper and lower case
have distinct personalities.
| | 02:28 | So use cases wisely to give the right
visual direction to match your message.
| | 02:33 |
| | Collapse this transcript |
|
|
2. The Language of TypeAnatomy: Parts and shapes of type| 00:00 | When I was a little girl first learning the
alphabet, I remember daydreaming about the
| | 00:05 | letters above the blackboard.
| | 00:07 | The little A, the big A, the little B, the
big B, I loved all the shapes of the letters.
| | 00:13 | Each one seemed to have its
own personality and story.
| | 00:16 | In my imagination, the big B was someone
struggling to carry two overflowing bags of groceries
| | 00:23 | home from the store.
The big I was a soldier standing at attention.
| | 00:27 | The little S was a small child
rolling in the grass, perhaps with a puppy.
| | 00:32 | We have known names of the letters since we were
children, but the parts of those letters have names too.
| | 00:38 | And the environment in which letters
exist has its own descriptive language.
| | 00:43 | This is useful knowledge
for any design professional.
| | 00:46 | It makes it easier to communicate
about typefaces and their characteristics.
| | 00:51 | It also helps to educate your eye about the
differences between typefaces and to understand
| | 00:56 | the underlying structure of a typeface.
| | 00:59 | First, let's look at the
little world where type lives in.
| | 01:02 | We say that type sits on a baseline.
| | 01:06 | The next important term is based on the height
of the lowercase X, that is called the X-height.
| | 01:12 | Its Body width is the invisible
boundary around the shape of the letter.
| | 01:17 | The parts of the letters that rise
above the X-height are called Ascenders.
| | 01:22 | The parts that extend below the
baseline are called Descenders.
| | 01:26 | And together these are called Extenders.
| | 01:29 | So the invisible boundaries of the Extenders are
called the Ascender Line and the Descender Line.
| | 01:36 | The Cap height will vary based on the typeface.
| | 01:39 | It might be the same as
the Ascender Line or shorter.
| | 01:43 | Now let's talk about letter parts.
| | 01:46 | Remember, Serifs are the little feet or extensions
that are the finishing strokes of the letterforms.
| | 01:52 | Here are some other common
names for the parts of letters.
| | 01:57 | All the rounded letters have Bowls.
| | 02:00 | Look at this B, the
rounded part is called the Bowl.
| | 02:03 | The tall vertical stroke is the Stem.
| | 02:07 | Strokes that extend from
the stem are called Arms.
| | 02:10 | We can see in an example on this E.
A lot of the letters are like body parts.
| | 02:15 | See how the Ear of the G
sticks out like a real ear.
| | 02:20 | Your Spine has a curve in
it just like this S Spine.
| | 02:24 | And just like your shoulder,
the Shoulder on the M curves.
| | 02:29 | The Leg extends to the baseline and
at the base of the Leg is the Foot.
| | 02:34 | Just like a cat's tail, the Tail of
the Q often hangs below the baseline.
| | 02:40 | A Crossbar is a horizontal stroke in the
middle of a letter like this one on the A.
| | 02:47 | A Cross stroke crosses over a stem like this F.
But on the E, we have what's called a Bar.
| | 02:56 | Any enclosed space in a
letter is called a Counterspace.
| | 03:01 | On some letters, you'll see a
Spur like a cowboy's spur on a boot.
| | 03:08 | Over the J and the I, the dot
in typographic terms is a Jot.
| | 03:14 | The end point of a
letter is called the Terminal.
| | 03:17 | And the Terminal of this
F is also known as a Beak.
| | 03:21 | The g has a nice Loop and a
connecting stroke is called a Link.
| | 03:28 | When two strokes come to a point
like in this A, it's called an Apex.
| | 03:34 | Here you can see the M has two Apexes.
| | 03:37 | I also want to point out common names
for the forms of the lowercase A and G.
| | 03:44 | They can be single-story or double-story.
| | 03:48 | One more term relating to
letter parts is Ligature.
| | 03:52 | A Ligature is the connection between a specific
pair of letters or in some instances, three letters.
| | 03:59 | A ligature smoothes the
connection to improve legibility.
| | 04:03 | This might seem like a lot to learn, but it's
useful to communicate using the same language
| | 04:08 | as other design professionals.
| | 04:10 | If you want to familiarize yourself with
additional type terminology, you'll find resources in
| | 04:16 | this course's exercise files.
Most typed terminology makes commonsense.
| | 04:21 | The terms are pretty
descriptive of how they appear.
| | 04:24 | Did you notice how many of those terms are
the names of parts of our bodies, which remind me
| | 04:29 | how much like people, letters are,
just as I daydreamed so long ago.
| | 04:34 |
| | Collapse this transcript |
| Size and measurements of type| 00:00 | Simply put, the size of
type is measured in points.
| | 00:05 | Points are part of the basic and essential
language designers use to discuss typographic elements.
| | 00:12 | If you are a designer, you're
probably already familiar with points.
| | 00:16 | Let's put it in another context and look at
the relationship between inches and how many
| | 00:21 | points add up to one inch. Here is 1 inch.
In every inch, there are six units called Picas.
| | 00:30 | In every pica, there are 12 points.
| | 00:33 | If you do the math, that means
there are 72 points in an inch.
| | 00:38 | So points are tiny measurements that
are about the width of a thin line.
| | 00:43 | Like most type terminology, the point system is
based on the traditions of movable or physical type.
| | 00:49 | The point size was the height
of the body of the piece of type.
| | 00:54 | The body height depended on the tallest
Ascender and the lowest Descender in the font.
| | 01:00 | Within that height, the X-height of the font
varied, which is mostly wide typefaces that
| | 01:05 | are the same point size,
can look quite different.
| | 01:10 | Another measurement that affects the way type looks
is more subtle and depends on the design of the font.
| | 01:15 | It is called the set-width.
| | 01:18 | For example, if you compare these 5 Es which are
the same X-height, you can see that the widths differ.
| | 01:25 | Similarly, look at these Ms, their X-height
is the same, but their set widths differ.
| | 01:32 | Set width affects how many
characters will fit within a line of type.
| | 01:37 | A line of type is also measured in picas.
| | 01:40 | The width of a line of type is called the
Measure of the line or the block of text.
| | 01:45 | For example, the Measure of this
block of text is 30 picas wide.
| | 01:50 | Points are really tiny increments, but they
can define the characteristics of a typeface.
| | 01:56 | These tiny increments create subtle differences
between the height, width, and other proportions
| | 02:01 | of a typeface and they play a vital
role in creating its unique appearance.
| | 02:06 | In the next video we are going to look at how
other small increments define the proportions
| | 02:11 | of letters, as we explore typographic
variations of width, weight, and slope.
| | 02:16 |
| | Collapse this transcript |
| Type families: Widths, weights, and slopes| 00:00 | A type family is a group of related typefaces
which share similar design characteristics
| | 00:07 | and which are designed to work together.
| | 00:10 | Just like our own families, some are
very small and some are quite large.
| | 00:14 | The three most common variations in a type family are
combinations of different weights, widths, and slopes.
| | 00:24 | In this example you can see several different weights,
and also their companion, sloped or italic typefaces.
| | 00:31 | One example of a super small family is TRAJAN,
which you may recognize, because it has been
| | 00:36 | used in many film titles.
| | 00:38 | It only has capital letters no lowercase, it
was originally released with only two family
| | 00:44 | members, regular and bold weights.
| | 00:47 | TRAJAN was inspired by the Roman Majuscules
carved into the Trajan Column, and there were
| | 00:53 | no lowercase letters in use at that time.
Universe is a very large family.
| | 00:59 | You can see some of its
widths clearly in this example.
| | 01:04 | There are other mega families like Chronicle,
which has more than a hundred family members,
| | 01:09 | a vast selection of related
members stemming from a common parent.
| | 01:15 | Here are some of the many members in the Chronicle
type family, and here are a selection of different
| | 01:21 | weights within that family.
| | 01:24 | Most type families offer a minimum of uppercase
and lowercase letter forms and a set of numbers
| | 01:29 | and punctuation in regular and bold weights,
and in italic, in regular and bold weights.
| | 01:36 | If you have wondered where we got
the terms lowercase and uppercase?
| | 01:40 | The names come from the drawers of the case
were type was stored in the days when type
| | 01:45 | was made from metal or wood.
| | 01:47 | One of the characteristics that can
vary within a type family is weight.
| | 01:52 | Some typefaces have an enormous range of
Weights and while there were no consistent meaning
| | 01:57 | conventions in the Typographic world, it's
usually pretty easy to guess from looking
| | 02:01 | at the full name of a font what its weight is.
| | 02:04 | For example, Extra Light, Roman,
Semi Bold, Bold, and Black.
| | 02:11 | The second characteristic of different
family members within one typeface is Width.
| | 02:16 | Again, the names are pretty easy to
understand just by looking at them.
| | 02:21 | Terms like Ultra-Condensed,
Condensed, Roman, and Extended.
| | 02:28 | The third characteristic that can vary within
a family is Slope, depending on the typeface
| | 02:34 | Slope can refer to an Italic
version or an Oblique version.
| | 02:39 | Oblique, which you see here, is
simply a slanted version of the Roman.
| | 02:44 | The Italic is a slightly more inclined and
rounded version of the Roman or upright font,
| | 02:50 | and often features letterforms that had design
characteristics, which differ from the Roman.
| | 02:57 | If there are variations in all three, Weight,
Width, and Slope, this is the order in which
| | 03:03 | the naming conventions work.
| | 03:05 | First, all of the members of the type
family will start with the name of the typeface,
| | 03:10 | then the Weight, then the Width, then the Slope.
| | 03:14 | For example, Helvetica Neue which is the Name
of the typeface, Heavy, which is its Weight,
| | 03:21 | Extended which is its Width,
and Oblique, which is its Slope.
| | 03:26 | Georgia, one of my favorites, was
originally a small family and became very popular.
| | 03:32 | So, it recently expanded to
include additional Weights.
| | 03:37 | If your design requires complex levels of
hierarchy, sticking with the members of one
| | 03:42 | family will ensure that your
results will be typographically cohesive.
| | 03:47 | Using a large type family will
help simplify your design choices. Easy.
| | 03:57 |
| | Collapse this transcript |
| Reviewing the terminology of type, based on function| 00:00 | In this movie, I'm going to show you how
type is used for different purposes and tell you
| | 00:05 | what we call these different pieces
of type based on the way they're used.
| | 00:10 | These are the common terms that designers
use in discussing elements of their projects.
| | 00:15 | These are the tools of the trade.
| | 00:17 | Just as a cook or carpenter needs to know
the names of the tools they use, designers
| | 00:22 | also have a common toolset.
I am going to focus on magazines.
| | 00:26 | Even though similar terms apply to websites,
books, and other graphic projects. Magazines
| | 00:32 | have a fairly complex structure, so they
will have the greatest number of terms.
| | 00:38 | This magazine cover has many
distinct typographic elements.
| | 00:42 | The name of the magazine is called
its Logo, or sometimes its Masthead.
| | 00:47 | The cover headlines--or cover lines for short--
are the stories that are highlighted on the cover.
| | 00:52 | Here there is one main cover line
and a bunch of secondary cover lines.
| | 00:58 | The main cover line has its own subhead,
and there is a caption for the cover image.
| | 01:04 | The smallest typographic
element is the issue date.
| | 01:08 | Inside the magazine, we'll find a
bunch of other typographic elements.
| | 01:12 | Let's deconstruct them.
| | 01:15 | Looking at a Table of Contents is a good way
to get a sense of the magazine's hierarchy.
| | 01:19 | Here, there is an icon representing the
Logo, the Date, and the Headline Contents.
| | 01:27 | The size of the type will give you a
clue about which is the cover story.
| | 01:31 | Each story has a Headline, Description,
Byline, and the all-important page number.
| | 01:39 | At the bottom is something called a Folio.
| | 01:42 | The Folio contains key pieces of information
in small type at the bottom of the page, the
| | 01:47 | page number, the date of the issue,
and the URL of the magazine's website.
| | 01:52 | There are also captions
and credits for the images.
| | 01:57 | The Departments page has text in a smaller
size which indicates their length and importance
| | 02:02 | to the reader, each has a
Department Name, Description, and Page Number.
| | 02:09 | At the bottom of the page is
required legal language, called the Indicia.
| | 02:15 | Let's look inside the issue.
| | 02:16 | Here is a Department page, which has three
separate stories all part of a department called start.
| | 02:23 | You can see another slug at the top right.
The main story has a large headline.
| | 02:29 | The blue text under the
photo is a Subhead or Deck.
| | 02:34 | There is Body Copy with a byline at the end
in italic and credits along the left side.
| | 02:41 | On the right, we see a second story, it
has a headline, and it's separated into three
| | 02:47 | numbered text blocks.
At the end in italic is a byline.
| | 02:53 | At the bottom of the page is a
factoid with a slug and a headline.
| | 02:57 | A photo credit and the folio complete the page.
That's pretty much it.
| | 03:03 | Those are most of the basic terms that designers use
to apply to pieces of text based on their functions.
| | 03:09 | This is all part of the vocabulary of
typographic elements, our basic tools.
| | 03:14 | You won't have to say, hey
| | 03:16 | let's change that thingy, you can say that folio
needs to have more space under the running text.
| | 03:21 | Know the language of typographic elements, and
you can describe your projects with confidence.
| | 03:26 |
| | Collapse this transcript |
| Working with color and tonal weight: Exercises| 00:00 | In this video we are going
to look at typographic color.
| | 00:04 | When we use the word color in typography,
we don't mean colors of the rainbow, we mean
| | 00:08 | the grayscale or overall
tonal weight in a block of text.
| | 00:13 | A block of text will have its own levels of
darkness or lightness based on four variables,
| | 00:18 | the typeface, the size of the type, the
leading of the type, and the tracking of the type.
| | 00:25 | In the next chapter, we'll talk about
tracking and leading, but for now know that leading
| | 00:30 | is the space between lines of type and
tracking is how tight or loose the spaces between the
| | 00:36 | letters are overall in a block of text type.
| | 00:40 | Here are a couple of exercises that I used to teach my
students to see the tonal weight of a block of text.
| | 00:46 | The first exercise just uses leading
or the space between lines as a variable.
| | 00:53 | You can use a printout from your exercise files to
follow along or create them from scratch if you'd like.
| | 01:00 | First, using any design program--I prefer
InDesign which I'm using here--create a block
| | 01:05 | of type, 2 inches wide and
approximately 8 inches deep.
| | 01:10 | Using any text typeface, for example, Sabon,
fill it with 8-point placeholder text and
| | 01:17 | change the spaces between
the lines from very tight.
| | 01:20 | You can even let the lines touch for this
project and gradually open the line spaces
| | 01:25 | up until there is quite a bit of space
between the lines at the bottom of the text box.
| | 01:31 | There should be a smooth transition from very
tight lines of type to very open lines of type.
| | 01:37 | Now I want you print it out,
pause the movie, go ahead, we'll wait.
| | 01:43 | Now draw a rectangle exactly the same
size next to your block of text type.
| | 01:49 | Look at your type printout and squint until you can't read
the text, but you can see the shade of gray it creates.
| | 01:57 | Using a pencil, shade the blank box until its
gray shading matches the gray tones of the type.
| | 02:04 | See how close you can come to matching
the color or tonal weight of the text.
| | 02:08 | Here is another exercise, you can try for
yourself which shows the difference in tonal
| | 02:14 | weight based on the choice of typeface.
| | 02:17 | For this exercise, we'll compare serif
typefaces that are appropriate for text settings, but
| | 02:23 | you can also try the same thing with San Serifs.
Start by creating eight blocks of text type.
| | 02:29 | 20 picas by 26 picas and fill with solid placeholder text,
no paragraph breaks in eight different text typefaces.
| | 02:39 | I'm going to use Sabon, Hoefler Text, Palatino,
Georgia, Bodoni, Baskerville, Minion Pro, and
| | 02:47 | Perpetua, set them all in eight point type
with 10 points of leading, print them out.
| | 02:55 | Now squint to see the
differences in tonal weight.
| | 02:59 | Even though the size and leading are the same,
you can see that each typeface has a different
| | 03:05 | color based on the design of its letters.
| | 03:08 | Small differences in the stroke width, contrast,
set width, and X-height, give each a different
| | 03:15 | overall weight or tonality.
| | 03:19 | You can take this exercise one step further
by increasing the point size in those eight
| | 03:24 | text blocks by one point.
| | 03:26 | Keep the leading at two
points larger than the point size.
| | 03:29 | For example, starting with Georgia, set the
text at nine points on 11 points leading,
| | 03:35 | 10 points on 12, and 11 points on 13.
| | 03:40 | Print them out and look at the
differences in tonal weight or color.
| | 03:44 | You can't see these differences on screen,
you need to print them out, spread them out,
| | 03:49 | and compare their appearances.
| | 03:52 | You can also try subtler changes
in half points or quarter points.
| | 03:56 | These exercises will help you really see
the density of typographic color on a page so
| | 04:02 | that when you need to choose a text typeface
or to compare some text typefaces, you will
| | 04:07 | know what you are looking for, and you will see the subtle,
but sometimes critical differences in typographic color.
| | 04:17 |
| | Collapse this transcript |
|
|
3. Spacing and AlignmentKerning and kerning pairs| 00:00 | In my first calligraphy class, I studied
the work of Edward Johnston who is called the
| | 00:05 | father of modern calligraphy.
| | 00:08 | He said something that I still remember, and
this is the perfect time to share it with you.
| | 00:13 | The task before us is simple to make
beautiful letters and to arrange them well.
| | 00:19 | Now both parts of that statement
are important to any good design.
| | 00:23 | Unless you're a type designer, you don't have
to worry about the first part, making beautiful
| | 00:27 | letters, but as a designer you do
have to arrange the letters well.
| | 00:32 | That's where spacing comes in.
| | 00:34 | Kerning is the adjustment of the
spaces between two specific letters.
| | 00:39 | It's different from tracking, which is the
adjustment of the spaces between a group of letters.
| | 00:45 | The goal of kerning is to create a consistent rhythm
of space between characters which helps readability.
| | 00:53 | At text sizes, you don't have to adjust the kerning
because the type designer has already done that for you.
| | 00:59 | There are thousands of carefully calculated
spaces between every possible letter combination
| | 01:04 | already built into a typeface by its creator.
These are called kerning pairs.
| | 01:09 | But at larger sizes, those kerning pairs
don't work as well so the spaces between letters
| | 01:15 | at display sizes often need manual kerning.
| | 01:19 | These are tiny, but critical adjustments,
and there are no mathematical formulas.
| | 01:23 | To create a consistent rhythm of space and
the appearance of equal spaces between letters,
| | 01:29 | here are some general guidelines for kerning.
| | 01:32 | The narrowest space will be between two
round-sided letters because the space curves away at the
| | 01:39 | top and bottom, creating the
appearance of more space between the letters.
| | 01:44 | The next widest space will be
between a straight side and around side.
| | 01:49 | The space around the O curves
away, but the straight side doesn't.
| | 01:55 | And the next widest space will be
between two straight sided letters.
| | 02:00 | There are also letters that have open
sides and some that have diagonal sides.
| | 02:05 | Again, the idea is to create the
appearance of even spacing between letters.
| | 02:11 | Imagine that the spaces between
letters are containers of water.
| | 02:15 | You want every space between two letters to
look as if it holds the same amount of water.
| | 02:21 | Here are some common examples of letter
combinations that will often need kerning at larger sizes.
| | 02:28 | Open-sided letters or diagonal letters
have a kind of invisible extra space within or
| | 02:33 | around them and kerning
compensates for that extra space.
| | 02:39 | Your goal is to adjust the spaces
between the letters to make them appear even.
| | 02:45 | Kerning letters with serifs is a bit trickier
because the serifs won't let us get the letters
| | 02:50 | as close together as sans serif. Here's one example.
Every set of letters is different.
| | 02:58 | To judge where to add or subtract space,
you have to look at the whole headline or set
| | 03:03 | of letters and see what is the most
difficult pairing and then work around that.
| | 03:08 | By kerning our letters, we want the eye to see them
as evenly spaced in a way that is optically correct.
| | 03:15 | It's about creating what looks right, not
necessarily what's mechanically correct.
| | 03:20 | These are small, but critical adjustments.
| | 03:23 | The task of arranging beautiful letters isn't
always simple, but with these basic guidelines
| | 03:28 | and some practice, you'll be on
your way to beautifully kerned type.
| | 03:33 |
| | Collapse this transcript |
| Tracking and leading| 00:00 | If kerning is the manual adjustment of
spacing between two specific letters, how does it
| | 00:05 | relate to tracking and leading?
| | 00:08 | Tracking is an overall adjustment of space
applied equally to a word, a line, or a passage of text.
| | 00:16 | Leading is the space between lines
measured from the baseline to baseline.
| | 00:21 | Tracking and leading can both affect the
overall typographic color or tonal weight of the page
| | 00:27 | and its legibility.
First, let's look at tracking.
| | 00:32 | Tracking can have a dramatic effect on the number of
characters per line and the legibility of the text.
| | 00:38 | We only want to make minimal adjustments in
order to improve the appearance of the text.
| | 00:43 | It's like the story of Goldilocks who tasted
the porridge in the home of the three bears.
| | 00:47 | The first bowl of porridge was too hot.
The second bowl of porridge was too cold.
| | 00:53 | The third bowl of porridge was just right.
| | 00:55 | Why am I my telling you this fairytale,
because we want to see spacing that is just right.
| | 01:03 | If we add too much space to a paragraph or a line
of text, it will look loose and be hard to read.
| | 01:09 | If we take away too much space, it will
look too tight and also be hard to read.
| | 01:15 | Another reason to use tracking is to
avoid those unsightly widows and orphans.
| | 01:20 | A widow is a word or a part of a word
hanging out at the end of a paragraph.
| | 01:26 | It's undesirable, because it harms the
overall color of the page of text by creating gaps
| | 01:31 | of space between the paragraphs.
| | 01:34 | By slightly decreasing the tracking of the
paragraph, we can pull those widows up into
| | 01:39 | the text to make a more attractive arrangement,
or we might increase the tracking slightly
| | 01:45 | to push the text into
filling of that empty line space.
| | 01:49 | Now you can see that the continuous color and
typographic texture of the page looks better.
| | 01:55 | An orphan is a word or a part
of a word at the top of a column.
| | 01:59 | This is even more undesirable because it
interrupts the horizontal alignment of the column tops.
| | 02:06 | We can use tracking to fix this situation.
| | 02:10 | Tracking might also be used to fix gappy word
spacing or to fit type into a specific area,
| | 02:15 | but remember Goldilocks, we don't want
leading that looks too tight or too loose, it needs
| | 02:20 | to look just right. Let's talk about leading.
Leading is a counterpart to tracking.
| | 02:27 | It's the space between lines, and it's
measured in points from baseline to baseline.
| | 02:34 | Leading is a term carried over
from the earliest days of metal type.
| | 02:37 | The space between lines was adjusted by inserting a
thin strips of led to increase the space between lines.
| | 02:45 | For easy reading, leading is normally
two points greater than the type size.
| | 02:50 | That allows a comfortable space between
lines so that the Descenders and Ascenders won't
| | 02:56 | bump up against one another.
| | 02:58 | If you have lines that are long, you will
want to increase the leading to allow the
| | 03:02 | eye to find its way back to
the beginnings of the lines.
| | 03:06 | Also if you have a type style that has a
strong vertical stroke like Bodoni, you will want
| | 03:12 | to increase the leading a bit to compensate.
| | 03:15 | This way the eye can distinguish the
horizontal flow of the line more easily.
| | 03:20 | As with other factors that we've discussed,
tracking and leading are also relative.
| | 03:25 | They exist in relation to the type style,
the length of the line, and size of the type.
| | 03:30 | Different factors can change the mix.
| | 03:33 | That's why it's important to develop your
typographic eye and remember the theory of
| | 03:37 | typographic relativity because everything
exists in relation to everything else, and
| | 03:43 | we want to create a harmonious
whole when we design with type.
| | 03:48 |
| | Collapse this transcript |
| Exploring variations in type alignment| 00:00 | The next step in arranging
letters well is the alignment of type.
| | 00:05 | There are five possible kinds of alignment,
Flush left, Flush right, Justified, Centered,
| | 00:12 | and Random, also known as asymmetrical.
| | 00:16 | These are few more terms
to add your type vocabulary.
| | 00:20 | When lines of type are aligned on
the left, we say it is flush left.
| | 00:24 | Notice that the words are uneven or
ragged on the right that is rag right.
| | 00:30 | This is a common form of typesetting
because we read from left to right and flush left
| | 00:35 | type allows us to find our
place on the next line more easily.
| | 00:39 | When lines of type are aligned on the right, we
call that flush right and uneven on the left, rag left.
| | 00:46 | Flush right is not good for lengthy reading
because the eye will have a hard time finding
| | 00:50 | the next line on the left on the
left when the lines are uneven.
| | 00:54 | When lines of type are aligned both on the
left and the right, it's called justified type.
| | 01:00 | Because all of the lines are the same length and the margins
are even, this creates a quiet, balanced, formal look.
| | 01:09 | Most books, magazines and newspapers
are set with justified columns of type.
| | 01:15 | Justified lines are created
by varying the word spacing.
| | 01:19 | The most common problem that you need to watch
out for with justified type is gappy word spacing.
| | 01:25 | Sometimes you will see rivers of space
in a passage of text. This is not good.
| | 01:31 | It usually happens if the lines are too short,
and there aren't enough places to add space.
| | 01:36 | In some cases, this can be
fixed by adjusting the tracking.
| | 01:41 | There are two other kinds of
alignment, centered and asymmetrical.
| | 01:46 | You might see centered alignment on an
invitation, for example, but it should not be used for
| | 01:51 | lengthy reading, for the same reason as
flush right text, the eye has to find its place
| | 01:56 | on the next line, and it is harder when the
next line starts in a different place each time.
| | 02:03 | One last type of alignment
is random or asymmetrical.
| | 02:07 | Random arrangements can be visually exciting,
but again are not good for lengthy reading.
| | 02:12 | Type can be set in curves,
patterns or shapes for dramatic effect.
| | 02:16 | Here's a great example of a book
cover that uses random alignment.
| | 02:21 | This headline creates a
sense of energy and drama.
| | 02:24 | The subhead is flush left, rag right
and the text in each balloon is centered.
| | 02:30 | It's fun and inviting and
makes me want to read this book.
| | 02:34 | You can mix alignments.
| | 02:36 | Let's look at a couple of good examples which
demonstrate how mixed alignments can work well together.
| | 02:42 | In this poster, we see
flush left type at the top.
| | 02:46 | The title, The CHERRY
ORCHARD is centered on the image.
| | 02:50 | There is also a quote
that is set in centered type.
| | 02:54 | There is justified type under the logo PS 21
and the remainder of the type is all aligned
| | 03:00 | flush left to the right of the logo.
| | 03:03 | The mixing of alignments creates a
dynamic tension and yet it looks organized.
| | 03:08 | The two main columns at the
left in this example are justified.
| | 03:13 | The blue display text in
the center is flush right.
| | 03:18 | Text at the very bottom is flush left
and the text in the far right is centered.
| | 03:24 | Everything is separate and balanced and
every piece of text is completely legible.
| | 03:29 | Also note the beautiful
typographic color in the body copy.
| | 03:33 | Those are the five types of alignment and some
guidelines for when you should consider using them.
| | 03:38 | Most of the time you will find that you
will be setting your type for everyday reading,
| | 03:42 | and that means flush left or justified settings.
| | 03:46 | Selecting the proper alignment or mix of
alignments will help your reader navigate and can add
| | 03:51 | a dynamic quality to your layouts.
| | 03:56 |
| | Collapse this transcript |
| Hyphenation and justification| 00:00 | Justified lines, which are aligned on both
the left and the right, are created by varying
| | 00:05 | the word spacing in each line.
| | 00:08 | This is controlled by hyphenation and
justification settings, which are called H and Js for short.
| | 00:15 | Hyphenation settings in design programs, such
as InDesign and Illustrator control how many
| | 00:20 | letters occur before or after a hyphen.
| | 00:24 | Hyphens help regulate word
spacing by allowing for word breaks.
| | 00:27 | I'll talk about the principles and the desired results
of good word spacing, so you'll know what to look for.
| | 00:35 | Good word spacing is like good letter spacing. It should be invisible.
That means if you notice it, there's a problem.
| | 00:43 | Since we read groups of words at a time,
we need just enough space to separate words.
| | 00:48 | Too much word spacing breaks a line of type into
separate words, too little and the words run together.
| | 00:56 | You should have a minimum of six words per
line in order to avoid gappy word spacing.
| | 01:01 | Here's a real-life example of what happens
when you try to force the lines to justify.
| | 01:07 | When the lines are too short, and there aren't
enough places to add space, you will see rivers
| | 01:13 | of space in a passage of text.
| | 01:15 | This disrupts the rhythm of the horizontal
lines of text and creates unsightly gaps.
| | 01:21 | My teacher used to point this out by saying
you could drive a truck through those spaces.
| | 01:26 | If your column of text is narrow,
consider setting your text flush left.
| | 01:32 | If you are setting your type flush left, you
still need to pay attention to the shape that
| | 01:35 | is being created by the word
breaks at the end of each line.
| | 01:39 | Sometimes awkward shapes can appear and a
little bit of tracking or a strategic turning
| | 01:44 | of the word onto the next line will
improve the look of the ragged right edge.
| | 01:49 | What you should be trying to achieve with
the rag is an evenly balanced irregularity.
| | 01:55 | That may sound like a contradiction
in terms, but here are some examples.
| | 01:59 | You should try to avoid hyphens
in flush left, rag right text.
| | 02:03 | Here's a nicely balanced rag
under the headline just the numbers.
| | 02:08 | In these three columns of flush left, rag
right text, we see an even easy flowing shape
| | 02:15 | of the rag, a balance of lines of different lengths,
nothing stands out or calls attention to itself.
| | 02:22 | Keep in mind that every element whether space
around a form or form itself should be in balance.
| | 02:29 | Qualities and elements exist
in relation to one another.
| | 02:33 | Letter spacing and word
spacing should be in balance.
| | 02:37 | The shapes of the letters should be in
balance with the shapes between the letters.
| | 02:42 | These timeless and immutable principles of
balance, rhythm, and harmony are the same principles
| | 02:48 | that govern good design in any field, architecture, fashion,
music, sculpture, painting, or the arrangement of a meal.
| | 02:58 | These principles are in the related shapes of
the letterforms in any beautiful piece of
| | 03:02 | calligraphy or beautifully designed typeface.
| | 03:06 | Everything you need to know about balance, rhythm, and
harmony are right there in the letters themselves.
| | 03:16 |
| | Collapse this transcript |
| Indents, outdents, and hanging punctuation| 00:00 | In this movie, we are going to talk
about a few little things that mean a lot.
| | 00:05 | We'll talk about ways to indicate the beginnings of
paragraphs, and when and why to use hanging punctuation.
| | 00:11 | Oh, and I'll tell you what hanging punctuation is.
We'll start with indents.
| | 00:16 | One of the most basic little cues that
readers depend upon are the indicators that tell us
| | 00:21 | we are about to start a new paragraph.
| | 00:23 | The reader must be able to clearly distinguish
where one paragraph ends and the next begins.
| | 00:29 | The most common graphics signal is the indent.
| | 00:33 | The width of the indent should be enough to
be easily visible based on the line length.
| | 00:38 | One pica is a good starting point.
| | 00:41 | Another way to indicate
paragraphs is the out dent.
| | 00:44 | These will need a wider left-hand margin, so the
out dents are not too close to the edge of the page.
| | 00:51 | If space permits, you may also indicate paragraphs by
skipping a line space or a half line space between paragraphs.
| | 00:58 | An unusual and more dramatic
method is a very wide indent.
| | 01:02 | Here is an example. This works
best with very wide columns of text.
| | 01:08 | Another possibility is to run all the text
together as a solid block and to indicate
| | 01:13 | paragraphs using a typographic device such as a
square block or a decorative character like this one.
| | 01:20 | Some punctuation marks
need special attention too.
| | 01:23 | In a justified column of text, when these
marks are at the beginning or end of a line,
| | 01:28 | the smaller bits of punctuation should
extend beyond the edge of the text block.
| | 01:33 | These are quote marks and
apostrophes, hyphens, commas and periods.
| | 01:39 | This helps keep the optical alignment of the
justified column intact, avoiding an optical
| | 01:44 | indentation or gap.
We call this hanging punctuation.
| | 01:49 | Larger punctuation marks like question marks,
exclamation points, colons, and
| | 01:54 | semicolons, parentheses, and brackets,
take up about the same space as a letter,
| | 02:00 | so they don't need to extend
beyond the edge of the justified text.
| | 02:05 | Paying attention to these seemingly small
details will improve the appearance of your text.
| | 02:10 | This is what professionals do and properly
indicating paragraphs will help the reader along.
| | 02:16 | These small steps will contribute to reading
ease and comfort, an important goal for every
| | 02:22 | designer who wants to use typography well.
| | 02:27 |
| | Collapse this transcript |
| Other typographic best practices| 00:00 | As a professor and critic of typographic
design, I see a lot of the same mistakes made over
| | 00:06 | and over again by beginners.
| | 00:08 | I'd like to point them out and suggest some
alternatives to make your type usage more professional.
| | 00:14 | In some programs and with some older type
file formats, it's possible to artificially
| | 00:19 | create a bold or italic version of a font.
| | 00:22 | It may seem like it saves time, but you will
only get the correct italic or bold designed
| | 00:28 | for the typeface by
selecting them from the Font menu.
| | 00:32 | Remember to use Smart Quotes.
| | 00:35 | Dumb Quotes, also called prime marks,
may be used to indicate feet and inches, but for
| | 00:41 | quotes and apostrophes be sure to use
Smart Quotes, also known as curly quotes.
| | 00:47 | I also see a lot of small type which is outlined
by adding a stroke, but letter forms are distorted
| | 00:53 | when a stroke is added.
| | 00:55 | The stroke overlaps the shape of the
type on both sides of its defined edges.
| | 01:01 | It changes the outer shape of the type
and the counter spaces get tight or fill-in.
| | 01:06 | It's okay to use large type with a thin stroke.
| | 01:09 | This doesn't cause much of a problem because
the proportion of the stroke is so tiny compared
| | 01:14 | to the letter, but otherwise
don't add strokes to small type.
| | 01:20 | Here are some examples of what not to do.
| | 01:22 | I took these pictures in my travels,
but I'm not going to say where.
| | 01:27 | On this menu board, by adding strokes to
these letters, they are much harder to read.
| | 01:32 | Although I'm sure that was not the intent.
Another word to the wise, avoid stacking type.
| | 01:39 | The irregular widths of these letters
create a rough edge on both sides of the type.
| | 01:45 | The irregular spaces make it harder to read
and our eye has to jump from one letter to
| | 01:50 | the next, because we read from
left to right not top to bottom.
| | 01:55 | In this example, the longer the text, the worse
the effect and stacked lowercase is the worst of all.
| | 02:03 | Look how lonely that poor little
I is in its narrow little space.
| | 02:07 | With stacked upper and lower case, you
can't create even spacing because of the varying
| | 02:12 | heights of the ascenders, descenders, and caps.
| | 02:16 | Instead, look at this
example from Kids Discover.
| | 02:20 | In the headline charging particles,
the type is oriented sideways.
| | 02:25 | So there is a perfectly
aligned baseline and cap height.
| | 02:29 | If you have acronyms in your text, a good
practice is to reduce them by a point or a
| | 02:34 | point and a half, so they do not
visually jump out of your text.
| | 02:39 | Even better, use the font's
small caps, if it has a set.
| | 02:44 | The goal is to keep an even color
within your text which aids readability.
| | 02:49 | The same goes for numbers.
| | 02:51 | Use the set with varying heights or reduce
the numbers exactly the same amount as the caps.
| | 02:58 | Adding a bit of extra space
between caps improves their appearance.
| | 03:02 | Spacing out lowercase letters is not advisable.
| | 03:06 | So to recap, use the proper bold
and italic versions of your fonts.
| | 03:10 | Don't add strokes to small type.
| | 03:12 | Use Smart Quotes, not Dumb Quotes
and avoid stacking type vertically.
| | 03:17 | Do downsize acronyms and numbers
to blend with the surrounding type.
| | 03:22 | Give extra space to caps, but not lowercase.
| | 03:26 | These are some of the practices that
will help you on your way to good type usage.
| | 03:31 |
| | Collapse this transcript |
|
|
4. Touching on Type DesignWhere type begins: The mark of the hand| 00:00 | This course is about typography, and if you
really want to understand typography you have
| | 00:06 | to look back to where it began, the human hand.
| | 00:09 | Our alphabetic forms
originated with handmade marks.
| | 00:13 | History tells us that
drawing came before writing.
| | 00:16 | So first there were pictures
and pictures became pictograms.
| | 00:20 | We have evidence of them, etched in bone,
drawing with soot on cave walls and carved into clay.
| | 00:27 | But pictographs were limited in their
ability to tell a story, so ideographs evolved.
| | 00:33 | Ideographs showed actions and ideas.
| | 00:36 | Eventually ideographs were associated with
certain sounds and their forms evolved into
| | 00:41 | the precursors of letterforms.
| | 00:44 | The letterforms were combined
into what we now know as words.
| | 00:48 | All of these alphabetic
systems were handwritten.
| | 00:52 | Today if we look hard enough at a typeface, it
is easy to imagine the mark of the hand behind it.
| | 00:58 | For hundreds of years before pieces of type
became physical objects, every letterform
| | 01:03 | was laboriously written stroke by stroke by
hand on papyrus, on parchment, or on paper.
| | 01:11 | It's interesting that hand-lettering
is currently enjoying great popularity.
| | 01:16 | Actual hand lettering or calligraphy and
type that has been designed to look hand-drawn
| | 01:20 | has never been more popular.
| | 01:22 | Perhaps it is a reaction to the computerization
and mechanization of forms, but you can see
| | 01:28 | it everywhere, on book jackets, packaging, advertising
campaigns, it seems to permeate our visual culture.
| | 01:36 | So it seems fitting that drawing
is still at the core of type design.
| | 01:40 | Every type designer still
starts the same way with sketches.
| | 01:45 | Here are some examples of the sketches of
typefaces in their early stages done at Cooper
| | 01:50 | Union's Type Design postgraduate program.
| | 01:53 | Students are using a variety of tools from
pencils to ink, to markers to get their ideas
| | 01:59 | down on paper before they take
them into a digital environment.
| | 02:03 | This is the beginning of a lengthy process
that we'll talk more about later in this chapter.
| | 02:09 | Whether you want to design a typeface from
scratch or are simply happy to know that a
| | 02:13 | couple hundred thousand typefaces are available
for your projects, it's important to understand
| | 02:19 | what goes into a type design.
| | 02:21 | It helps you see the underlying structure of the letterforms
and how they are all interrelated and interconnected.
| | 02:31 |
| | Collapse this transcript |
| Related parts and shapes: Family resemblances| 00:00 | In this movie, we are going to focus in on
letterforms by getting out our magnifying glasses.
| | 00:05 | We are going to look at important
details that make a typeface what it is.
| | 00:10 | These are the characteristics that
type designers use to shape their designs.
| | 00:15 | Even if you aren't planning to design a
typeface, you can still be a good type detective and
| | 00:20 | find out more about letters by looking at
the ways in which their parts are related.
| | 00:26 | The shapes of letters within a
particular typeface are far from random.
| | 00:30 | In fact, you can actually look at just a few letters
and imagine pretty much what the rest will look like.
| | 00:36 | That's because all of the letters have underlying
design characteristics which come from a common
| | 00:42 | set of proportions and styling details.
| | 00:46 | Within the 26 capital letters, you can see that
there are little groupings based on similar letter shapes.
| | 00:52 | The curve letter parts are
based on the curve of the O.
| | 00:56 | Straight sided letters are based on the N.
The diagonal sided letters are based on the A.
| | 01:03 | All of the letters with upper and lower
parts also have a relationship to the S.
| | 01:08 | There are other interrelationships.
The E and the F are closely related.
| | 01:13 | The crossbar of the F is slightly lower because it
doesn't have a bottom leg and its middle crossbar is shorter.
| | 01:20 | There are visual links between these other
pairs of letters as well as slight differences.
| | 01:25 | The two widest are M and W, which
are both doubles based on a double V.
| | 01:31 | You might not think of the S and Z as being
related, but they have similar proportions.
| | 01:37 | Now let's look at the S, Z, and B.
| | 01:40 | While they appear to have upper and lower
parts that are equal, if you turn them upside
| | 01:45 | down, you can see that in fact the
lower parts have more space in them.
| | 01:51 | They are optically equal,
not mechanically equal.
| | 01:54 | In letter design as in all design, what's
important is what the eye perceives and not what is real.
| | 02:01 | Within the grouping of R, B, and P, you can see
that the sizes of the bowl are not the same.
| | 02:07 | They are based on optical balance because
the B and R are double-decker letters with
| | 02:13 | an upper and lower part.
Their bowls are smaller.
| | 02:17 | The bowl of the P is the largest because it
does not have a leg or lower bowl, so optically
| | 02:23 | that space needs to be more filled in.
| | 02:26 | Within the 26 small letters, you can also
see different groupings based on similarities.
| | 02:33 | The round letters are still based on the O,
straight sided letters on the N, width based
| | 02:38 | on the N and the diagonal letters are
grouped together because of their related shapes.
| | 02:43 | Again, the S is based on the S and the
proportions of the double-decker letters are based on the S.
| | 02:51 | Here are some other related pairs.
Again, M and W are the widest.
| | 02:56 | The W is also related to the V
because it is essentially a double V.
| | 03:00 | The R is a truncated N and the E
is essentially an o with a crossbar.
| | 03:07 | In the stems of the letters, you can see that
every vertical stroke has the same thickness,
| | 03:12 | also called stroke-width, and you can see
that the cap height of every letter is the same.
| | 03:19 | The exceptions are the curved letters.
| | 03:21 | Curves need to extend very slightly top and bottom so that
they appear the same height as the other letters.
| | 03:28 | If they were exactly the same height, they
would actually appear to be shorter and the
| | 03:33 | X-height of all the lowercase letters is
the same and the heights of all the ascenders
| | 03:37 | is the same and the
descenders are also the same.
| | 03:42 | Here are other kinds of relationships.
| | 03:44 | The apex of the N, A, and M will be the
same, ditto for the bottoms of the V and W.
| | 03:53 | And then there are the terminal
strokes or N strokes of the letters.
| | 03:57 | The ending strokes follow the
same angle in related letters.
| | 04:02 | Within a serif typeface, one of the most
significant similarities will be the shapes of the serifs.
| | 04:07 | Whether they're sharp or rounded, thick or
thin, wide or narrow, they will all match.
| | 04:13 | The art of type design rests on these principles
of commonality, of similar shapes and groupings
| | 04:18 | of characters with shared design details.
| | 04:22 | As you can see, there's a lot
that goes into designing a typeface.
| | 04:26 | In next movie, we'll take a look at how a
type designer gets started and follow through
| | 04:30 | the basic steps 'til the
final typeface is ready to be used.
| | 04:35 |
| | Collapse this transcript |
| Designing a typeface| 00:00 | It takes a combination of vision and dedication
and plenty of serious hard work to conceptualize,
| | 00:07 | develop, and finalize a font.
| | 00:09 | My good friend Donald Partyka agreed to let me
show the steps in his recent type design Benda.
| | 00:16 | Let's take a look at the steps
along the way to the finished typeface.
| | 00:20 | Every typeface begins with an idea.
| | 00:23 | Donald was inspired by two sources of unpublished alphabets
designed by the influential Czech designer Jaroslav Benda.
| | 00:32 | Donald was attracted to the unusual letterforms
and the variation between the upper and lower case.
| | 00:37 | His goal was to create a font that was
modular and systematic, while still respecting the
| | 00:42 | source and keeping the
personality of the letterforms.
| | 00:46 | Type designers start out the
way most artists do by sketching.
| | 00:50 | There can be several stages of sketching where the rough
sketches of letters are refined into tight sketches.
| | 00:56 | Here are some of Donald's initial
sketches for the typeface Benda.
| | 01:00 | He worked both with pencil
and a broad-edged pen and ink.
| | 01:05 | The Roman, Bold, and Italic versions of
the font begin to evolve in sketch form.
| | 01:13 | From sketch form, letters are
refined with a tighter rendering.
| | 01:18 | By figuring out how to combine the various
shapes, round, straight, and diagonal, the
| | 01:23 | designer can move on to design the rest of
the letters, testing along the way to make
| | 01:27 | sure the weights and other
design characteristics are in balance.
| | 01:32 | Using a program called Fontlab, type designers
import their characters and can fine-tune them.
| | 01:38 | In Fontlab, they can handle many other complex
tasks, such as encoding, hinting, and kerning pairs.
| | 01:45 | Type designers begin using their fonts to
set words and sentences as soon as enough
| | 01:50 | characters have been resolved.
This is helpful at every stage of the process.
| | 01:56 | A typeface is a system and its letters must all work
together equally well, no matter how they are arranged.
| | 02:04 | One of the hardest tasks for a text type designer
is to create smooth consistent color on the page.
| | 02:10 | If you squint, you can see that this
is a beautifully balanced page of text.
| | 02:17 | Here is a full character set of
Benda's Roman or upright text.
| | 02:22 | And here is Donald's type specimen page
designed to show off Benda's qualities.
| | 02:27 | If this inspires you enough to create your
own typeface, I have included some resources
| | 02:33 | in the exercise files for this
course so you can take the next step.
| | 02:37 | There is a lot of fantastic typeface design going
on out there in this new golden age of typography.
| | 02:44 | There are so many gorgeous typefaces for you
to choose from, and the next time you select
| | 02:50 | a font to use in your project, don't take
it for granted, think about all of the hard
| | 02:55 | work and expertise that when into
its creation and treat it with respect.
| | 03:00 |
| | Collapse this transcript |
|
|
5. Legibility and ReadabilityHow legibility and readability differ| 00:00 | A lot of people don't know the
difference between legibility and readability.
| | 00:06 | They are both important, but there
is a difference that you should know.
| | 00:10 | Legibility measures the ability to decipher
something, that is can you look at it and make sense of it?
| | 00:16 | In typographic terms legibility measures how
easy or difficult it is to see the differences
| | 00:22 | between one letter of a typeface and another.
This is a function of the type's design.
| | 00:29 | The most legible typefaces have individual
character shapes which are clearly defined from one another.
| | 00:35 | Also, they usually have large
excites and large counter spaces.
| | 00:41 | In this example, you can see that the serifs make
it easy to see the difference between the Is and the Ls.
| | 00:48 | The serifs provide a little extra detail.
| | 00:52 | Studies have shown that serif typefaces are
more legible than sans serif typefaces because
| | 00:58 | of the details provided by the serifs.
| | 01:01 | This is why you will not see a book
type set in a sans serif typeface.
| | 01:06 | Lengthy reading in a
sans serif would be uncomfortable.
| | 01:10 | If legibility measures the reader's
ability to see the text, readability measures how
| | 01:16 | much the reader wants to read the text.
| | 01:19 | That is based on how the designer
invites the reader into the text.
| | 01:24 | Another way of saying that is how
appealing does the text appear to the reader?
| | 01:29 | For example, a page of text might be perfectly
legible, but might not be appealing to the reader.
| | 01:36 | There are many ways to make
that same text more inviting.
| | 01:40 | We want to create some visual relief,
places where the eye can focus or even rest.
| | 01:46 | Even small gestures can invite the viewer in.
| | 01:50 | A line break or two with
some lead-in caps might help.
| | 01:54 | You could find appropriate
places to insert drop caps.
| | 01:59 | These can be used to create some focal
points, with spaces between the paragraphs.
| | 02:04 | Try looking for interesting sentences that
can be pulled out of the text and made larger.
| | 02:10 | And adding color can add appeal to the reader.
| | 02:14 | These small changes provide
something we call entry points.
| | 02:18 | Entry points are places where a reader can
choose to enter the text and start reading.
| | 02:24 | Magazines do a great job of
providing multiple entry points.
| | 02:29 | Here are some examples.
| | 02:31 | Look at all of the entry
points in this single page.
| | 02:35 | There are about 15 or so different places
that I might choose to dip into the text.
| | 02:40 | Here is another example.
| | 02:42 | It helps readers if you can find a section
of text which can be separated into a mini
| | 02:47 | story that can work on its own.
| | 02:50 | This infographic can be read as a separate yet
related story, and it's visually dynamic on the page.
| | 02:57 | Other entry points are the photo's caption and a break
in the narrative using lead-in text in another color.
| | 03:05 | Maybe your text can be divided into sections
with their own headlines, as in this example.
| | 03:11 | Think about ways that the text can be
broken up into more bite-sized chunks.
| | 03:17 | Adding color into selected type or other
graphic elements, adding some white space,
| | 03:22 | each of these steps adds to the
readability of your project.
| | 03:26 | Even though a lot of people think legibility
and readability are the same, you can see
| | 03:30 | that they are actually quite different.
| | 03:33 | Just to recap, legibility measures whether
the viewer can read the text and readability
| | 03:38 | measures how much the
reader wants to read the text.
| | 03:41 | Understanding this difference will help you focus
on the best ways to improve your viewer's experience.
| | 03:47 |
| | Collapse this transcript |
| Examining factors affecting legibility| 00:00 | Now that we've defined the difference
between legibility and readability, let's look at
| | 00:05 | a number of factors that affect legibility.
| | 00:09 | Legibility measures how well viewers can see
the type, specifically how well they can see
| | 00:14 | the differences between
the shapes of the letters.
| | 00:17 | I want to show you important
factors which can influence legibility.
| | 00:22 | An effort to improve legibility is the reason
why highway typography is undergoing a redesign.
| | 00:28 | A new typeface for highway signs
is being rolled out nationwide.
| | 00:33 | On the left, you see the current
signage known as Highway Gothic.
| | 00:37 | On the right, you see the
new typeface, Clearview.
| | 00:41 | Let's compare individual letters.
| | 00:43 | Remember that a tall X-height and
open counterspaces increase legibility.
| | 00:49 | Look at the O in Hellertown and see how much
more space is inside on the Clearview example.
| | 00:55 | Look at the E, see how much
more open counterspaces are.
| | 01:00 | Notice the little feet on the bottoms of the
Ls, helping the I to distinguish them as Ls.
| | 01:06 | These and other factors make the new signage
visible at a greater distance, more clearly
| | 01:11 | visible at night, and in poor
weather conditions at high speeds.
| | 01:15 | This is legibility at its most critical.
| | 01:19 | A lot of studies have been done that measure the
ease and speed of reading longer passages of text.
| | 01:25 | They've shown that serif type is slightly
easier to read because of the horizontal serifs
| | 01:30 | which lead the eye forward.
| | 01:32 | Also, serifs provide details which help the
eye differentiate between similar letters,
| | 01:38 | for example, the
difference between an L and an I.
| | 01:42 | For lengthy reading the design of
the type style is important too.
| | 01:47 | Look at all of these examples, in each one
you can see that there is a large X-height
| | 01:52 | and open counterspaces and the
letters have a medium weight on the page.
| | 01:57 | These key factors allow for ease
of reading through high legibility.
| | 02:01 | If a type style is heavy or has tight
counterspaces, it makes it harder to read at length.
| | 02:08 | Similarly if a type weight is too light on
the page, the eye must work harder to read it.
| | 02:14 | Smooth and easy reading is
always the goal for text type.
| | 02:19 | Another factor affecting legibility is
the leading or the space between the lines.
| | 02:24 | Text type should have enough space between lines so
that the letters aren't touching, plus a bit more.
| | 02:31 | If the spaces between lines are too large,
the eye has to work too hard to jump from
| | 02:36 | one line to the next.
Another legibility factor is the line length.
| | 02:41 | If there are too many words per line, the
eye has a long way to travel back in order
| | 02:46 | to find the beginning of the next line.
| | 02:49 | Too few words and the eye has to
switch lines frequently, which is tiring.
| | 02:53 | A good rule of thumb is 52
to 70 characters per line.
| | 02:59 | Another rule of thumb is that the number of
characters per line is two and a half times
| | 03:04 | the width of the line in picas.
| | 03:07 | The size of the type is a
factor in legibility too.
| | 03:10 | Good sizes for text type generally range between
8 to 10 point or occasionally 12 point, depending
| | 03:17 | on the typeface, the
intended audience, and the content.
| | 03:21 | For example, children need a larger point
size if they're learning to read and so might
| | 03:26 | older adults who may have impaired vision.
| | 03:30 | There are a couple of other things
I want to mention about legibility.
| | 03:34 | If you're working on a web project, screen
type tends to have a bit of a halo around
| | 03:38 | the letters making them
just a bit harder to read.
| | 03:42 | You might need to increase the tracking
and leading slightly to counteract the effect
| | 03:47 | of the light emanating from the screen.
| | 03:51 | One last very important point about
legibility, high contrast makes for easy reading.
| | 03:58 | Lightening or colorizing the text, or
darkening or colorizing the background will make it
| | 04:03 | harder to see the letterforms.
| | 04:05 | Any texture or image behind the
type will also impair its legibility.
| | 04:11 | Studies have shown that readers experience
a slightly disturbing sparkle effect when
| | 04:16 | white type or light type is
on a black or dark background.
| | 04:20 | That is why it's not ideal for extended reading.
| | 04:24 | Black letters on a white background have the
most contrast and are therefore the very best
| | 04:29 | for high legibility and ease of lengthy reading.
| | 04:34 | Keep these factors in mind when
you're designing with the type.
| | 04:37 | Your goal is to make the journey of reading
as easy on the eye as possible so that reading
| | 04:42 | is carried out with a minimum of effort.
| | 04:47 |
| | Collapse this transcript |
| Hierarchy and functionality| 00:00 | We're surrounded by type all of the time, so
how does type stand out in a busy environment?
| | 00:07 | Specifically, how does
typographic hierarchy work?
| | 00:11 | Hierarchy is the way type is organized in order
to indicate levels of importance to the viewer.
| | 00:18 | Within the world of packaging, there
are two different kinds of hierarchy.
| | 00:22 | One is how well does the entire package
separate itself from the other packaging all around
| | 00:27 | it and how does it project
its individual personality?
| | 00:30 | The second level of hierarchy is within each
package are there clear levels of typographic
| | 00:37 | hierarchy indicated by size, weight,
color, orientation, and adjacency.
| | 00:44 | Those graphic techniques
are the designer's tools.
| | 00:48 | Kettle Chips try to distinguish
themselves as healthier chips.
| | 00:52 | The roughness of the typography
suggests that the chips are less processed.
| | 00:57 | The logo stands out because of its size,
its prominent position at the top, and because
| | 01:02 | of the big swoosh of the K
over the T creates action.
| | 01:06 | The logo's irregular base line and woody
texture suggests that the chips are organic.
| | 01:13 | Popchips on the other hand
have a slick fun modern look.
| | 01:17 | The Os of the logo are
popping out just like the name.
| | 01:20 | The I is implied by the space between the H and
the P and by the big dot over the imaginary I.
| | 01:27 | the word pop is bigger, it's literally popping.
| | 01:31 | It's a modern minimalist approach to a
chip, distinctly different in this category.
| | 01:37 | The typographic hierarchy on the package is
clear based on the size of the secondary pieces
| | 01:42 | of text, all natural, the variety of
popchips, and the description is all the way at the
| | 01:47 | bottom which are smaller
and therefore less important.
| | 01:52 | Here is a good example of two companies
selling the same product in entirely different ways.
| | 01:57 | Tire Tread Licorice takes a
typographically aggressive approach.
| | 02:01 | The name of the product, the type style of
the product, and the actual product all send
| | 02:07 | the same strong message.
| | 02:09 | On the other hand, Newman's Own Licorice
takes a calm approach, using traditional elements
| | 02:15 | and an old-fashioned type style.
The hierarchy is created by size.
| | 02:19 | The word licorice is the most important, then
the image, then the other descriptive information,
| | 02:25 | Lack Licorice, Twists, Made With Organic Sugar.
| | 02:31 | I love looking at wine labels because there is
so much typographic diversity and personality.
| | 02:37 | These labels are both striking and
memorable but for different reasons.
| | 02:41 | The rojo mojo label uses a
minimalist geometric sans serif.
| | 02:45 | Note that the R and the
M don't even have a stem.
| | 02:49 | The designer looked at the name and
envisioned fuller Os connected by the J.
| | 02:55 | The SHIRAZ and the black text here
below the name are obviously secondary.
| | 03:00 | It's a type and inevitable construction.
| | 03:03 | It's all about the type, it stands out
because of its simplicity and strong contrast.
| | 03:10 | On the other hand, this is memorable because
of the overlay of the brush written T on a
| | 03:14 | very formal Roman T and the sideways
orientation of the rest of the label.
| | 03:21 | It's asymmetrically aligned.
Bodega and Tamari are flush left.
| | 03:26 | Rerserva is centered and the slash of the
malbec line aligns with the serif of the big red T.
| | 03:33 | Other type is tucked into
the footer serif of the T.
| | 03:36 | It's dynamic, it's mixing
several typefaces beautifully.
| | 03:41 | With the cropped off letters you feel as if
there is action beyond the edges of the label.
| | 03:46 | They're both graphically strong, but
completely different from one another.
| | 03:50 | All of these packages in their own way strive
to stand out from the competition and to define
| | 03:55 | themselves by appealing to a different
demographic through their use of typography and design.
| | 04:01 | To recap, hierarchy is the
visual organization of text.
| | 04:06 | Employ techniques to make your design stand out.
| | 04:09 | show the viewer what to read
first, second third, and so on.
| | 04:14 | Creating hierarchy is simple.
| | 04:16 | Size and weight matter most, color and
contrast and position in the composition matter too.
| | 04:23 | Creating visual prominence and setting
priorities for the viewer is something you can do.
| | 04:28 |
| | Collapse this transcript |
| Systematized hierarchy| 00:00 | Just like any system, typographic hierarchy
can guide the viewer to make navigation easier,
| | 00:06 | whether on screen, on the printed
page, or in the physical environment.
| | 00:12 | Systematized hierarchy provides a predictable structure
based on grid, typographic usage, and of course imagery.
| | 00:20 | The Cooper Union, a College for art,
architecture, and engineering in New York City has a website
| | 00:25 | that provides just such a structure.
| | 00:29 | There are many consistent elements which
provide a sense of place that is unchanging.
| | 00:35 | First and foremost, the logo remains in its
place no matter where the viewer navigates.
| | 00:40 | The top navigation bar, including the
search bar is the first level of navigation.
| | 00:46 | The secondary nav bar starting with
ACADEMICS provides another means of navigation.
| | 00:52 | And the panel on the left under the logo
provides yet another means of accessing information.
| | 01:00 | Throughout it all the center panel stays in
position and the typography and imagery are
| | 01:04 | fixed within that center panel.
| | 01:07 | In that panel, headlines are always the same size,
the same font, the same color, the same weight.
| | 01:13 | The scale of the typography is
consistent throughout the site.
| | 01:17 | You're in a predictable structure, always
anchored by the logo, the dominant element.
| | 01:23 | If you scroll to the bottom of the site there is visual
relief in the form of a charming animated infographic.
| | 01:31 | And at the very bottom there is another
opportunity to navigate using the links in the site map.
| | 01:37 | Traveling throughout this site, you never
feel displaced, you never feel uncomfortable,
| | 01:42 | you always know where you are.
| | 01:45 | The main tourist attraction in Rockefeller
Center is Top of the Rock, which provides
| | 01:50 | 360 degree views of New York City from the
observation deck of its tallest building.
| | 01:56 | The graphic identity of this landmark also
represents strong and elegant systematized hierarchy.
| | 02:03 | The typography in its logo forms a
square, which says TOP OF THE ROCK.
| | 02:08 | The four panel photo grid structure is
based on the concept that no matter whether you
| | 02:14 | look east, west, north, or south, at any time of day
and any season of the year, the view is spectacular.
| | 02:22 | In this busy tourist destination the design
for TOP OF THE ROCK has a strong presence.
| | 02:28 | The catchphrase or tagline, ANY POINT OF
VIEW is a wonderful typographic pun, because NY
| | 02:35 | is part of the word ANY, so you have any point
of view, and it's also a New York point of view.
| | 02:43 | That tagline works in multiple settings, it's
expressed in three stacked lines on vertical banners.
| | 02:49 | The same tagline is expressed across the
entire side of a bus, in two centered lines in this
| | 02:56 | city guide, and a single
line in this full-page ad.
| | 03:01 | In each of these examples, the four
vertical images are all New York points of view.
| | 03:07 | Although each photograph is different, sunset,
dawn, midnight, different seasons, everything
| | 03:13 | is held together because of
the strong container of the grid.
| | 03:17 | The consistency of the four column photograph mirrors the
consistency of the typography, it's a beautiful thing.
| | 03:24 | To recap, the goal of systematized hierarchy
is to provide a consistent structure designed
| | 03:31 | to help navigation in any environment.
| | 03:34 | Different projects may have specific
challenges of visibility, readability, and navigability,
| | 03:40 | but the guiding principles
are the same in each case.
| | 03:43 | You are making the decisions for your viewers in advance and
leading them gently down the proverbial garden path.
| | 03:52 |
| | Collapse this transcript |
| Paragraphs, drop caps, and entry points| 00:00 | Inviting the reader into
your text is a good thing.
| | 00:04 | Think about the ways you
invite people into your home.
| | 00:07 | You can just leave your door open and hope
they'll come in, or you can throw open the
| | 00:12 | door, reach out and grab them, you're
all welcome and give them a big hug.
| | 00:17 | Magazines are a great place to look for
ideas for welcoming the reader into the text.
| | 00:23 | Drop caps and opening paragraphs are opportunities
to capture the reader's attention and to motivate
| | 00:28 | the reader to invest more time
and attention in your project.
| | 00:33 | I want to show you some interesting
variations on introductory paragraphs and drop caps,
| | 00:38 | those big initials that
start a story or a paragraph.
| | 00:42 | As you look at these examples think about where the
drop cap is sitting in relation to the opening text.
| | 00:48 | A big drop cap is not only the introduction
to the text, it's a great visual element that
| | 00:53 | can add to the dynamic quality of your design.
| | 00:57 | Here the drop cap T is
sitting entirely outside the text.
| | 01:02 | The introductory paragraph is in a larger type
size, and it encloses the continuing narrative.
| | 01:09 | In this example, next to the giant S, note
that the opening line is italicized in magenta
| | 01:16 | which emphasizes the invitation into the text.
| | 01:21 | In this example the entire
word serves as a single drop.
| | 01:25 | Again, the intro paragraph is set off,
this time in caps from the rest of the text.
| | 01:32 | Here is another example where the
opening drop cap serves as an image.
| | 01:36 | Note the intro paragraph with its bold first
line and larger size and a secondary larger
| | 01:41 | drop cap with a bold lead-in.
| | 01:44 | Here the text is nicely wrapped
around part of the drop cap O.
| | 01:48 | the latter partly sticks out of the
side and the top of the text block.
| | 01:53 | You can create an extra visual interest by
taking the entire first paragraph or a part
| | 01:58 | of it and bumping up the point size and the
leading to draw the reader in as in this example.
| | 02:04 | The larger point size makes it easier
and therefore more inviting to read.
| | 02:10 | Just remember that everything is relative, so
as you're deciding how to scale your elements,
| | 02:16 | make sure that everything is balancing
well within your page or on your screen.
| | 02:21 | To get the reader interested, I encourage
you to try some of these simple methods for
| | 02:26 | creating introductory paragraphs and drop caps.
| | 02:29 | It's easy to be a good design
host by inviting the reader in.
| | 02:33 | Think of it as offering the reader a tasty cocktail to
entice them to hang out at your party. It's a good thing.
| | 02:43 |
| | Collapse this transcript |
| Typographic abominations| 00:00 | Most of this course is about the do's of type
usage, but along the way I have to point out
| | 00:06 | a few all too common errors.
| | 00:08 | It is excruciatingly painful when I see
type that has been abused and misused.
| | 00:14 | I call these typographic abominations.
| | 00:17 | Please, pay attention so that you
will not be responsible for any of these.
| | 00:22 | But proceed at your own peril.
| | 00:23 | Being sensitive to good type usage is a good
thing, but I warn you, once I point them out
| | 00:29 | you too will see typographic
abominations, and it will hurt.
| | 00:34 | Perhaps the most painful of all is seam
type that has been thoughtlessly, carelessly, or
| | 00:39 | ignorantly altered by stretching or squashing.
This creates ugly proportions.
| | 00:45 | Specifically, the relationships of the vertical
strokes to the horizontal strokes is compromised
| | 00:51 | by even the slightest change in its
proportions, something a pro can spot immediately.
| | 00:57 | Unfortunately most stretching and
squashing is of the extreme variety.
| | 01:01 | Remember, a skilled type designer took a great
deal of time and trouble to design a typeface
| | 01:07 | with harmonious balance, rhythm, and proportions.
| | 01:11 | If you manipulate those proportions,
you are destroying the designer's work.
| | 01:16 | Have you ever seen your reflection in a fun
house mirror, it's always unflattering,
| | 01:21 | it's a distortion of what you look like.
| | 01:23 | So keep that in mind if you
are tempted to stretch or squash.
| | 01:27 | Instead, find a typeface that has
the proportions you are looking for.
| | 01:32 | With the stratospheric number of typefaces
available today, you have plenty of choices.
| | 01:39 | Now that I've gotten that off my chest, I'd like to
remind you about two other common typographic abominations.
| | 01:45 | In some programs and with some older type file formats,
it's possible to artificially bold or italicize type.
| | 01:54 | This creates an unsightly and obvious
distortion of the shape of the type.
| | 01:59 | The software applies a default bulking up
or slanting of the type without regard to
| | 02:04 | the original design of the typeface, and it's
properly designed bold and italic family members.
| | 02:11 | Another amazingly common typographic
abomination is using dumb quotes instead of smart quotes.
| | 02:18 | Dumb quotes--also called prime marks--
may be used to indicate feet and inches.
| | 02:22 | Here is an example of dumb
quotes being used correctly.
| | 02:26 | But for quotes and apostrophes,
smart quotes are the way to go.
| | 02:31 | If you can avoid these three common
typographic abominations, you won't offend anyone who
| | 02:37 | knows anything about type.
| | 02:39 | More important, you will make
our visual world a better place.
| | 02:44 |
| | Collapse this transcript |
|
|
6. Typographic CompositionOpposing forces of typography| 00:00 | I'm going to talk about three sets of
opposing forces in typographic design.
| | 00:05 | Understanding these forces will
help you shape your viewer's perception.
| | 00:10 | The three examples that we'll talk about
here are formality and informality,
| | 00:16 | symmetry and asymmetry,
and simplicity and complexity.
| | 00:20 | We know the difference between
formality and informality when we see it.
| | 00:24 | You know that when someone's wearing a tuxedo
they're going to a very different event than
| | 00:28 | when they're wearing bermuda shorts.
| | 00:32 | Typographically speaking traditional Roman letters
especially, caps indicate formality and solidity.
| | 00:39 | They are the typographic equivalent of a tuxedo.
| | 00:42 | And when something is centered or
justified it adds to the formality.
| | 00:47 | We have a sense of sobriety and calmness,
seriousness, organization, balance, and purpose.
| | 00:56 | In contrast the informal effect here is
achieved with a whimsical mix of upper and lower case
| | 01:02 | letters a chunky slab serif, bright colors,
asymmetrically arranged blocks of text and lively imagery.
| | 01:11 | The next set of opposing
forces are symmetry and asymmetry.
| | 01:17 | Symmetrical typography conveys formality.
| | 01:20 | In this cover for the Oxford English dictionary
we see an almost completely symmetrical arrangement
| | 01:25 | of type using traditional Roman letterforms, this
conveys a sense of quiet authority and trustworthiness.
| | 01:34 | In contrast the asymmetrical arrangement and
the modern sans serif type on this book cover
| | 01:40 | convey energy and excitement.
| | 01:42 | The bright primary colors
contribute to the edgy effect.
| | 01:46 | The large separations between the words of
the title force the reader to leap from word
| | 01:51 | to word, again creating a sense of action.
| | 01:55 | Another pair of opposites I'd like to
talk about are simplicity and complexity.
| | 02:01 | Simplicity can be very
powerful, even though it is simple.
| | 02:05 | On this package we immediately feel a sense of
calmness it uses simple sans serif typefaces,
| | 02:12 | the colors are soothing and natural, and
there is a lot of room to breathe around the type.
| | 02:19 | Complexity can also be powerful, a complex arrangement
of type requires a finely tuned typographic hierarchy.
| | 02:27 | This package is a good example of a well
designed and tightly constructed composition, which
| | 02:32 | allows our eyes and our minds to make
sense of its message, its imagery and type fill
| | 02:38 | the surface from edge to edge,
its intense but organized.
| | 02:43 | The use of historical type and imagery
convey a sense of authority and tradition.
| | 02:48 | These examples of dueling design approaches
formality and informality, symmetry and asymmetry,
| | 02:54 | and simplicity and complexity are ideas
that you can apply to your own projects.
| | 03:00 | There are other kinds of opposing forces,
but these are a few to get you thinking and
| | 03:04 | to help you stretch your design muscles.
| | 03:09 |
| | Collapse this transcript |
| The grid: A structure for containing type| 00:00 | Grids are the building blocks of design. They are a way
of dividing space, arranging content, and containing text.
| | 00:09 | A gridded space gives us a structure, we can
work strictly within that structure, or we
| | 00:15 | may choose to selectively break out of that
structure, either way it is really helpful
| | 00:20 | to have a grid as a starting point.
| | 00:23 | Various grids are built into InDesign and
other programs, or you can create your own.
| | 00:28 | The simplest grid is a single column width
with a fixed depth and fixed margins, these
| | 00:35 | are typical for books and
scholarly journals, for example.
| | 00:38 | A more complex grid may vary in the number of
columns and the way those columns can be combined.
| | 00:44 | The 12 column grid used by Willy Fleckhaus
at the German magazine twin remains a classic
| | 00:51 | and is being used for web and mobile design
as well as for print because it is so flexible.
| | 00:57 | It divides evenly into six columns, four
columns, three columns, and two columns or into numerous
| | 01:10 | uneven combinations like 7 and 5 or 5, 4, and 3.
| | 01:17 | The more flexible a grid is the more useful it is
because it can be reconfigured to suit many purposes.
| | 01:24 | Using a grid as a template for multiple
designs or multiple iterations of a design will do
| | 01:30 | two important things, save
you time and unify your project.
| | 01:36 | This grid structure allows for columns of multiple
widths to accommodate a variety of related stories.
| | 01:41 | It is complex but organized.
| | 01:45 | This spread utilizes a basic three column
grid, on the second page the captions and
| | 01:50 | infographics break out into
a subsection of that grid.
| | 01:56 | Based on a variation of the Fleckhaus
grid this page has a five column grid.
| | 02:01 | The headline deck and intro text crossed the
width of the five full columns underneath them.
| | 02:06 | A separate story at the right is a subset
of that grid, the hand in the illustration
| | 02:12 | at the bottom and the glasses in the illustration at the
top left break through the grid, creating a dynamic layout.
| | 02:21 | When I work as an art director at Time
Magazine our grid system allowed designers to make
| | 02:25 | quick layout decisions which were
essential in meeting our tight closing deadlines.
| | 02:31 | And the grids also created a seamless design
environment that was cohesive as a whole,
| | 02:36 | even though there were many designers
working on one magazine simultaneously.
| | 02:41 | But the system was flexible enough to allow
designers to express a wide range of visuals
| | 02:46 | keeping the magazine fresh and vibrant.
| | 02:49 | Following a grid creates unity and
violating the grid creates variety.
| | 02:54 | Both unity and variety are principles of design
that you can use to create cohesive and dynamic visuals.
| | 03:02 | The grid is an important
tool in your visual arsenal.
| | 03:07 |
| | Collapse this transcript |
| Contrast and scale| 00:00 | To get your message across to your viewer, nothing
is more powerful than using Scale and Contrast.
| | 00:07 | Scale and Contrast allow you to grab the viewers by
their virtual lapels and point them in the right direction.
| | 00:14 | Strong differences in scale and contrast
also make your project more visually dynamic.
| | 00:21 | Contrasts in style, size, weight, width,
color, and position separate information.
| | 00:28 | You have the power to direct your
viewers to see what matters most.
| | 00:33 | Start by figuring out what you want to
communicate and who you want to communicate to.
| | 00:38 | Your content is always the
starting point for all design decisions.
| | 00:43 | Then look at the information you have in hand,
most of the time it's pretty obvious what
| | 00:48 | the most important piece of information
is and the next most important, and so on.
| | 00:53 | Scale and Contrast are the tools you apply to
make those levels of importance clear to the viewer.
| | 01:00 | The effects of scale are obvious, bigger
is better, weightier is better, big and bold
| | 01:06 | are immediately seen as
nearer and more important.
| | 01:10 | Position indicates
importance too, the higher the better.
| | 01:14 | But you can't just make everything
bigger, bolder, and more visually active.
| | 01:19 | Think of a piece of music with a different
instruments being played and different voices
| | 01:23 | singing at the same time.
| | 01:25 | If every instrument is equally loud and every
person is singing at the top of his or her lungs.
| | 01:32 | Nothing will stand out it will just be noise.
| | 01:35 | It's the same principle with visual activity,
the viewer needs to have a main focus and
| | 01:40 | then be guided into the rest of the
information in the order of its visual voice.
| | 01:47 | Contrast is the level of difference in tonality
or value between the background and the foreground.
| | 01:53 | Black and white offer the most contrast, the
higher the contrast the stronger the impact.
| | 01:59 | Black and white are at
opposite ends of the value scale.
| | 02:03 | As contrast decreases impact decreases, the
closer the values between foreground and background
| | 02:10 | the less contrast there is so the
level of importance appears lower.
| | 02:16 | Using typographic contrast and scale
dynamically can be a great way to create visual interest
| | 02:22 | even when there is no imagery available or
if you don't want the specificity of an image.
| | 02:28 | I'd like to point out three common errors
in the use of scale and contrast, the first
| | 02:33 | is trying to make everything look important
by making it as big as possible, that just
| | 02:38 | creates a lot of noise and
confusion for the viewer.
| | 02:42 | The second is not being bold enough, don't
be afraid to create extreme differences of
| | 02:47 | scale and contrast, push beyond your limits
and see how effective the big gestures can be.
| | 02:54 | Third common error involves contrast, try to
avoid running type over a complex background,
| | 03:00 | it's always a challenge to make this work because
there are often a variety of tones in the background.
| | 03:06 | So no single color of type will show up
equally well against all parts of the background.
| | 03:11 | However, there are
methods to do this successfully.
| | 03:16 | On this book cover good type use has
overcome a very difficult and complex background.
| | 03:22 | There are multiple techniques that work here to
lift this headline forward from the busy background.
| | 03:29 | First, there's a thin
black outline around the type.
| | 03:33 | There is a hard black drop shadow to the southeast,
then there's a soft gray drop shadow also to the southeast.
| | 03:42 | Also note that the serifs on the
letterforms are weighty enough so that they stand out.
| | 03:47 | Each of these steps adds to the visual separation of
type from image and creates an illusion of dimensionality.
| | 03:56 | The Sports Illustrated logo is another
good example of overcoming a busy background.
| | 04:02 | This logo has to work on a wide variety of media
platforms, there are four techniques at work here.
| | 04:09 | There's a thin black outline, there's a heavier
gray inline, there's a hard black drop shadow
| | 04:15 | and a soft gray drop shadow.
| | 04:19 | These are techniques that you can employ to help
your type be legible against an image or texture.
| | 04:24 | Remember scale and contrast are your friends,
don't be shy about using them to create drama
| | 04:30 | and to attract and hold your viewers attention.
| | 04:33 | But you can't have every
piece of type shouting either.
| | 04:37 | It's the modulation of scale that creates
the power pick and choose the bits that are
| | 04:42 | the key words, it may be a title or
part of a title or another element.
| | 04:47 | But make that type look like the equivalent of a trumpet
call and your viewer will hear it loud and clear.
| | 04:56 |
| | Collapse this transcript |
|
|
7. Thinking with TypeTypographic expressiveness| 00:00 | One of the reasons I have been in love with letterforms for
so many years is that they collectively carry meaning.
| | 00:07 | They give form and permanence to words.
They transmit thoughts and ideas.
| | 00:12 | So the purpose of letters is noble and essential,
and that would be enough of a reason to revere them.
| | 00:18 | But there is so much more to letterforms,
something completely different that also fascinates
| | 00:23 | me, they are real physical
shapes each one a little work of art.
| | 00:28 | And if you can use those little artworks
those expressive shapes to convey an idea visually
| | 00:34 | and intellectually that
is expressive typography.
| | 00:38 | There is no single style
of expressive typography.
| | 00:41 | One designer who is most well known for his
expressive use of typography is Herb Lubalin.
| | 00:47 | You may have seen these classic images
which use type itself and only type to convey a
| | 00:53 | concept visually as well as verbally, a seamless
connection that looks inevitable when you see it.
| | 00:59 | In France the graphic designer Massin was also
influential in his use of expressive typography.
| | 01:06 | His best-known work in this country is his
groundbreaking typographic treatment of the
| | 01:10 | Eugene Ionesco play The Bald Soprano.
| | 01:14 | Massin used photographs of the actors in
silhouette surrounded by bursts and cascades of their
| | 01:19 | dialog in wildly varying
sizes and styles of type.
| | 01:23 | His goal was to create a theatrical experience on the
printed page, it became a classic of expressive typography.
| | 01:32 | Here are some examples I would like to show
because the form of the typography amplifies
| | 01:36 | the meaning of the text.
And together they send one strong message.
| | 01:43 | The head line chill factor is built from
type meant to resemble blocks of ice a perfect
| | 01:49 | complement to the topic
and to the opposing imagery.
| | 01:52 | It's also turned on its side so that its height
matches the image on the other side it's a cohesive hole.
| | 02:00 | These great examples from wired are part of
a series where the number three is customized
| | 02:05 | to express the idea of the text.
| | 02:07 | On the left the three is being sucked into
quicksand, on the right at three is formed
| | 02:13 | by a mass of forward projecting laser beams.
| | 02:17 | My colleague Roberto De Vicq from the Type
Directors club created this beautiful expressive
| | 02:22 | book cover, the concept of descendants is expressed
by his fanciful descenders flowing from the title.
| | 02:30 | Here you can see a simple but effective
typographic treatment which conveys the concept of warfare
| | 02:36 | and pairs up an active image with active type.
| | 02:40 | Your message will always be most powerful when the words
and the image are a perfect match. Give it a try.
| | 02:48 | Expressive typography requires a little bit of
inventiveness and a sense of play, maybe a little irreverence.
| | 02:55 | Look at the letterforms think
about the meaning you want to convey.
| | 02:59 | Then think about how you might modify the
shapes of the letters or arrange or customize
| | 03:05 | them to bring additional meaning to the words.
| | 03:08 | You don't always need a lot of special
effects and filters just a good idea, sometimes a
| | 03:13 | simple solution is the most effective.
| | 03:17 | Expressive typography has the power to
say more than just the words themselves.
| | 03:22 |
| | Collapse this transcript |
| The emotional impact of type| 00:00 | Every bit of typography that you
see has an emotional component.
| | 00:04 | The emotion might be subtle or obvious,
but type and more importantly how the type is
| | 00:10 | used always has an emotional aspect.
| | 00:13 | As a designer you can identify that
power and use it to amplify your message.
| | 00:19 | The strongest emotions can be
triggered by previous or repeated associations.
| | 00:24 | Many pieces of lettering or type are iconic.
| | 00:27 | Think of the Hollywood sign which may
conjure up a nostalgic sense of the film industry
| | 00:33 | or our Declaration of Independence,
which may stir feelings of patriotism.
| | 00:38 | Then there are logos, hundreds of logos, mostly
typographic are engraved on our collective consciousness.
| | 00:46 | National brands like the Staples logo, Wal-Mart,
IBM, Macy's, the US Postal Service, FedEx,
| | 00:55 | Coca-Cola, in most cases just one letter of
the logo would be familiar enough to trigger
| | 01:01 | recognition and an association
that has an emotional component.
| | 01:06 | No matter what you're designing, you can
trigger the viewers' emotions by using type in ways
| | 01:11 | that connect to the subconscious.
| | 01:13 | These two examples use
nostalgia to appeal to consumers.
| | 01:17 | This arm & hammer box looks
as if it's been around forever.
| | 01:21 | The illustration is still
in an old-fashioned style.
| | 01:24 | The strong sans serif cap
surrounding the flexed bicep conveys strength.
| | 01:30 | We can imagine our mothers and
grandmothers using this same product.
| | 01:34 | It projects a sense of confidence and trust.
| | 01:38 | The Tide logo, though it's been slightly
modernized over the years retains the same overall look.
| | 01:44 | Its color scheme, its concentric circles,
and its forward sloping blue sans serif letters
| | 01:50 | match our childhood memories of this logo.
| | 01:54 | Childhood memories are
powerful emotional connection.
| | 01:57 | Hand-drawn lettering can add a
humorous or irreverent tone to your project.
| | 02:02 | Here's a great example of a re-branding
project that took a whole new approach to a business
| | 02:07 | that's been around for three generations.
| | 02:10 | The original packaging looks like it's trying
to be fun, but still comes off as a bit stogy.
| | 02:17 | The redesign by Michael Bierut from Pentagram goes over
the top with a wacky fund irreverent hand-lettered approach.
| | 02:24 | The bright colors and childlike illustrations all
contribute to a highly playful and happy feeling.
| | 02:30 | The effect even continues
into the shipping boxes.
| | 02:35 | You can see how specific typographic usage
can reach out to speak emotionally to the
| | 02:40 | viewer or to target certain viewers.
| | 02:43 | Using the emotional appeal
of type can be a powerful tool.
| | 02:48 |
| | Collapse this transcript |
| Three-dimensional type| 00:00 | In this video I'm going to talk
about two different kinds of type in 3D.
| | 00:05 | But don't worry, you won't need any
special glasses to watch this video.
| | 00:09 | First, there is type that uses a lot of special effects to
appear three-dimensional, though it's on a flat surface.
| | 00:15 | And second, type that is
actually physically three-dimensional.
| | 00:20 | Programs like InDesign, Photoshop, and
Illustrator make it very easy to create three-dimensional
| | 00:26 | effects using typography, there are plenty of great
lynda.com movies that can show you how to do that.
| | 00:33 | But I'm going to talk about some pitfalls
you should try to avoid and to give you some
| | 00:37 | advice about how to make your 3D type
really pop from the page and to be readable.
| | 00:44 | Drop-shadows, glows, highlights, outlines,
extruded, and beveled type, and combinations
| | 00:50 | of filters and effect can be overwhelming.
So my advice to you is that less is more.
| | 00:57 | Even one or two of the filters or special
effects are probably fine for most uses.
| | 01:03 | Illusions of depth are fun
and even a bit addictive.
| | 01:05 | But the more you pile on the effects, the
easier it is to obscure the type's counter
| | 01:10 | spaces or the parts of the letters that
define its character and then you weaken the most
| | 01:15 | essential function of type,
its ability to be read.
| | 01:19 | It's fun to explore all of the tempting options
this software offers, but it takes some mastery
| | 01:24 | to make these effects work well.
It needs to do more than just look cool.
| | 01:30 | In this book cover the type is coming forward
in anatomy and the type appears to be receding
| | 01:36 | into the distance in the word design.
| | 01:39 | Highlights, bevels, and extrusion are used very
effectively and yet the type retains its legibility.
| | 01:47 | Then we have the truly three-dimensional
letters, these are another story.
| | 01:51 | You can think of these as more like type
sculptures, typographic forms that you can walk around
| | 01:57 | and admire from many angles.
| | 01:58 | I love to collect three-dimensional type
because it's a reminder that once upon a time and
| | 02:04 | still today for letterpress shops, all type was
physical, expressed in 3D, height, width, and depth.
| | 02:11 | The depth of three-dimensional
type adds to its drama.
| | 02:15 | This sign is emphasized by
the shadow it creates mid-day.
| | 02:20 | If it were a painted sign it
wouldn't give that impression of depth.
| | 02:24 | And at night, neon tubing brightens
the typography on this classic landmark.
| | 02:29 | In this signage the type actually
wraps around the edge of the building.
| | 02:33 | It gives different effects as the
light changes from day to night.
| | 02:38 | And this three-dimensional signage
appears to float above the building.
| | 02:44 | Designing for three-dimensional
typography requires special considerations.
| | 02:49 | It should be legible at a distance, readable from
different angles, and under distracting circumstances.
| | 02:57 | I recommend keeping a swipe file of three-dimensional
type effects and having a close look at why
| | 03:02 | they are working well.
| | 03:04 | Then you can try creating those
same effects on your own projects.
| | 03:08 | That's a good way to start understanding the
advantages and limitations of 3D effects using type.
| | 03:15 | Whether you're creating the illusion of 3D
type or designing actual 3D type, the effective
| | 03:20 | depth can make your typography more powerful.
| | 03:23 | In the next chapter we're going to take a
look at more three-dimensional typography
| | 03:28 | within the context of environmental graphics.
| | 03:33 |
| | Collapse this transcript |
|
|
8. Specialized UsesWorking with numbers| 00:00 | You might not think of numbers as special, but
they're quite different from our Latin letters.
| | 00:05 | They come down to us from Hindu-Arabic forms, which is
why you may remember hearing the term Arabic numerals.
| | 00:13 | You may have noticed that some fonts
have numbers that are all the same height.
| | 00:17 | These are called lining numbers.
| | 00:19 | They work well with capital letters, because they
are designed to have the same height and weight.
| | 00:25 | Tabular numbers are all the same
height too, but with a difference.
| | 00:28 | They have a fixed width to ensure that columns of data
align correctly, creating well-balanced tables and charts.
| | 00:37 | You may also have noticed that some fonts
have numbers that have different heights and
| | 00:41 | baselines, these are called old-style numbers.
| | 00:45 | These varying heights correspond to the
lowercase with its descenders and ascenders.
| | 00:50 | They are intended for use within text so
that they blend into the color of the text.
| | 00:56 | Lining figures look uncomfortable
within text, because they stick out too much.
| | 01:01 | So if the font you are using only has lining
figures, you can minimize the problem by reducing
| | 01:06 | the point size of the numbers a bit,
it's not ideal, but it's a good fix.
| | 01:11 | Better yet, look for a typeface
with both lining and old-style numbers.
| | 01:16 | Many type designers now release both sets of
numbers with their typefaces so they'll be more useful.
| | 01:22 | Let's not forget about fractions.
| | 01:25 | Most fonts have a set of the most common
fractions and they are designed to have the proper weight
| | 01:30 | to work with text type.
But what if you need to use 5/32nds?
| | 01:35 | There are specialized typefaces that have
extensive sets of fractions and typefaces
| | 01:39 | that have special numbers designed to be
combined into any fractions you need to create, we
| | 01:45 | call these properly weighted fractionals.
| | 01:49 | When working with numbers, remember to
match up their use with their height.
| | 01:54 | Use old-style numbers within text and
tabular numbers when designing tables and charts.
| | 02:00 | When designing with all
caps, use lining numbers.
| | 02:03 | Combine that with using properly weighted fractionals, and
that's all it takes to work with numbers like a pro.
| | 02:13 |
| | Collapse this transcript |
| Expert characters and analphabetic symbols| 00:00 | What is an Analphabetic symbol?
| | 00:04 | Analphabetic symbols are typographic marks
that are not part of the basic character set,
| | 00:09 | and they are better known as dingbats.
| | 00:11 | If someone called me a dingbat, I would
say thank you, I'm a big fan of dingbats.
| | 00:16 | The original meaning of the word
dingbat dates back to at least 1880.
| | 00:20 | It's also known as a printer's
ornament or a printer's character.
| | 00:25 | Dingbats are some of the most
interesting typographic symbols.
| | 00:28 | There are entire fonts devoted to dingbats.
| | 00:32 | Thanks to Hermann Zapf, pretty much everyone who has
a computer is familiar with the font Zapf Dingbats.
| | 00:38 | There are thousands of fonts that just contain
dingbats, some of which are highly illustrative
| | 00:44 | and specific, not to mention entertaining.
| | 00:48 | Dingbats or analphabetic symbols are
one category of expert character sets.
| | 00:53 | Expert character sets are made up of anything that
is not generally included in the basic character set.
| | 00:59 | The basic character set contains upper
and lowercase, numbers and punctuation.
| | 01:05 | Other common examples, of expert characters
are alternate character sets which may include
| | 01:10 | variations on swash caps
or specialized ligatures.
| | 01:15 | There can also be other versions of letters, such as these
elaborate flourishes from Zapfino and Bickham Script.
| | 01:22 | These must be used with care and very sparingly, but these
expert characters can add a special touch to your design.
| | 01:29 | Other expert characters such as mathematical
symbols and scientific symbols maybe included
| | 01:35 | in some fonts glyph sets, or they may be
contained in separate expert character sets.
| | 01:41 | You can see that expert characters
are not only useful, but essential.
| | 01:45 | The next time somebody calls you a dingbat you can say,
really, I am flattered. Which dingbat did you mean?
| | 01:52 | And then you can educate them
about the real meaning of dingbat.
| | Collapse this transcript |
| Using typography to navigate content| 00:00 | Typography lends itself to providing direction.
| | 00:04 | As a designer, it is your responsibility to lead
the viewer logically through content or information.
| | 00:10 | Type is a perfect tool
because it is naturally sequential.
| | 00:14 | We have an alphabet that's sequential, we
have numbers that are sequential, and we have
| | 00:17 | symbols like arrows that are directional.
| | 00:21 | These are typical navigational devices.
| | 00:24 | Let's look at a few print
and screen-based examples.
| | 00:27 | In the print environment, studies have
shown that people look at the table of contents
| | 00:32 | more than any other page in a
magazine, book, or newspaper.
| | 00:36 | We keep referring back to it
because it's our roadmap to the content.
| | 00:40 | In addition to page numbers and titles, this
table of contents has a color coded key, delineating
| | 00:46 | sections by subject matter, that
is a secondary level of navigation.
| | 00:52 | The humble arrow is the most universally
recognized directional or navigational device, you see
| | 00:58 | it everywhere, you know immediately what it is.
| | 01:02 | On the web we have become accustomed to navigation
by clicking links, most of which are typographic.
| | 01:08 | A good site makes those links highly visible
and obvious, and provides multiple links to
| | 01:13 | jump from screen to
screen in more than one place.
| | 01:18 | Navigation on tablet devices is gestural.
| | 01:20 | We tap with our fingers
rather than clicking with a mouse.
| | 01:24 | We are often tapping on a link
or an icon that features text.
| | 01:28 | But the Touch Screen has given us many new
ways to navigate using gestures, double tapping,
| | 01:34 | flicking, pinching, and dragging.
| | 01:38 | Navigation is all about
smooth transitions and clarity.
| | 01:41 | As a designer, your goal is to provide
reassurance and comfort to your viewer to make
| | 01:47 | the intended pathway as clear as possible.
| | Collapse this transcript |
| Using typography to navigate the environment| 00:00 | Typography is all around us,
wherever we walk, travel, live, and work.
| | 00:06 | It's a vital component of our environment.
Type helps us get from place to place.
| | 00:12 | Navigational typography can be found in
street and highway signage, transportation hubs,
| | 00:18 | building signage, inside and
outside of stores and institutions.
| | 00:22 | Type helps us to find our way through the physical spaces
where we visit and spend time in our daily lives.
| | 00:29 | We call this kind of typography Wayfinding.
| | 00:33 | Here are three great examples of Wayfinding
and environmental design from the fine folks
| | 00:38 | at the International
Design Consultancy Pentagram.
| | 00:43 | In the Toronto Pearson International Airport, Wayfinding systems
and signage help us navigate through a sprawling space.
| | 00:52 | Typographic indicators, such as gate numbers
and lettered concourse identification, lead
| | 00:57 | visitors to their destination.
| | 00:59 | In a typically time pressured and anxiety producing
environment, good signage is reassuring and comforting.
| | 01:07 | Large International Airports such as
this one require multilingual signage.
| | 01:12 | The Arizona Cardinals Stadium is enormous,
from the numbered parking areas to the ticketing
| | 01:18 | gates, merchandise areas, escalators,
seating levels, sections, and rows.
| | 01:24 | The directions in this massive stadium are clearly marked.
| | 01:28 | Inside the stadium, fans can learn more about
their team in these typographic installations,
| | 01:34 | such as the Historical Timeline
and the Cardinals Hall of Fame.
| | 01:39 | All of the typography used in this stadium
is strong and masculine, and every typographic
| | 01:45 | element is part of a cohesive system.
| | 01:48 | Typography plays a huge role in this
theater complex on 42nd Street in New York City.
| | 01:54 | This building is a blast of colorful
type, from its exterior to its interior.
| | 02:00 | Visitors literally walk through an environment
of type from the building's elevators, stairwells,
| | 02:05 | doorways, dressing rooms, even
its room directory and donor wall.
| | 02:10 | The color and vitality reflect the energy
of 42nd Street's bustling Theater District.
| | 02:16 | On a street that is packed with tourists and
competing signage, the new 42nd Street Studios
| | 02:21 | establishes a bold and powerful presence.
| | 02:26 | Environmental typography is an extension
of its architectural context, and all of the
| | 02:31 | same important principles apply here.
| | 02:33 | The type must have high visibility against
its background, be highly legible, have strong
| | 02:39 | stroke widths and open counter
spaces with a large X-height or all caps.
| | 02:45 | While you may not be designing complex
Wayfinding signage in an airport or a stadium right now,
| | 02:51 | these examples can provide a lesson in
consistency and clarity of typographic navigation.
| | Collapse this transcript |
|
|
Final ThoughtsManaging fonts and building your type library| 00:00 | When type was physical, managing fonts
meant keeping them in the proper drawer.
| | 00:06 | Now we live in a vast world of digital fonts, close to
200,000 of them, so managing your fonts is a necessity.
| | 00:13 | Keeping your fonts organized with font
management software will give you peace of mind.
| | 00:18 | It's like having a tidy closet.
| | 00:21 | Font Management Software is used for installing,
activating, searching, comparing, and organizing fonts.
| | 00:28 | Besides keeping you organized, font
management offers some technical advantages.
| | 00:33 | Most important, it allows for activation of
a font only when it's actually being used.
| | 00:38 | This frees up computing resources, so
your system can function more efficiently.
| | 00:43 | Most computer platforms provide
some basic form of font management.
| | 00:48 | But it's usually not enough for professional
designers who regularly use hundreds or thousands of fonts.
| | 00:54 | So Font Management Software is
worth the relatively small investment.
| | 00:59 | There are a number of good
programs which can work well for you.
| | 01:03 | In the exercise files for this course, I've
included a list of Font Management Software.
| | 01:08 | I recommend that you check it out.
| | 01:11 | So now that we've talked about managing the fonts you
already have, how should you add to your collection?
| | 01:17 | A good way to start is to make sure you include key
examples from the main categories we covered earlier.
| | 01:24 | Bear in mind that more is not always better.
| | 01:27 | A carefully chosen selection of well
designed typefaces will serve your needs far better
| | 01:32 | than a huge library of inferior fonts.
| | 01:36 | That said, there are many sources
where you can search for fonts online.
| | 01:41 | The biggest of these is myfonts.com which aggregates fonts
from many small type foundries as well as larger foundries.
| | 01:48 | At myfonts.com there are easy to understand
categories and keywords that will help narrow down your search.
| | 01:56 | You never know what will
work for your next project.
| | 01:58 | I keep tear sheets for magazines, make screen
caps from websites, and gather images of type
| | 02:04 | on Pinterest of examples that interest me.
That way when I'm planning a project, I can
| | 02:09 | start my search for the right type by
looking at things that have already caught my eye.
| | 02:14 | There are several ways to find the source of
the typeface from your inspirational examples.
| | 02:20 | The best sources online are Identifont,
WhaTheFont, and the excellent forums on typophile.com.
| | 02:27 | If you're looking for what's new and
interesting in the font world, I also recommend signing
| | 02:32 | up for the free newsletters that many
foundries provide to showcase their new offerings.
| | 02:38 | Speaking of free, it's surprising
how many free fonts are available.
| | 02:42 | There are some good free fonts
out there, but a word of caution.
| | 02:46 | You usually get what you pay for. It takes a
major investment of time and skill to design
| | 02:52 | a professional quality text face, so
you will rarely find them for free.
| | 02:57 | That's what you'll need to know to get started
with building and managing your font library.
| | 03:01 | I love looking at type, and I can get lost for hours browsing
font collections from different foundries. It can be addictive.
| | 03:09 | Happy hunting, and I hope you enjoy
building your type collection as much as I do.
| | Collapse this transcript |
| Developing your typographic eye| 00:00 | To sharpen your typographic eye, first
look at the big picture, the macro view.
| | 00:06 | What is your initial impression?
Is it dynamic or quiet?
| | 00:10 | Does it engage you and how does it engage you?
| | 00:13 | Is there a focal point? Is there
clear hierarchy of information?
| | 00:18 | You also have to look at the details, the micro
view and ask yourself is the color of the type even?
| | 00:25 | What about alignment?
Is there hanging punctuation?
| | 00:28 | Have proper smart quotes been used?
Has the display type been churned well?
| | 00:34 | I look at typography all of the time. it is
the first thing I see when I look at anything
| | 00:38 | that has type, a sign, a menu, a package, a building,
a T-shirt, a wine bottle, a cereal box, or a book cover.
| | 00:48 | I get a first impression.
| | 00:50 | I look at details, I deconstruct it, I think
about the choices the designer made and the
| | 00:56 | possible reasons behind those choices.
And of course I think about redesigning it.
| | 01:01 | That is what designers do,
we can't help ourselves.
| | 01:04 | I want you to see typography everywhere like I
do and to really think about what you are seeing.
| | 01:11 | That is the best way to
educate your typographic eye.
| | 01:15 | Just keep looking, imagine
what was in the designer's mind.
| | 01:19 | Think critically about the designer's choices
and think about what you might do differently
| | 01:24 | to improve on it if you have the chance.
Don't take anything for granted.
| | 01:29 | In everything you see someone made
typographic choices, some good, some great, some bad.
| | 01:37 | The more you look, the more you
will see and the more you will learn.
| | 01:40 | Believe it or not, you can learn just as
much from bad examples as from good examples.
| | 01:46 | Collect good examples of type usage that you see,
maybe even make a note of what you liked about it.
| | 01:53 | These can be springboards for your own
design projects, inspiration is all around you.
| | 01:59 | I'm constantly amazed at the inventive
uses of typography that I see every day.
| | 02:04 | The saying there is nothing new under the
sun is true in a sense, but everything can
| | 02:09 | be reinvented and can be re-imagined
with a twist or a new point of view.
| | 02:14 | And of course, there are so many new typefaces to
try, more than you could ever use in a lifetime.
| | 02:20 | Keep educating your
typographic eye, type is everywhere.
| | 02:24 | If you develop a habit of thinking about all of the
type you see in your daily life, that's a great start.
| | Collapse this transcript |
| Breaking the rules| 00:00 | Perhaps at this point you're thinking that typography has
so many rules and standardized practices and principles.
| | 00:06 | Well, you're right, but any
body of knowledge has its rules.
| | 00:11 | If you were learning to play the piano, you would
first have to learn to read the musical notation.
| | 00:17 | Then you would have to practice at a very
basic level, playing scales over and over
| | 00:21 | again until they were exactly right.
| | 00:24 | Eventually, you might learn to play a
complex piece of music, and you'd have to work to
| | 00:28 | hit every note until the piece was perfect.
| | 00:32 | Then and only then would you know enough
to begin to interpret that piece of music by
| | 00:37 | allowing it to become more expressive,
seen through the prism of your own experience.
| | 00:42 | Like any other field, typography has its conventions
and rules. You must know and learn to follow those rules.
| | 00:50 | Yet, some of the most wonderful and
effective designs completely violate those rules.
| | 00:56 | One of my teachers Donald Jackson put it this way,
all rules can be broken in divinely successful ways.
| | 01:03 | You can learn from those who have successfully
broken the rules, but it does no good to try to copy them.
| | 01:10 | Understand that the reason they have been
able to break the rules successfully is that
| | 01:13 | they know the rules inside and out.
| | 01:16 | So my advice to you is learn the rules, but
keep your eyes open for examples of wonderful
| | 01:22 | designs that have
successfully broken those rules.
| | 01:26 | Look at them critically to understand
why they have been able to make that leap.
| | 01:30 | And when you are ready,
don't be afraid to be daring.
| | 01:33 | Remember, it's not brain surgery, and there is rarely
only one solution to a design problem, so be bold.
| | Collapse this transcript |
| What's next| 00:00 | As in every field, the world of
typography is always evolving.
| | 00:05 | New ideas, typefaces, styles and people
populate today's typographic landscape and they
| | 00:11 | shape our designs and communications.
| | 00:13 | We're living in a true golden age of typography.
It's never been a more exciting time for me
| | 00:19 | to be a typographic educator.
| | 00:22 | Now with the Internet anyone can make and
distribute a typeface, which has resulted
| | 00:26 | in an explosion of new typeface design, and
there have been more books published on typographic
| | 00:31 | topics in the last 5 years
than in the last 500 years.
| | 00:36 | If you've watched this whole course, you've got a
great head start in using typography and using it well.
| | 00:42 | But this is just the beginning,
think of this course as a starting point.
| | 00:47 | I recommend that you also check out some of the websites,
podcasts, blogs, and books included in the exercise files.
| | 00:55 | There is a cornucopia of classes, conferences,
organizations, and resources devoted to typography.
| | 01:02 | These are great ways to get the latest news
and information on the world of typography
| | 01:07 | and also to build your
typographic reference library.
| | 01:11 | Good typographic usage isn't magic.
| | 01:14 | All of the necessary skills and
practical knowledge of typography can be learned.
| | 01:19 | All you need to do is study the basics, look
at good examples of type usage, and methodically
| | 01:25 | keep working at improving your
skills until you get better at it.
| | 01:29 | And that's it for this course.
| | 01:31 | I hope you feel better prepared to go out there and
capture your audience using visually dynamic typography.
| | 01:37 | Until next time, this is Ina Saltz, sharing
my passion for letters and type with you and
| | 01:43 | hoping that you will share your passion for
letters and type with everyone in your world.
| | Collapse this transcript |
|
|
