Using material design for typography work

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