Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Typography for Designers

Well done!

You have completed Typography for Designers!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

How Typography Affects the User Experience

3:43 with Hope Armstrong

I'll cover three main ways that typography affects the user experience.

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