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
I'll cover three main ways that typography affects the user experience.
Further Reading
- Best font for Online Reading
- Don't Make Me Think book by Steve Krug. There's a chapter that covers designing for scanning, not reading (chapter 3 in the 2014 edition).
- Low-Contrast Text Is Not the Answer
- Contrast Checker by WebAIM
- ARIA MDN Web Docs
- Sara Soueidan's blog posts about accessibility
Resources
- Dyslexie Font A font made for people with dyslexia. Available for download and as a Chrome extension.
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
Typography makes or breaks a design.
0:00
When done well, it elicits emotions and
conjures an understanding or
0:03
connection to a brand.
0:07
Equally just as successfully,
0:09
it can slip away unnoticed,
as it makes reading so easy and
0:11
pleasurable that the reader doesn't
fixate on the letter forms themselves.
0:15
The typography communicates
without getting in the way.
0:20
Poor typography gives people a lower
impression of a brand, product, or
0:24
service.
0:28
And even worse, it can make
an experience difficult or confusing.
0:29
I'll cover three main ways that
typography affects the user experience.
0:34
First, typography is a major
component of branding.
0:40
Look at any products you use,
and observe the typography.
0:43
The company has chosen a typeface
that aligns with the brand message.
0:47
It also aligns and
differentiates itself from other brands.
0:51
Typefaces conjure various connotations
that are influenced by culture and
0:55
cognitive biases, and
they affect how we feel about the brands.
1:00
Second, readability is important.
1:04
The shape of letters, space between
letters, space between lines, and
1:08
width of lines all affect a person's
ability to easily read text.
1:13
It's so common for
1:17
us busy humans to quickly scan text
instead of reading every word.
1:19
So improving the scannability of text
is something UX designers seek out.
1:24
Third, let's touch on accessibility.
1:30
Accessibility is a core
component of product design,
1:33
because it means to make a product or
service easy to use.
1:36
Designing for
accessibility benefits everyone,
1:39
not just those who are differently abled.
1:43
Remember that the people who use a product
you're designing may have a physical,
1:45
cognitive, language,
or learning disability.
1:50
They may have colorblindness,
low vision, or
1:54
use a screen reader to navigate the web.
1:57
As far as a design goes, if you adhere
to the best practices of typography,
2:00
your design will naturally be
set out to be quite accessible.
2:04
Choosing a typeface with distinctive,
easy to read letters and
2:07
appropriate contrasts,
then correctly applying heading levels,
2:11
creating clear visual hierarchy,
maintaining proper alignment, and
2:16
making the text adequately
sized will benefit everyone.
2:20
Here are a few specific tips.
2:25
People with visual impairments use screen
readers which read the text on the screen.
2:27
Therefore, for non-text-based media,
such as videos,
2:32
it's advisable to add a way to
see the captions or transcripts.
2:36
The same is true for photos, which
should contain either visual captions or
2:41
a description implemented with code.
2:45
Don't make text into images,
add text to websites and
2:49
apps using markdown such as HTML, so
it's accessible to screen readers.
2:52
Also, text added in
markdown can be enlarged,
2:58
whereas raster images get
pixelated when enlarged.
3:01
If you must include text in images,
3:05
add the text to the image element with an
alt tag when it gets implemented in code.
3:07
When conveying info such
as state changes and
3:13
actions, don't rely on just one indicator.
3:15
For example, when communicating a status,
such as a success or
3:19
error, include an additional
design change beyond simply color.
3:23
When the design is implemented,
there are guidelines in place for
3:28
developing accessible websites.
3:31
If you're interested in the coding
details, check out the teacher's notes.
3:33
In the upcoming video,
3:38
we'll learn some terms that will help
us talk about typography and typefaces.
3:39
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