"How to Make a Video Game" was retired on August 1, 2018.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Typography for Designers!
You have completed Typography for Designers!
Preview
Type comes in many different shapes and sizes, each with its own voice and personality. We’ll explore a few typefaces along with their letterforms to see the genres recognized today.
Further Reading
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Now, let's look at the different
classifications or types of typefaces.
0:00
You might be wondering
why is this important?
0:05
Can't I just find something I like and
use it?
0:09
Well, I'm glad you asked.
0:12
Knowing different type genres will
help you choose a proper typeface for
0:16
the products at hand.
0:19
And make you a better designer.
0:21
For instance, if you're working with
a client who wants the mood of their
0:23
site to convey eloquence,
you need to know what classes or
0:28
styles of typefaces
lean towards that bent.
0:32
Or if you're designing a site that's
heavily influenced by a certain
0:35
time period, you should utilize
a typeface that would have
0:39
been appropriate to genres at that time.
0:42
As I mentioned earlier,
typefaces have a mood or personality.
0:45
The way the characters look
conveys a message to the reader.
0:51
Knowing these genres will help up
us see how our type is talking and
0:54
what makes it distinct.
0:58
So without further ado, let's dive in.
1:01
Type has been classified in different
ways over the years, but for
1:05
simplicity's sake,
we'll look at three major genres.
1:09
Serif, sans-serifs, and scripts,
along with their sub-genres.
1:13
Up first, we'll look at serif typefaces.
1:18
Like we learned from out terminology,
typefaces can have serifs on their
1:21
letter forms, and
this would place them in the serif genre.
1:25
Simple enough, but within this genre,
1:30
we have a number of nuances that will set
apart different serifs into sub-genres.
1:32
The sub-genres we'll be
covering are Humanist,
1:38
Old Style, Transitional, Didone, and Slab.
1:42
After the invention of the printing
press in 1450, logically,
1:47
the creation of typefaces
shortly followed.
1:51
Humanist typefaces arose
around the 1460s and
1:54
1470s with strong calligraphic influence.
1:59
Printers were creating typefaces based
on the strokes of a pen when drawing
2:02
letter forms.
2:06
They tend to have diagonal stress,
lower stroke contrast, and
2:07
a relatively small x-height.
2:12
Serifs are not as refined.
2:13
These are not as common today, but
some examples are Jansen, Kennerley,
2:17
and Centaur.
2:22
Old Style came about next in
the latter part of the 15th century.
2:24
The letter forms were getting
more refined as type and
2:29
less influenced by calligraphy.
2:32
We see less diagnose stress happening, and
2:35
the serifs have also changed
to be more wedge-like.
2:37
Some examples include Goudy Old Style,
Palatino, Perpetua, and Plantin.
2:41
This brings us to the 18th century where
we see transitional typefaces on the rise.
2:48
The trend of decreasing
calligraphic flow continues.
2:54
And here, we have vertical stress,
thinner and flatter serifs,
2:58
along with exaggerated contrast
between thicks and thins.
3:02
Some examples include Baskerville,
Bookman, and Clearface ITC.
3:06
Next, we have Didone typefaces
arriving in the late 18th century.
3:12
The influence of the pen is
really nowhere to be found.
3:17
The serifs have become even thinner
without any sign of bracketing.
3:21
Contrast is taken to the extreme
with thick verticals and
3:26
ultra thin horizontals.
3:30
You might regard these typefaces as
reminiscent of the high fashion culture.
3:33
They work great at large sizes with ample
amounts of white spaces around them.
3:38
But as body copy at small sizes,
their serifs and
3:43
horizontals can quickly get lost.
3:47
Some examples include Bodoni and Didot.
3:50
Now, we'll head in the opposite
direction with Slab serifs that
3:54
have extremely thick slab-like serifs and
low contrast.
3:58
These came about in the early 19th
century and were heavily used for
4:03
headlines and advertising because of
their bold look-at-me appearance.
4:08
Most of these are utilized at large sizes,
but
4:14
a few have been known to also
work well in small text sizes.
4:17
Some examples of these include Rockwell,
Clarendon, and Egyptienne.
4:21
Next, let's move into
the new genre of Sans-serifs.
4:27
These typefaces do not have
serifs on their letter forms or
4:31
literally are without serifs.
4:35
We'll look at Grotesque, Neo-grotesque,
Humanist, and Geometrics.
4:38
In the late 19th century,
we see the rise of Grotesque sans-serifs.
4:44
Though we see sans-serifs
as completely normal today,
4:49
don't forget that there wasn't much of
a reference for them when they came about.
4:53
The design of an earlier one,
Akzidenz-Grotesk,
4:57
has actually been theorized
to be derived from Didone
5:01
because the typefaces have similar metrics
when the serifs from Didone are removed.
5:04
As we'll see in other genres,
sans-serifs are typically low contrast.
5:10
Some examples of grotesque
also include Franklin Gothic.
5:15
The Neo-grotesque then arises,
5:20
refining some of the peculiarities
in early Grotesques.
5:22
These are some of the more
common sans-serif typefaces, and
5:26
Helvetica fits right in there.
5:30
Although there is a desire for
simplicity here,
5:33
these aren't always great candidates for
body copy because of simplicity and
5:36
similarity in letter forms can often
affect legibility at small sizes.
5:40
Other examples include Univers.
5:46
Next, we have Humanists Sans,
not to be confused with Humanist serifs.
5:50
And these get back to some calligraphic
roots with greater variations
5:55
in line widths.
6:00
These are often the most legible
of the sans-serif bunch.
6:01
Hence, their popular use
as a website body copy.
6:05
So you may be wondering
why are they more legible?
6:09
First, the modulation of
the line thickness creates
6:14
distinct character shapes.
6:17
This makes it easier to distinguish,
so it's easier to recognize words.
6:19
Second, Humanist letter forms
have wide apertures which, for
6:24
example, helps us to avoid
confusing a lowercase e as an o.
6:29
Examples of Humanist serifs include
Tahoma, Gill Sans, and Frutiger.
6:35
Next, we have our Geometrics,
which are quite popular today.
6:41
As the name implies,
6:46
their letter forms are based on geometric
shapes like circles and squares.
6:47
Examples include Futura,
Bank Gothic, and Gotham.
6:53
Now, we'll move into our
final genre of scripts,
6:58
which are typefaces based on handwriting.
7:01
We'll subset this genre into formal and
casual scripts.
7:04
Formal scripts are based on letter forms
from writing masters in the 17th and
7:10
18th centuries.
7:14
They have some contrast between thick and
thin as they were inspired by
7:16
the way a quill or
nimble pen would handle the letter forms.
7:21
They tend to be more elegant, and
work well for events like weddings today.
7:25
Casual scripts are a bit freer and,
well, casual.
7:30
They tend to be a more lighthearted or
7:35
easygoing than their serious,
eloquent counterparts.
7:37
The contrast can range from low to
high depending on the typeface.
7:41
They were often inspired
by the way a brush or
7:47
marker would handle the letter forms.
7:49
All right, that was a lot to cover.
7:52
I hope it helps you get to
know type a little better so
7:55
we can make smarter choices down the road.
7:58
Also, think about if
there is a certain genre
8:01
that you naturally gravitate towards.
8:04
In the next video, we'll look at
designing for print versus digital.
8:06
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up