# Angular Material typography ### What is typography? Typography is a way of arranging type to make text legible, readable, and appealing when displayed. Angular Material's typography is based on the guidelines from the [Material Design spec][1] and is arranged into typography levels. Each level has a `font-size`, `line-height` and `font-weight`. The available levels are: | Name | CSS classes | Description | |-----------------|----------------------------------|-----------------------------------------------------------------------------| | `display-4` | `.mat-display-4` | Large, one-off header, usually at the top of the page (e.g. a hero header). | | `display-3` | `.mat-display-3` | Large, one-off header, usually at the top of the page (e.g. a hero header). | | `display-2` | `.mat-display-2` | Large, one-off header, usually at the top of the page (e.g. a hero header). | | `display-1` | `.mat-display-1` | Large, one-off header, usually at the top of the page (e.g. a hero header). | | `headline` | `.mat-h1`, `.mat-headline` | Section heading corresponding to the `

` tag. | | `title` | `.mat-h2`, `.mat-title` | Section heading corresponding to the `

` tag. | | `subheading-2` | `.mat-h3`, `.mat-subheading-2` | Section heading corresponding to the `

` tag. | | `subheading-1` | `.mat-h4`, `.mat-subheading-1` | Section heading corresponding to the `

` tag. | | `body-1` | `.mat-body`, `.mat-body-1` | Base body text. | | `body-2` | `.mat-body-strong`, `.mat-body-2`| Bolder body text. | | `caption` | `.mat-small`, `.mat-caption` | Smaller body and hint text. | | `button` | None. Used only in components. | Buttons and anchors. | | `input` | None. Used only in components. | Form input fields. | The typography levels are collected into a typography config which is used to generate the CSS. ### Usage To get started, you first include the `Roboto` font with the 300, 400 and 500 weights. You can host it yourself or include it from [Google Fonts][2]: ```html ``` Now you can add the appropriate CSS classes to the elements that you want to style: ```html

Jackdaws love my big sphinx of quartz.

The quick brown fox jumps over the lazy dog.

``` By default, Angular Material doesn't apply any global CSS. To apply the library's typographic styles more broadly, you can take advantage of the `mat-typography` CSS class. This class will style all descendant native elements. ```html

This header is unstyled

This header will be styled

``` ### Customization Typography customization is an extension of Angular Material's Sass-based theming. Similar to creating a custom theme, you can create a custom **typography configuration**. ```scss @import '~@angular/material/theming'; // Define a custom typography config that overrides the font-family as well as the // `headlines` and `body-1` levels. $custom-typography: mat-typography-config( $font-family: 'Roboto, monospace', $headline: mat-typography-level(32px, 48px, 700), $body-1: mat-typography-level(16px, 24px, 500) ); ``` As the above example demonstrates, a typography configuration is created by using the `mat-typography-config` function, which is given both the font-family and the set of typographic levels described earlier. Each typographic level is defined by the `mat-typography-level` function, which requires a `font-size`, `line-height`, and `font-weight`. **Note** that the `font-family` has to be in quotes. Once the custom typography definition is created, it can be consumed to generate styles via different Sass mixins. ```scss // Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.). @include mat-base-typography($custom-typography); // Override typography for a specific Angular Material components. @include mat-checkbox-typography($custom-typography); // Override typography for all Angular Material, including mat-base-typography and all components. @include angular-material-typography($custom-typography); ``` If you're using Material's theming, you can also pass in your typography config to the `mat-core` mixin: ```scss // Override the typography in the core CSS. @include mat-core($custom-typography); ``` For more details about the typography functions and default config, see the [source](https://github.com/angular/components/blob/master/src/material/core/typography/_typography.scss). ### Material typography in your custom CSS Angular Material includes typography utility mixins and functions that you can use to customize your own components: * `mat-font-size($config, $level)` - Gets the `font-size`, based on the provided config and level. * `mat-font-family($config)` - Gets the `font-family`, based on the provided config. * `mat-line-height($config, $level)` - Gets the `line-height`, based on the provided config and level. * `mat-font-weight($config, $level)` - Gets the `font-weight`, based on the provided config and level. * `mat-typography-level-to-styles($config, $level)` - Mixin that takes in a configuration object and a typography level, and outputs a short-hand CSS `font` declaration. ```scss @import '~@angular/material/theming'; // Create a config with the default typography levels. $config: mat-typography-config(); // Custom header that uses only the Material `font-size` and `font-family`. .unicorn-header { font-size: mat-font-size($config, headline); font-family: mat-font-family($config); } // Custom title that uses all of the typography styles from the `title` level. .unicorn-title { @include mat-typography-level-to-styles($config, title); } ``` [1]: https://material.io/archive/guidelines/style/typography.html [2]: https://fonts.google.com/