1
00:00:00,000 --> 00:00:03,800
Typography makes or breaks a design.

2
00:00:03,800 --> 00:00:07,540
When done well, it elicits emotions and
conjures an understanding or

3
00:00:07,540 --> 00:00:09,600
connection to a brand.

4
00:00:09,600 --> 00:00:11,360
Equally just as successfully,

5
00:00:11,360 --> 00:00:15,550
it can slip away unnoticed,
as it makes reading so easy and

6
00:00:15,550 --> 00:00:19,580
pleasurable that the reader doesn't
fixate on the letter forms themselves.

7
00:00:20,600 --> 00:00:23,480
The typography communicates
without getting in the way.

8
00:00:24,490 --> 00:00:28,690
Poor typography gives people a lower
impression of a brand, product, or

9
00:00:28,690 --> 00:00:29,970
service.

10
00:00:29,970 --> 00:00:34,500
And even worse, it can make
an experience difficult or confusing.

11
00:00:34,500 --> 00:00:38,590
I'll cover three main ways that
typography affects the user experience.

12
00:00:40,010 --> 00:00:43,810
First, typography is a major
component of branding.

13
00:00:43,810 --> 00:00:47,014
Look at any products you use,
and observe the typography.

14
00:00:47,014 --> 00:00:51,103
The company has chosen a typeface
that aligns with the brand message.

15
00:00:51,103 --> 00:00:55,220
It also aligns and
differentiates itself from other brands.

16
00:00:55,220 --> 00:01:00,301
Typefaces conjure various connotations
that are influenced by culture and

17
00:01:00,301 --> 00:01:04,678
cognitive biases, and
they affect how we feel about the brands.

18
00:01:04,678 --> 00:01:08,590
Second, readability is important.

19
00:01:08,590 --> 00:01:13,150
The shape of letters, space between
letters, space between lines, and

20
00:01:13,150 --> 00:01:17,950
width of lines all affect a person's
ability to easily read text.

21
00:01:17,950 --> 00:01:19,080
It's so common for

22
00:01:19,080 --> 00:01:24,280
us busy humans to quickly scan text
instead of reading every word.

23
00:01:24,280 --> 00:01:29,090
So improving the scannability of text
is something UX designers seek out.

24
00:01:30,400 --> 00:01:33,130
Third, let's touch on accessibility.

25
00:01:33,130 --> 00:01:36,359
Accessibility is a core
component of product design,

26
00:01:36,359 --> 00:01:39,737
because it means to make a product or
service easy to use.

27
00:01:39,737 --> 00:01:43,123
Designing for
accessibility benefits everyone,

28
00:01:43,123 --> 00:01:45,961
not just those who are differently abled.

29
00:01:45,961 --> 00:01:50,873
Remember that the people who use a product
you're designing may have a physical,

30
00:01:50,873 --> 00:01:54,640
cognitive, language,
or learning disability.

31
00:01:54,640 --> 00:01:57,551
They may have colorblindness,
low vision, or

32
00:01:57,551 --> 00:02:00,041
use a screen reader to navigate the web.

33
00:02:00,041 --> 00:02:04,333
As far as a design goes, if you adhere
to the best practices of typography,

34
00:02:04,333 --> 00:02:07,893
your design will naturally be
set out to be quite accessible.

35
00:02:07,893 --> 00:02:11,932
Choosing a typeface with distinctive,
easy to read letters and

36
00:02:11,932 --> 00:02:16,273
appropriate contrasts,
then correctly applying heading levels,

37
00:02:16,273 --> 00:02:20,838
creating clear visual hierarchy,
maintaining proper alignment, and

38
00:02:20,838 --> 00:02:25,430
making the text adequately
sized will benefit everyone.

39
00:02:25,430 --> 00:02:27,690
Here are a few specific tips.

40
00:02:27,690 --> 00:02:32,700
People with visual impairments use screen
readers which read the text on the screen.

41
00:02:32,700 --> 00:02:36,512
Therefore, for non-text-based media,
such as videos,

42
00:02:36,512 --> 00:02:41,450
it's advisable to add a way to
see the captions or transcripts.

43
00:02:41,450 --> 00:02:45,384
The same is true for photos, which
should contain either visual captions or

44
00:02:45,384 --> 00:02:47,420
a description implemented with code.

45
00:02:49,310 --> 00:02:52,870
Don't make text into images,
add text to websites and

46
00:02:52,870 --> 00:02:57,360
apps using markdown such as HTML, so
it's accessible to screen readers.

47
00:02:58,520 --> 00:03:01,740
Also, text added in
markdown can be enlarged,

48
00:03:01,740 --> 00:03:04,540
whereas raster images get
pixelated when enlarged.

49
00:03:05,640 --> 00:03:07,606
If you must include text in images,

50
00:03:07,606 --> 00:03:13,380
add the text to the image element with an
alt tag when it gets implemented in code.

51
00:03:13,380 --> 00:03:15,820
When conveying info such
as state changes and

52
00:03:15,820 --> 00:03:19,640
actions, don't rely on just one indicator.

53
00:03:19,640 --> 00:03:23,650
For example, when communicating a status,
such as a success or

54
00:03:23,650 --> 00:03:28,110
error, include an additional
design change beyond simply color.

55
00:03:28,110 --> 00:03:31,090
When the design is implemented,
there are guidelines in place for

56
00:03:31,090 --> 00:03:33,660
developing accessible websites.

57
00:03:33,660 --> 00:03:37,190
If you're interested in the coding
details, check out the teacher's notes.

58
00:03:38,320 --> 00:03:39,585
In the upcoming video,

59
00:03:39,585 --> 00:03:43,430
we'll learn some terms that will help
us talk about typography and typefaces.