# Modify typography > Typography is a way of arranging type to make text legible, readable, and appealing when displayed. Angular Material's [theming system](https://material.angular.io/guide/theming) supports customizing the typography settings for the library's components. Additionally, Angular Material provides APIs for applying typography styles to elements in your own application. When we installed Angular Material through schematics, it set up the font asset for us in `index.html`: ```html ``` And to support `Roboto`, it also added some global styles in `styles.scss`: ```scss body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } ``` ## Typography level In the Material theme, each set of typography is categorised in levels based on which part of the application's structure it corresponds to, such as a header. You can learn more about it at [typography levels from the 2014 version of the Material Design specification](https://material.io/archive/guidelines/style/typography.html#typography-styles). | Name | CSS Class | Native Element | Description | | ------------ | --------------------------------------- | -------------- | -------------------------------------------------------------------- | | `headline-1` | `.mat-headline-1` | None | One-off header, usually at the top of the page (e.g. a hero header). | | `headline-2` | `.mat-headline-2` | None | Same as `headline-1` | | `headline-3` | `.mat-headline-3` | None | Same as `headline-1` | | `headline-4` | `.mat-headline-4` | None | Same as `headline-1` | | `headline-5` | `.mat-headline-5` or `.mat-h1` | `

` | Section heading corresponding to the `

` tag. | | `headline-6` | `.mat-headline-6` or `.mat-h2` | `

` | Section heading corresponding to the `

` tag. | | `subtitle-1` | `.mat-subtitle-1` or `.mat-h3` | `

` | Section heading corresponding to the `

` tag. | | `subtitle-2` | `.mat-subtitle-2` or `.mat-body-strong` | None | Section heading corresponding to the `

` tag. | | `body-1` | `.mat-h4` or `.mat-body-1` | `

` | Base body text. | | `body-2` | `.mat-body` or `.mat-body-2` | Body text | Secondary body text. | | `caption` | `.mat-small` or `.mat-caption` | None | Smaller body and hint text. | | `button` | None | None | Buttons and anchors. | | `input` | None | None | Form input fields. | ## Define a level You can define a typography level with the `define-typography-level` SASS function. This function accepts, in order, CSS values for `font-size`, `line-height`, `font-weight`, `font-family`, and `letter-spacing`. You can also specify the parameters by name, as demonstrated in the example below. ```scss @use '@angular/material' as mat; $my-custom-level: mat.define-typography-level( $font-family: Roboto, $font-weight: 400, $font-size: 1rem, $line-height: 1, $letter-spacing: normal, ); ``` The `$font-family` and `$line-height` are optional. If you don't provide value for `$line-height`, it will be same as `$font-size`. ## Typography config Angular Material handles all those levels using **typography config**. Angular Material represents this config as a SASS map.This map contains the styles for each level, keyed by name. You can create a typography config with the `define-typography-config` SASS function. Every parameter for `define-typography-config` is optional; the styles for a level will default to Material Design's baseline if unspecified. ```scss @use '@angular/material' as mat; $my-custom-typography-config: mat.define-typography-config( $headline-1: mat.define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em), $headline-2: mat.define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em), $headline-3: mat.define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em), $headline-4: mat.define-typography-level(34px, 40px, 400), $headline-5: mat.define-typography-level(24px, 32px, 400), // ... ); ``` For this course, we will change the typography and we will use [Poppins](https://fonts.google.com/specimen/Poppins) for headings, and for rest we will use [Inter](https://fonts.google.com/specimen/Inter). Let’s see how. ### Including font assets First, we will remove `Roboto` and add the `Poppins` and `Inter` fonts at the `` in `index.html`: ```html ``` ### Font-family variables Next, create a file `styles/typography/_config.scss` and create a variable in it: ```scss // src/styles/typography/_config.scss $heading-font-family: "'Poppins', sans-serif"; $regular-font-family: "'Inter', sans-serif"; ``` ### Create config Now it’s time to create the config using `define-typography-config`: ```scss // src/styles/typography/_config.scss @use '@angular/material' as mat; $heading-font-family: "'Poppins', sans-serif"; $regular-font-family: "'Inter', sans-serif"; $my-app-typography: mat.define-typography-config( $font-family: $regular-font-family, $headline-1: mat.define-typography-level($font-family: $heading-font-family, $font-size: 112px), $headline-2: mat.define-typography-level($font-family: $heading-font-family, $font-size: 56px), $headline-3: mat.define-typography-level($font-family: $heading-font-family, $font-size: 45px, $line-height: 48px), $headline-4: mat.define-typography-level($font-family: $heading-font-family, $font-size: 34px, $line-height: 40px), $headline-5: mat.define-typography-level($font-family: $heading-font-family, $font-size: 24px, $line-height: 32px), $headline-6: mat.define-typography-level($font-family: $heading-font-family, $font-size: 20px, $line-height: 32px), $subtitle-1: mat.define-typography-level($font-family: $heading-font-family, $font-size: 18px, $line-height: 28px), $subtitle-2: mat.define-typography-level($font-family: $heading-font-family, $font-size: 18px, $line-height: 24px), $body-2: mat.define-typography-level($font-size: 16px), $body-1: mat.define-typography-level($font-size: 16px), $button: mat.define-typography-level($font-size: 16px), ); ``` Notice that we are not passing `$font-family` for `$body-2`, `$body-1`, and `$button`. As we are setting `$font-family: $regular-font-family` very first in config, it will take that font-family as default one if not provided in levels. ## Apply typography in application First, let's apply typography to our theme, so that all components have the typography applied to them: ```scss // src/styles/themes/_all.scss //rest remains same @use "../typography/config" as config; $my-app-light-theme: mat.define-light-theme( ( // rest remains same typography: config.$my-app-typography // <-- added ) ); ``` In addition to styles shared between components, the `typography-hierarchy` mixin includes CSS classes for styling your application. These CSS classes correspond to the typography levels in your typography config. This mixin also emits styles for native header elements scoped within the `.mat-typography` CSS class. Let's add it in `src/styles.scss`: ```scss // styles.scss // rest remains same @use "./styles/typography/config"; @include mat.typography-hierarchy(config.$my-app-typography); ``` ## Using typography styles in your application Angular Material's native elements’ typography works if content is wrapped within the `.mat-typography` CSS class. If you check the `index.html` file,`mat-typography` class is added to the `` tag. It was done when we ran `ng add @angular/material`. If you don’t want to wrap the whole application in a `mat-typography` class, you can also use individual classes listed in the [levels table](/courses/md-ng/m2-ng-components/modify-typography#typography-level). ## Output after modifying the typography Let’s temporarily modify the content of `` in `index.html`: ```html

Top header (Material Typography doesn't apply here)

Introductory text

``` If you look at the output, you will get an idea how typography works: