[MUSIC PLAYING]
LIAM SPRADLIN: Hi, I'm Liam, a designer and design
advocate on the Material Design team at Google.
In this video, we're going to learn
how typography works in material design, a strategy for pairing
fonts from Google's catalog of hundreds of open source
typefaces, and how to create a custom type
scale that expresses your product's identity.
Typography and material design is based on a type scale.
A type scale is a hierarchy of type styles
that can be used for different situations throughout a layout.
The Material type scale is a combination
of 13 reusable styles that each have an intended application
and meaning, all the way from big headline styles to body
text captions and buttons.
Working out a good type scale for your app
keeps typography consistent and meaningful to users,
while providing enough stylistic options
to create a compelling look and tone.
This is done by choosing a constrained set of typefaces
and type styles and applying them
across your interface, which we'll do in just a minute.
If your app doesn't already have a specific brand typeface
to use, you can choose the typeface
that shares some characteristics with other parts
of your brand's identity or the tone
that you want to convey in the app.
You can think about things like how the brand's voice would
sound, what shapes are used in the logo,
or whether your brand identity is serious or playful.
More opinionated or stylized display typefaces
are expressive and make a great choice for big headlines
and other selected moments in an app.
Now let's see how type is applied to Material components.
Type is one of the subsystems that allows you
to theme Material components, customizing them
to create something unique.
Each component's typography fits into a category.
For example, the text on a button
belongs to the button category, which
is shared by the buttons in a dialog box and tab labels.
So changing attributes like typeface style, size,
and spacing causes a ripple effect.
It customizes all the typography belonging to that category.
And now that you know how it works,
let's create and apply a custom type scale.
For this example, we'll work in the Build
a Material theme project on Glitch.
We built this project at glitch.com/@material
to make it easy to customize components
with simple code changes.
We'll also open up Google Fonts to choose some high quality
fonts that we can use in our project for free.
First, we'll look for a text typeface
that we can use for most of our components.
And once we find a font, we can copy its import code
from Google Fonts.
And then back on Glitch, we can paste that code
into the mytheme.sess file and update our font family.
If we look at our project now, all the type, as well as
the type scale on the side, has updated.
We can push this even further by choosing a display
typeface that complements what we already have,
adding some extra expression to the larger styles in our type
scale.
So back over on fonts, we'll choose an interesting display
typeface.
And once we've put in that import code,
we'll also need to specify which parts of the type scale
should adopt this new typeface.
I'll paste in some code that tells our theme
to apply this typeface just to the headline styles.
And then back in our project view,
you can see how the updates have cascaded throughout the theme.
If you want to create custom typography that
exposes all the typographic attributes
and values that go into the Material type scale,
you can also check out our new type scale on material.io.
Plugging in any typeface will allow you to get values
that you can then apply in code or in your design
tool of choice, including our design kits on Figma.
To learn more about typography check out
our typography guidance at material.io
and subscribe to our channel for more design
tutorials and inspiration.
[MUSIC PLAYING]