Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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