Material Design is Google’s Design System. It started as a Google-only system that you bought into the wholesale design system with little to no chance of customizing it.
The new iteration of Material Design does several things that the original did not do well or at all, including framework integrations.
The “new Material” also allows for easier customization and provides SASS/SCSS mixins and functions to do so.
In this post, we’ll look at the typography options available to Material Design, both standard and customized.
Setting up
There are two ways to set up a Material Design project. We’ll talk about them below.
The easy way
The easy way loads the entire library of CSS functions and scripts from a CDN.
We also load Roboto and Material Design Icons from Google Fonts.
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/material-components-web.min.css">
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono|Material+Icons">
<script src="https://unpkg.com/[email protected]/dist/material-components-web.min.js"></script>
This will load all of Material Design, whether we use it or not. We’ll have to decide if this is worth the extra download sizes.
This method will not let you customize individual packages so, unless you’re OK with the defaults this may not be the best option.
The hard way
The hard way uses WebPack and SASS. The typography module doesn’t use Javascript so we’ll skip it in this example.
The first step is to get WebPack and plugins configured. The plugins are:
The command too install the Node modules is:
npm install --save-dev webpack \
webpack-cli \
webpack-dev-server \
css-loader \
sass-loader \
node-sass \
extract-loader \
file-loader \
autoprefixer
We then write a webpack.config.js to process the SCSS file that we’ll create later in the process.
const autoprefixer = require('autoprefixer');
module.exports = [{
entry: './scss/app.scss',
output: {
// style-bundle.js is necessary
// for webpack to compile but never used
filename: 'style-bundle.js',
},
module: {
rules: [{
test: /\.scss$/,
use: [
{
loader: 'file-loader',
options: {
name: 'bundle.css',
},
},
{ loader: 'extract-loader' },
{ loader: 'css-loader' },
{ loader: 'sass-loader' },
]
}]
},
},
];
We are then ready to install the specific modules that we want to work with. In this case, typography.
npm install @material/typography
Finally, we need to import the component’s SCSS using the @import statement.
We can then add any additional styles that we need.
@import "@material/typography/mdc-typography";
An Example
This example covers the basic layout of the site
<body class="mdc-typography">
<h1 class="mdc-typography--headline1">Towards the Splendid City</h1>
<h2 class="mdc-typography--headline2">Pablo Neruda</h2>
<h3 class="mdc-typography--headline3">Nobel Lecture, December 13, 1971</h3>
<p class="mdc-typography--body1">My speech is going to be a long journey, a trip that I have taken through regions that are distant and antipodean, but not for that reason any less similar to the landscape and the solitude in Scandinavia.…</p>
<body>
All material design components are built with this typography already baked in. For elements that are not part of Material Design, we can use the following classes as I did in the above example.
Material Design Typography Classes
| CSS Class |
Description |
mdc-typography |
Sets the font to Roboto |
mdc-typography--headline1 |
Sets font properties as Headline 1 |
mdc-typography--headline2 |
Sets font properties as Headline 2 |
mdc-typography--headline3 |
Sets font properties as Headline 3 |
mdc-typography--headline4 |
Sets font properties as Headline 4 |
mdc-typography--headline5 |
Sets font properties as Headline 5 |
mdc-typography--headline6 |
Sets font properties as Headline 6 |
mdc-typography--subtitle1 |
Sets font properties as Subtitle 1 |
mdc-typography--subtitle2 |
Sets font properties as Subtitle 2 |
mdc-typography--body1 |
Sets font properties as Body 1 |
mdc-typography--body2 |
Sets font properties as Body 2 |
mdc-typography--caption |
Sets font properties as Caption |
mdc-typography--button |
Sets font properties as Button |
mdc-typography--overline |
Sets font properties as Overline |
Customizing Material Design Typography
Material design typography also offers you SCSS mixins to customize how typography will work in the document.
| Mixin |
Description |
mdc-typography-base |
Sets the font to Roboto |
mdc-typography($style) |
Applies one of the typography styles, including setting the font to Roboto. |
mdc-typography-overflow-ellipsis |
Truncates overflow text to one line with an ellipsis. Only works for content using display: block or display: inline-block |
mdc-typography-baseline-top($distance) |
Sets the baseline height of a text element from top. |
mdc-typography-baseline-bottom($distance) |
Sets the distance from text baseline to bottom. This mixin should be combined with mdc-typography-baseline-top when setting baseline distance to following text element. |
Possible values for $style
- headline1
- headline2
- headline3
- headline4
- headline5
- headline6
- subtitle1
- subtitle2
- body1
- body2
- caption
- button
- overline
This gives us one level of customization but it won’t change the defaults, it will only use the defaults for the elements we’re working with.
If you’re familiar with SASS you can use
All styles can be overridden using Sass global variables with the format $mdc-typography-styles-{style} before the component is imported.
The variable should contain a map that with all the properties we want to override for a particular style.
Assuming that the fonts are available on the system or loaded using @font-face we can use code like this to change the global font defaults for the document.
$mdc-typography-font-family: unquote("Arial, Helvetica, sans-serif");
// Imports and the rest of our code goes here
unquote is part of the SASS standard library.
We can also change the value of multiple elements on the same page. Assuming, again, that Marvin Vision was available on your system we can customize styles for both headline1 and headline2.
We can do the same thing with any style available.
$mdc-typography-styles-headline1: (
font-family: unquote("MarvinVision, Helvetica, sans-serif")
);
$mdc-typography-styles-headline2: (
font-family: unquote("Arial, Helvetica, sans-serif"),
font-size: 3.25rem
);
// Imports and the rest of our code goes here
So far we’ve concentrated on how to use the built-in styles from Material Design. There is nothing to prevent us from mixing and matching material design typography with other design elements or art directing this kind of mixed application.
A full example of Material Design typography is in this Github repo
Another example is how Una Kravetz created a Material Design theme using variable fonts from Google Fonts
It’ll be interesting to see what we can do with Material Design moving forward.
References
