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

Introduction to Design Systems

Well done!

You have completed Introduction to Design Systems!

Sign up for Treehouse Back to Library

Typography

5: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.

Further reading

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up