Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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 upRelated 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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up