:::warning
Download the html (or see [my cache](https://mmalerba.users.x20web.corp.google.com/www/Making%20sense%20of%20Angular%20Material%E2%80%99s%20Typography%20System.html)) to see the font tables rendered in the correct fonts. Font loading is blocked by CSP on hackmd.
:::

# Making sense of Angular Material's Typography System

## Current state
We currently attempt to reconcile three different sets of typography levels:

[2014 Material Design levels](https://material.io/archive/guidelines/style/typography.html#typography-styles)
: These are the original levels when Material Design was first published. Angular Material's typography mixins throughout our library all expect to get a config with these levels. A config with these levels can be created using our `mat-typography-conifg` Sass function.

[2018 Material Design levels](https://material.io/design/typography/the-type-system.html#type-scale)
: These are the new levels Material Design introduced when they did a major spec update in 2018. We don't currently have any Sass function that creates a config with these levels. However, these are the levels used by MDC's typography system. We therefore have [a mapping](https://github.com/angular/components/blob/master/src/material-experimental/mdc-helpers/_mdc-helpers.scss#L21-L52) between the 2014 config and this config to allow us to pass our typography settings through to MDC.

[Google Material levels](https://carbon.googleplex.com/google-material/pages/typography#0b4efd5f-dc99-4e64-a64b-34d17e0d8d44)
: These levels were introduced around the same time as the 2018 levels for the internal Google Material spec. These levels are mostly (oddly they're missing the "button" level) a super-set of the 2018 levels, containing the same levels as the 2018 spec, plus some additional levels that internal applications can take advantage of. The `gmat-typography-config` Sass function can be used to create a config with these levels. However, since our components work with 2014 configs internally, the function also adds levels for the 2014 config, using [this mapping](http://google3/javascript/angular2/components/gmat/typography/typography.scss?l=43-55) to infer what the values should be for the 2014 levels.

The following table lays out how each system maps to the 2014 levels which are consumed in our mixins:
| 2014 Material Design | 2018 Material Design | Google Material |
| -------------------- | -------------------- | --------------- |
| <span class="md2014-display-4">Display 4</span> | <span class="md2018-headline-1">Headline 1</span> | |
| <span class="md2014-display-3">Display 3</span> | <span class="md2018-headline-2">Headline 2</span> | <span class="gm-display-1">Display 1</span> |
| <span class="md2014-display-2">Display 2</span> | <span class="md2018-headline-3">Headline 3</span> | <span class="gm-display-2">Display 2</span> |
| <span class="md2014-display-1">Display 1</span> | <span class="md2018-headline-4">Headline 4</span> | <span class="gm-display-3">Display 3</span> |
| | | <span class="gm-headline-1">Headline 1</span> |
| | | <span class="gm-headline-2">Headline 2</span> |
| | | <span class="gm-headline-3">Headline 3</span> |
| <span class="md2014-headline">Headline</span> | <span class="md2018-headline-5">Headline 5</span> | <span class="gm-headline-4">Headline 4</span> |
| | | <span class="gm-headline-5">Headline 5</span> |
| | | <span class="gm-headline-6">Headline 6</span> |
| <span class="md2014-title">Title</span> | <span class="md2018-headline-6">Headline 6</span> | <span class="gm-subtitle-1">Subtitle 1</span> |
| | | <span class="gm-subtitle-2">Subtitle 2</span> |
| <span class="md2014-subheading-2">Subheading 2</span> | <span class="md2018-subtitle-1">Subtitle 1</span> | <span class="gm-subhead-1">Subhead 1</span> |
| <span class="md2014-subheading-1">Subheading 1^*</span> | <span class="md2018-subtitle-2">Subtitle 2</span> | <span class="gm-subhead-2">Subhead 2</span> |
| <span class="md2014-body-2">Body 2</span> | <span class="md2018-body-1">Body 1</span> | <span class="gm-body-1">Body 1</span> |
| <span class="md2014-body-1">Body 1</span> | <span class="md2018-body-2">Body 2</span> | <span class="gm-body-2">Body 2</span> |
| <span class="md2014-button">Button</span> | <span class="md2018-button">Button</span> | |
| <span class="md2014-caption">Caption</span> | <span class="md2018-caption">Caption</span> | <span class="gm-caption">Caption</span> |
| | <span class="md2018-overline">Overline</span> | <span class="gm-overline">Overline</span> |
| <span class="md2014-input">Input^*</span> | | |
^*Not in the spec, but part of our 2014 typography config.

## Problems with the current state
There are a couple of problems with the current state of our typography:
1. As can be seen in the table above, mapping the 2018 levels and the Google Material levels to the 2014 levels in this way forces an odd mapping between the 2018 and Google Material levels. Since The Google Material levels are mostly a superset of the 2018 levels, we would expect that each 2018 level maps to the level with the same name in the Google Material levels. Instead, 2018's Headline 5 maps to Google Material's Headline 4, because they both map to 2014's Headline.
2. The way `gmat-typography-config` merges the 2014 levels with the Google Material levels is broken. The two level sets have several levels with the same name that do not correspond to the same conceptual level. [The merge](http://google3/javascript/angular2/components/gmat/typography/typography.scss?l=77) overwrites the 2014 level with the Google Material level of the same name. This means that rather than following the intended mapping above, we are actually following a similar mapping, but with Body 1 swapped with Body 2 and Subheading 1 swapped with Subheading 2. See [b/172791807](http://b/172791807).
3. Some of the Google Material mappings are a little strange (e.g. mapping Google Material's Subhead to 2014's Subheading, though they sound similar, causes menus to render with Google Sans font. Mapping Subtitle to Subheading would likely be more correct. [b/173112287](https://b/173112287))

## Proprosed changes
For our non-MDC components that have an MDC equivalent, I don't think we should make any changes to how the Google Material config is mapped. This would create a lot of unnecessary churn. People are either happy with how it works today, or have already added custom CSS to work around it.

For our MDC-based components (and non-MDC ones that have no MDC equivalent) we should change the way Google Material configs map to 2014 configs, so they behave the same way as the 2018 configs. This will cause some screenshot diffs, but will leave us in a more consistent, better state.

We should make an externally avaiable Sass function to create 2018 configs and add normalization code to our typography mixins so they can accept either type of config.

Eventually we should change the typography mixins to read 2018 levels under the hood (instead of normalizing 2018 configs to 2014 configs and reading the 2014 levels). Once this is done we can remove all traces of the 2014 typography system.

The table below shows the proposed mappings to use for the MDC-based components:

| 2014 Material Design | 2018 Material Design | Google Material |
| -------------------- | -------------------- | --------------- |
| | | <span class="gm-display-1">Display 1</span> |
| | | <span class="gm-display-2">Display 2</span> |
| | | <span class="gm-display-3">Display 3</span> |
| <span class="md2014-display-4">Display 4</span> | <span class="md2018-headline-1">Headline 1</span> | <span class="gm-headline-1">Headline 1</span> |
| <span class="md2014-display-3">Display 3</span> | <span class="md2018-headline-2">Headline 2</span> | <span class="gm-headline-2">Headline 2</span> |
| <span class="md2014-display-2">Display 2</span> | <span class="md2018-headline-3">Headline 3</span> | <span class="gm-headline-3">Headline 3</span> |
| <span class="md2014-display-1">Display 1</span> | <span class="md2018-headline-4">Headline 4</span> | <span class="gm-headline-4">Headline 4</span> |
| <span class="md2014-headline">Headline</span> | <span class="md2018-headline-5">Headline 5</span> | <span class="gm-headline-5">Headline 5</span> |
| <span class="md2014-title">Title</span> | <span class="md2018-headline-6">Headline 6</span> | <span class="gm-headline-6">Headline 6</span> |
| | | <span class="gm-subhead-1">Subhead 1</span> |
| | | <span class="gm-subhead-2">Subhead 2</span> |
| <span class="md2014-subheading-2">Subheading 2</span> | <span class="md2018-subtitle-1">Subtitle 1</span> | <span class="gm-subtitle-1">Subtitle 1</span> |
| <span class="md2014-subheading-1">Subheading 1^*</span> | <span class="md2018-subtitle-2">Subtitle 2</span> | <span class="gm-subtitle-2">Subtitle 2</span> |
| <span class="md2014-body-2">Body 2</span> | <span class="md2018-body-1">Body 1</span> | <span class="gm-body-1">Body 1</span> |
| <span class="md2014-body-1">Body 1</span> | <span class="md2018-body-2">Body 2</span> | <span class="gm-body-2">Body 2</span> |
| <span class="md2014-button">Button</span> | <span class="md2018-button">Button</span> | |
| <span class="md2014-caption">Caption</span> | <span class="md2018-caption">Caption</span> | <span class="gm-caption">Caption</span> |
| | <span class="md2018-overline">Overline</span> | <span class="gm-overline">Overline</span> |
| <span class="md2014-input">Input^*</span> | | |
^*Not in the spec, but part of our 2014 typography config.

## Concrete Implementation Plan
The steps below outline how we can fix the typography levels across the board for the MDC components.

1. _**[Done]**_ Create a pair of functions to normalize to either 2014 or 2018 style configs (gm config is just 2018 + bonus levels). `mat-typography-to-2014-config` will check if the 2014 levels are present in the given config, and if not, use the proposed table above to derive them from the 2018 levels. Note that for configs generated by `mat-typography-config` and `gmat-typography-config` this will be a no-op, as those configs both already contain the 2014 levels. `mat-typography-to-2018-config` will check if the 2018 levels are present in the given config, and if not, use the proposed table above to derive them from the 2014 levels.

2. _**[Done]**_ In our legacy components, normalize the typography config that's passed in using `mat-typography-to-2014-config` (a no-op change). In MDC components change them to normalize their config with `mat-typography-to-2018-config` and work with the 2018 levels directly. This will be a visually breaking change, because they are currently using incorrectly mapped levels from `gmat-typography-config` and this will fix it.

3. _**[Done]**_ Add a new external function `mat-mdc-typography-config` that generates a config with the 2018 levels only and an internal function `gmat-mdc-typography-config` that generates a config with the gm levels only. Because the legacy components adopted `mat-typography-to-2014-config` to normalize the config passed in, configs generated by these functions will still work with the legacy components. As people switch from `gmat-typography-config` to `gmat-mdc-typography-config` it should resolve the remaining incorrect styles in the legacy components, caused by the fact that `gmat-typography-config` produces a hybrid 2014/2018 config.
\
**Note:** This could be a good opportunity to switch to using `rem` units for our typography. We can have the new functions generate levels with `rem` measurements to bring us more in line with what MDC does in their typography system.

4. _[Eventually]_ Deprecate and remove `mat-typography-config` and `gmat-typography-config`.

5. _[Eventually]_ After `mat-typography-config` and `gmat-typography-config` are gone we can clean up. We can swith any legacy components that are still around to use the 2018 config directly and get rid of the normalization functions.

<style>
/*
* See: https://fonts.google.com/license/googlerestricted
*/
/* cyrillic */
@font-face {
font-family: 'Google Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/googlesans/v27/4UaGrENHsxJlGDuGo1OIlL3Kwp5MKg.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Google Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/googlesans/v27/4UaGrENHsxJlGDuGo1OIlL3Nwp5MKg.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Google Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/googlesans/v27/4UaGrENHsxJlGDuGo1OIlL3Bwp5MKg.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Google Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/googlesans/v27/4UaGrENHsxJlGDuGo1OIlL3Awp5MKg.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Google Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/googlesans/v27/4UaGrENHsxJlGDuGo1OIlL3Owp4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
font-family: 'Google Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/googlesans/v27/4UabrENHsxJlGDuGo1OIlLU94Yt3CwZ-Pw.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Google Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/googlesans/v27/4UabrENHsxJlGDuGo1OIlLU94YtwCwZ-Pw.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Google Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/googlesans/v27/4UabrENHsxJlGDuGo1OIlLU94Yt8CwZ-Pw.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Google Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/googlesans/v27/4UabrENHsxJlGDuGo1OIlLU94Yt9CwZ-Pw.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Google Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/googlesans/v27/4UabrENHsxJlGDuGo1OIlLU94YtzCwY.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
font-family: 'Google Sans Display';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/googlesansdisplay/v14/ea8FacM9Wef3EJPWRrHjgE4B6CnlZxHVDvr9oS_a.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Google Sans Display';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/googlesansdisplay/v14/ea8FacM9Wef3EJPWRrHjgE4B6CnlZxHVDv39oS_a.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Google Sans Display';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/googlesansdisplay/v14/ea8FacM9Wef3EJPWRrHjgE4B6CnlZxHVDvH9oS_a.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Google Sans Display';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/googlesansdisplay/v14/ea8FacM9Wef3EJPWRrHjgE4B6CnlZxHVDvD9oS_a.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Google Sans Display';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/googlesansdisplay/v14/ea8FacM9Wef3EJPWRrHjgE4B6CnlZxHVDv79oQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
font-family: 'Google Sans Display';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/googlesansdisplay/v14/ea8IacM9Wef3EJPWRrHjgE4B6CnlZxHVBg3etBT7TKx9.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Google Sans Display';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/googlesansdisplay/v14/ea8IacM9Wef3EJPWRrHjgE4B6CnlZxHVBg3etBP7TKx9.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Google Sans Display';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/googlesansdisplay/v14/ea8IacM9Wef3EJPWRrHjgE4B6CnlZxHVBg3etB_7TKx9.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Google Sans Display';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/googlesansdisplay/v14/ea8IacM9Wef3EJPWRrHjgE4B6CnlZxHVBg3etB77TKx9.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Google Sans Display';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/googlesansdisplay/v14/ea8IacM9Wef3EJPWRrHjgE4B6CnlZxHVBg3etBD7TA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fABc4EsA.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCBc4EsA.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBxc4EsA.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCxc4EsA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCBc4EsA.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBxc4EsA.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fCxc4EsA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>

<style>
.md2014-display-4 { font: 300 112px Roboto; }
.md2014-display-3 { font: 400 56px Roboto; }
.md2014-display-2 { font: 400 45px Roboto; }
.md2014-display-1 { font: 400 34px Roboto; }
.md2014-headline { font: 400 24px Roboto; }
.md2014-title { font: 500 20px Roboto; }
.md2014-subheading-2 { font: 400 16px Roboto; }
.md2014-subheading-1 { font: 400 15px Roboto; }
.md2014-body-2 { font: 500 14px Roboto; }
.md2014-body-1 { font: 400 14px Roboto; }
.md2014-button { font: 500 14px Roboto; text-transform: uppercase; }
.md2014-caption { font: 400 12px Roboto; }
.md2014-input { font: 400 16px Roboto; }

.md2018-headline-1 { font: 300 96px Roboto; letter-spacing: -1.5px; }
.md2018-headline-2 { font: 300 60px Roboto; letter-spacing: -0.5px; }
.md2018-headline-3 { font: 400 48px Roboto; }
.md2018-headline-4 { font: 400 34px Roboto; letter-spacing: 0.25px; }
.md2018-headline-5 { font: 400 24px Roboto; }
.md2018-headline-6 { font: 500 20px Roboto; letter-spacing: 0.15px }
.md2018-subtitle-1 { font: 400 16px Roboto; letter-spacing: 0.15px; }
.md2018-subtitle-2 { font: 500 14px Roboto; letter-spacing: 0.1px; }
.md2018-body-1 { font: 400 16px Roboto; letter-spacing: 0.5px; }
.md2018-body-2 { font: 400 14px Roboto; letter-spacing: 0.25px; }
.md2018-button { font: 500 14px Roboto; letter-spacing: 1.25px; text-transform: uppercase; }
.md2018-caption { font: 400 12px Roboto; letter-spacing: 0.4px; }
.md2018-overline { font: 400 10px Roboto; letter-spacing: 1.5px; text-transform: uppercase; }

.gm-display-1 { font: 400 64px 'Google Sans Display'; }
.gm-display-2 { font: 400 56px 'Google Sans Display'; }
.gm-display-3 { font: 400 44px 'Google Sans Display'; }
.gm-headline-1 { font: 400 36px 'Google Sans'; }
.gm-headline-2 { font: 400 32px 'Google Sans'; }
.gm-headline-3 { font: 400 28px 'Google Sans'; }
.gm-headline-4 { font: 400 24px 'Google Sans'; }
.gm-headline-5 { font: 400 22px 'Google Sans'; }
.gm-headline-6 { font: 400 18px 'Google Sans'; }
.gm-subtitle-1 { font: 500 16px Roboto; letter-spacing: 0.2px; }
.gm-subtitle-2 { font: 500 14px Roboto; letter-spacing: 0.25px; }
.gm-subhead-1 { font: 500 16px 'Google Sans'; letter-spacing: 0.1px; }
.gm-subhead-2 { font: 500 14px 'Google Sans'; letter-spacing: 0.25px; }
.gm-body-1 { font: 400 16px Roboto; letter-spacing: 0.1px; }
.gm-body-2 { font: 400 14px Roboto; letter-spacing: 0.2px }
.gm-caption { font: 400 12px Roboto; letter-spacing: 0.3px }
.gm-overline { font: 500 11px Roboto; letter-spacing: 0.8px; text-transform: uppercase; }
</style>

<style>
#doc { min-width: 1300px; }
</style>