"Genesis Framework Foundations" was retired on June 9, 2017.
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
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