How Typography Affects the User Experience3:43 with Hope Armstrong
I'll cover three main ways that typography affects the user experience.
- Typography for Glanceable Reading: Bigger Is Better by Nielsen Norman Group
- 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 by Nielsen Norman Group
- Contrast Checker by WebAIM
- ARIA MDN Web Docs
- Sara Soueidan's blog posts about accessibility and talks
- Dyslexie Font A font made for people with dyslexia. Available for download and as a Chrome extension.
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 up