Typography5:36 with Anwar Montasir
Typographic guidelines within design systems cover how to use type that's consistent with a company's brand as well as how to create inviting, readable body copy.
Typographic guidelines within design systems cover how to use type 0:00 that's consistent with a company's brand, 0:05 as well as how to create inviting. readable body copy. 0:08 Expect to see guidelines covering typeface choice. 0:13 In addition to providing rules on how to use brand typefaces in a design, 0:17 the design system should ideally guide you toward where on the Internet 0:22 each typeface can be found. 0:27 For example, Audi uses its own typeface called Audi Type. 0:29 And designers can download it from the Audi UI system docs. 0:35 On the other hand, 0:43 Shopify's Polaris utilizes what's called a system font stack. 0:43 This means the operating system uses one of its native, or pre-installed, 0:49 typefaces. Although the typographic experience will be less unique, 0:55 A system font stack has two advantages: faster loading time, because 1:00 the browser uses the font built into the machine, and a familiar user experience. 1:05 iOs users are used to seeing San Francisco already. 1:12 Same goes for Android users and the Roboto typeface. 1:16 You'll likely encounter typographic rules for weight and emphasis. 1:20 That is, when and how text can be bolded or italicized and 1:26 whether any lighter font weights are acceptable. 1:30 The design system should also determine rules for font size and line-height. 1:35 This latter term is a value determining the vertical space between lines of copy. 1:41 Type scale and line-height are usually calculated in tandem, often 1:47 using a mathematical formula in order to create a pleasing vertical rhythm. 1:52 In the Typesetting guidelines, from the United States Web Design System, 1:59 the recommended amount of line height varies based on context. 2:04 The numbers under Output in this chart 2:09 refer to a multiple of the font size itself. 2:12 Text for buttons and navigation won't wrap onto multiple lines, so 2:16 the line height can equal the font size. 2:21 Headings typically also occupy only one line. 2:24 But on a mobile device, the heading might wrap onto two lines. 2:28 Since the reader shouldn't interpret each line as a separate block of text, 2:32 the distance between lines is kept fairly tight. 2:37 On the other hand, blocks of body copy intended for 2:41 extended reading, such as an informative article or 2:45 blog post, required much more generous space between lines. 2:48 The United States Web Design System specifies setting line height 2:53 at 1.62 times the font size for lengthier body copy. 2:58 The design system will also let you know the correct pixel size for headlines. 3:04 Choosing which heading to apply when laying out body copy is a semantic issue. 3:10 Decisions on heading sizes are made based on a hierarchy of information and 3:16 cannot be made arbitrarily. 3:22 A web page with a confused heading hierarchy is difficult to understand, 3:24 especially for users of screen readers: 3:30 software that reads the text on a page out loud 3:33 to someone who has a vision impairment. 3:37 I'm viewing Wikipedia's article on typography 3:41 with Chrome's element inspector open 3:45 because Wikipedia is a great illustration of a semantic heading structure. 3:48 Wikipedia provides a table of contents 3:54 previewing the upcoming content in outline form. 3:57 That outline reflects a strict system used to apply headings. 4:01 The name of the article typography is an H1, 4:07 meaning heading level number 1, the main sections on the page, 4:12 etymology, history, scope, etc., are heading level number 2. 4:17 If a section has subheadings, and 4:24 history has three of them, heading level number 3 is applied. 4:27 Understanding semantic page structure 4:34 enables designers to hand off a more usable page to developers. 4:36 A proper headings structure makes a page easier to parse visually for 4:41 sighted users. 4:46 And since screen readers navigate content in part by tabbing from heading 4:48 to heading, semantic structure is incredibly important for accessibility. 4:53 Notice what you're not finding in this typography documentation 5:00 is how to apply color to your type. 5:04 Spacing between discrete elements, 5:07 such as the distance between an image and a caption is absent, as well. 5:10 We've discussed color already, and we'll be looking at space in our next lesson. 5:16 Design systems intentionally keep these definitions separate. 5:22 Dictating what text can be what color when, for 5:26 example, would likely create unusably dense documentation. 5:30
You need to sign up for Treehouse in order to download course files.Sign up