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
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
We’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.
Further Reading
- Font vs Typeface: the ultimate guide
- A Glossary of Typographic Terms, Adobe
- Typeface Anatomy and Glossary, FontShop
- Type Terms - an animated typographic cheat sheet
Resources
- Toptal Colorblind Web Page Filter
- Color Blind plugin - for Figma
- Design for everyone with these accessibility-focused plugins - Figma
- ChromeLens - Chrome plugin
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 that you understand
what typography is,
0:01
let's talk about some of the terms used
to describe its different elements.
0:04
This will include typefaces,
parts of letters, layouts, and more.
0:08
Instead of ambiguously trying
to describe something like that
0:14
low swoopy part of the lowercase y,
these terms will make it
0:17
much easier to know what you're talking
about as we dive into typography.
0:21
Let's look at the numerous
elements that shape a typeface.
0:26
First, we have the cap height.
0:30
This is simply the height
of the capital letters.
0:32
Next is the baseline, which is
pertinent to both the uppercase and
0:35
lowercase letters as it's the guideline
for which the majority of characters rest.
0:39
The height of the lowercase letter
set is determined by the lowercase x.
0:44
So this is labeled as the x-height.
0:49
The x-height varies across typefaces and
can greatly affect legibility.
0:51
Let's look at that.
0:57
A high x height means the lowercase is
larger in relation to the uppercase.
0:59
Whereas a low x height means the opposite,
it's smaller.
1:04
When smaller font sizes come into play,
a typeface with a high x-height can help
1:08
retain legibility because the lowercase
is larger in relation to the upper case.
1:13
Let's say you have two
different typefaces, and
1:19
both are set at 12 point size.
1:21
One could be easier to read than
the other due to the higher x-height.
1:24
You'll also notice there are certain
areas where some lowercase letters
1:29
descend below the baseline, and
others ascend above the x-height.
1:33
These are called descenders and
ascenders respectively.
1:39
The p here has descender,
and the d has an ascender.
1:42
You might be wondering how
low can descenders go or
1:47
how high can ascenders climb?
1:51
Well, that also varies across typefaces.
1:54
In some typefaces,
ascenders climb up above the cap height.
1:57
In others, they sit below.
2:01
And in some cases, the cap height and
ascenders are aligned.
2:04
This last case, though, can affect
readability and letter recognition.
2:08
For instance,
let's say you're using Helvetica,
2:13
where the cap height and
the ascender height are similar.
2:17
You're writing out a headline
which includes the word ILL.
2:20
The uppercase I, and these two
lowercase L's are hard to tell apart.
2:25
Some might read that as ILL, but others
might read it as the Roman numeral three.
2:31
This would be even harder to decipher if
the letters appeared mixed up in a coupon
2:37
code, where uppercase, lowercase,
and numbers are present.
2:42
I'm not saying don't use Helvetica or
typefaces with a similar cap and
2:47
ascender height.
2:52
I'm saying pay close attention to
your ascenders and descenders, and
2:54
know what's at stake.
2:58
Let's move on to the next term.
3:00
The typeface we are currently
looking at has serifs on it.
3:03
Serifs are projections that finish
off the main strokes of a letter.
3:07
They can sometimes aid legibility and
letter recognition.
3:11
For example, the problem we just
encountered with the ILL would
3:16
not happen here because the serifs are
distinctly different on those two letters.
3:20
Distinctive character shapes
help differentiate letters, and
3:26
serifs help letters flow.
3:30
The shape of letters particularly
helps those with dyslexia and
3:32
reading disabilities.
3:36
Other typefaces forego serifs
on their letter forms.
3:39
These are called sans-serifs,
sans meaning without.
3:42
Next, let's talk about contrast.
3:48
Contrast can relate to a few
different things in typography.
3:51
The first deals with the actual
letter forms in a typeface.
3:54
A typeface with high contrast would
have thick vertical strokes and
3:59
thin horizontal strokes.
4:03
A typeface with low contrast
would have little to no
4:06
difference in stroke thickness.
4:09
Contrast can also refer to the actual text
and how it relates to the background.
4:13
Pure black text on a pure white
background creates high contrast.
4:20
Whereas a light gray on a medium
gray creates low contrast.
4:25
Later, we'll look at when creating high or
low contrast is appropriate.
4:31
According to the WCAG contrast guidelines,
body text color should
4:36
have a contrast ratio of at least 4.5:1
when compared to its background color.
4:41
Large text that is 18 points and
4:49
larger should have a contrast
ratio of at least 3:1.
4:51
Lastly, let's discuss color.
4:56
Like contrast, color can mean a few
different things in typography.
5:00
The first is the simplest and
is probably what comes to your mind.
5:04
It's the actual color of text such as red,
blue, yellow, etc.
5:08
We can create page contrast
with changes in color.
5:15
Common color blindness conditions
include red/green and blue/yellow.
5:20
People with color
blindness have difficulty
5:26
discerning the differences
between the two.
5:29
Therefore, avoid pairing color text and
backgrounds in those colors.
5:32
There are browser plugins and other tools
which allow you to test how those with
5:38
color blindnesses see your design.
5:42
Check out the teacher's notes for links.
5:44
The second meaning refers to the overall
density of ink or text on a page.
5:48
If we want, we can utilize different
weights of the typeface at different sizes
5:53
to create even color on a page.
5:58
We have lighter weights at larger sizes
and regular weights of smaller sizes.
6:01
Or we can create uneven color by setting
our headings to be bolder weights
6:07
while keeping the paragraphs the same.
6:12
These heavy areas of color can
create emphasis if needed.
6:15
When we use this term, we'll distinguish
its context to avoid confusion.
6:21
There are many other terms used
to describe different parts of
6:25
letter forms and typography.
6:29
If you're hungry for more,
you can also check out the teacher's notes
6:31
which includes links to
a couple of glossaries.
6:35
With what we know now from this video,
6:38
we'll be able to better understand the
different types of type in our next video.
6:41
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