Preview
Video Player
00:00
00:00
Terminology
6:04We’ll need to be on the same page when talking about web typography. The terms covered here will help us define what we’re talking about down the road.
Now that we understand what typography is,
0:00
let's talk about some of the terms used to
describe its different elements.
0:02
This will include typefaces, parts of
letter forms layouts, and more.
0:06
Instead of ambiguously trying to describe
something like that low swoopy part of
0:11
the lowercase y, these terms will make it
much easier to
0:15
know what we're talking about as we dive
into web typography.
0:18
As mentioned in the previous video,
typography revolves around working with
0:22
premade letter systems like typefaces to
layout and arrange content.
0:26
So first, let's look at what a typeface is
and the elements that define and shape it.
0:31
The terms typeface and font are sometimes
used interchangeably today, but
0:36
they are in fact, distinctly different.
0:40
A typeface is the design of a collection
of characters.
0:43
So the term should be used when talking
about the look of those letters,
0:46
numbers and symbols.
0:50
For example, I dig Futura.
0:52
It's such a good looking typeface.
0:54
This is called a font family in CSS
because a typeface comprises
0:56
multiple fonts.
0:59
A font is a single instance or embodiment
of a specific weight, width or
1:01
style of a typeface.
1:06
For example, the computer file for
1:08
Helvetica Bold Italic would be a font,
whereas Helvetica would be the typeface.
1:10
Historically, this term carried another
level which dealt with its
1:15
point size because fonts were cast metal
pieces at a certain size, so
1:19
Helvetica Bold ten point would be an
example of a font.
1:23
Today, we have the ability to change sizes
without changing fonts on a computer.
1:27
Now that we've got a grasp on that,
1:33
let's look at the numerous elements that
shape a typeface.
1:35
First, we have the cap height.
1:38
This is simply the height of the capital
letters.
1:40
Next is the baseline which is pertinent to
both uppercase and
1:43
lowercase letters, as it's the guideline
for which the majority of characters rest.
1:46
The height of the lowercase letter set is
determined by the lowercase x, so
1:52
this is labeled as the x-height.
1:56
The x-height varies across typefaces and
can greatly affect legibility.
1:58
Let's look at that.
2:02
A high x-height means the lowercase is
larger in relation to the uppercase,
2:03
whereas a low x-height means the opposite,
it's smaller.
2:08
When smaller font sizes come into play, a
typeface with a high x-height can help
2:11
retain legibility, because the lowercase
is larger in relation to the uppercase.
2:16
Let's say you have two different
typefaces, and
2:21
both are set at 12 point size.
2:24
One could be easier to read than the other
due to a higher x-height.
2:26
You'll also notice there are certain areas
where some lowercase letters descend below
2:31
the baseline and others ascend above the
x-height.
2:35
These are called descenders and ascenders,
respectively.
2:40
The p here has a descender, and the b has
an ascender.
2:44
You might be wondering,
2:48
how low can descenders go or how high can
ascenders climb?
2:49
Well that also varies across typefaces.
2:54
In some typefaces, ascenders climb above
the cap height, in others they sit below.
2:57
And in some cases cap height and ascenders
are aligned.
3:02
This last case though, can affect
readability and letter recognition.
3:05
For instance, let's say you're using
Helvetica where the cap height and
3:09
ascender height are similar.
3:13
You're writing out a headline which
includes the word, ill.
3:15
The uppercase I and those two ls are hard
to tell apart.
3:18
Some might read it as ill, but
3:22
others might read it as the Roman numeral
for three.
3:24
This would be even harder to decipher if
the letters appeared mixed up in
3:27
a coupon code where uppercase, lowercase
and numbers are present.
3:31
I'm not saying don't use Helvetica or
typefaces with a similar cap height and
3:35
ascender height.
3:39
I'm saying pay close attention to your
ascenders and
3:40
descenders, and know what's at stake.
3:42
Let's move on to the next term.
3:44
The typeface we are looking at has Serifs
on it.
3:46
Serifs are projections that finish off the
main strokes of a letter.
3:49
They can some times aid legibility and
letter recognition.
3:53
For example, the problem we just
encountered with the I, l, l would
3:56
not happen here because the serifs are
distinctly different on those two letters.
4:00
Other typefaces forego serifs on their
letter forms.
4:04
These are called Sans Serif typefaces,
sans meaning without.
4:08
Next, let's talk about contrast.
4:12
Contrast can relate to a few different
things in typography.
4:14
The first deals with the actual letter
forms in a typeface.
4:18
A typeface with high contrast would have
thick vertical strokes and
4:21
thin horizontal strokes.
4:25
A typeface with low contrast would appear
as if the horizontals and
4:27
verticals are the same stroke size.
4:31
Contrast can also refer to the actual
text, and how it relates to the page.
4:34
Pure black text on a pure white page
creates high contrast,
4:38
whereas a light grey on a medium grey
creates low contrast.
4:42
We'll later look at when creating high or
low contrast is appropriate.
4:47
Lastly, let's discuss color.
4:51
Like contrast, color can mean a few
different things in typography.
4:54
The first is the simplest, and probably
what comes to your mind.
4:57
It's the actual color of words or elements
like red, blue, yellow et cetera.
5:02
We can create page contrast with changes
in color.
5:06
The second meaning refers to the overall
density of ink or text on a page.
5:10
If we want, we can utilize different
weights of typefaces at different sizes to
5:15
create even color on a page.
5:19
We can have lighter weights at larger
sizes and
5:22
regular weights at smaller sizes.
5:24
Or we can create uneven color by setting
our headings to
5:27
be bolder weights while keeping the
paragraphs the same.
5:30
These heavy areas of color can add
emphasis as needed.
5:34
When we use this term, we'll distinguish
its context to avoid confusion.
5:38
There are many other terms used to
describe different parts of
5:42
letter forms and typography.
5:45
We'll get into them more in future
sessions as we arrive at that stage.
5:47
If you're hungry for more now, you can
also check out the teacher's note
5:52
section which includes links to a couple
glossaries.
5:55
With what we know now from this video,
5:58
we'll be able to better understand the
different types of type in our next video.
6:00