Typography in Angular Material 18

In this quick guide, we will learn the usage of typography and modifications with CSS variables for Angular Material 18

16th June, 2024 — 4 min read

## Angular Material 18 Project We will simply use the project from my earlier article [Angular Material Theming with CSS Variables](https://angular-material.dev/articles/angular-material-theming-css-vars). You can clone it from [GitHub](https://github.com/Angular-Material-Dev/angular-material-theming-css-vars). ## The `typography-hierarchy` mixin `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 include it in `src/styles.scss`: ```scss :root { @include mat.all-component-themes($angular-material-theming-css-vars-theme); @include mat.typography-hierarchy($angular-material-theming-css-vars-theme); // 👈 Added @include mat.system-level-colors($angular-material-theming-css-vars-theme); @include mat.system-level-typography($angular-material-theming-css-vars-theme); } ``` Now if you add header elements, like `

`, you will notice that it has a set of styling applied it to it. Earlier, `

` did not have any custom styling. Try to comment out `typography-hierarchy` to see the difference. ## Generated CSS Classes The `typography-hierarchy` generates a set of CSS classes based on type scale levels. A **type scale** is a selection of font styles that can be used across an app. There are `large`, `medium`, and `small` variations for **Display**, **Headline**, **Title**, **Body** and **Label**. You can read more about it [here](https://material.angular.io/guide/typography#type-scale-levels). The table below lists the CSS classes emitted and the native elements styled: | CSS class | Typescale level | Native Element | | ---------------------- | ----------------- | -------------- | | `.mat-display-large` | `display-large` | `

` | | `.mat-display-medium` | `display-medium` | `

` | | `.mat-display-small` | `display-small` | `

` | | `.mat-headline-large` | `headline-large` | `

` | | `.mat-headline-medium` | `headline-medium` | `

` | | `.mat-headline-small` | `headline-small` | `
` | | `.mat-title-large` | `title-large` | None | | `.mat-title-medium` | `title-medium` | None | | `.mat-title-small` | `title-small` | None | | `.mat-body-large` | `body-large` | None | | `.mat-body-medium` | `body-medium` | None | | `.mat-body-small` | `body-small` | None | | `.mat-label-large` | `label-large` | None | | `.mat-label-medium` | `label-medium` | None | | `.mat-label-small` | `label-small` | None | ## Reading typescale properties There are 2 ways to read: 1. Through `get-theme-typography` SCSS function - You can read more about it [here](https://material.angular.io/guide/theming-your-components#reading-typescale-properties) 2. Through CSS Variables Let's see how we can use CSS variables to read typescale properties. ### Through CSS Variables If you take a look at devtools in browser, you will notice many CSS variables for typography. And it may become difficult to explore around so many variables and find the correct one. To get the needed CSS variable, you can keep 3 things in mind and it will help you get the correct CSS variable: 1. Pre-typescale levels 1. `display` 2. `headline` 3. `title` 4. `body` 5. `label` 2. Variations 1. `large` 2. `medium` 3. `small` 3. Properties 1. `font` (The CSS font shorthand, includes all font properties except letter-spacing) - No token 2. `font-family` - `font` 3. `font-size` - `size` 4. `font-weight` - `weight` 5. `line-height` - `line-height` 6. `letter-spacing` - `tracking` Now, just use below format to get the correct CSS variable: ```css .some-class { some-property: var(--sys---); } ``` So, for example, to get `font` of `display-large`, you would write CSS like below: ```css .display-large-clone { font: var(--sys-display-large); /* As --sys-display-large-font does not include letter-spacing, make sure to include that, too */ letter-spacing: var(--sys-display-large-tracking); } ``` One more example, to get `font-weight` of `
`, you will write CSS like below: ```css .h6-font-weight { font-weight: var(--sys-headline-small-weight) } ``` ## Modifying typescale properties To modify any of typescale properties, simply override it's CSS variables value. So, for example, to change `font-size` and `line-height` of `

`, you can write below CSS ```css :root { --sys-display-large-size: 128px; --sys-display-large-line-height: 1.25; /*

(and display-large) uses --sys-display-large, hence we also need to update that variable to see the changes */ --sys-display-large: 400 var(--sys-display-large-size) / var(--sys-display-large-line-height) Roboto, sans-serif } ``` Let's create an input through which user can change the `font-size`s of button labels and headings. ```html Flat Button Font Size Heading Font Size ``` ```ts changeFlatButtonFontSize(ev: Event) { const size = (ev.target as HTMLInputElement).value ?? '14'; const targetElement = document.documentElement; targetElement.style.setProperty('--sys-label-large-size', size + 'px'); } changeHeadingFontSize(ev: Event) { const size = (ev.target as HTMLInputElement).value ?? '56.992'; const targetElement = document.documentElement; targetElement.style.setProperty('--sys-display-large-size', size + 'px'); // setting the line-height relationally targetElement.style.setProperty('--sys-display-large-line-height', '1.25'); //

(and display-large) uses --sys-display-large, hence we also need to update that variable to see the changes targetElement.style.setProperty( '--sys-display-large', '400 var(--sys-display-large-size) / var(--sys-display-large-line-height) Roboto, sans-serif' ); } ``` Once you make above changes, the output will look like below: ![embedded video](https://ik.imagekit.io/en2qz3t5n/angular-material.dev/Typography%20in%20Angular%20Material%2018/typography_css_vars_kyksm7.mp4) ## Live Playground

Dharmen Shah
Written by Dharmen Shah

I have around 8+ years of experience in IT industry. I have got opportunity to work at different companies with different technologies, mostly focused on Front-end, like Angular, React, Next, vanilla web stack (HTML, CSS, JavaScript).

You can find me on Twitter, Linkedin and Github.

Discuss online

Share this article

Read more

View all articles

Learn more

View courses page

Support Free Content Creation

Contributions & Support

Even though the courses and articles are available at no cost, your support in my endeavor to deliver top-notch educational content would be highly valued. Your decision to contribute aids me in persistently improving the course, creating additional resources, and maintaining the accessibility of these materials for all. I'm grateful for your consideration to contribute and make a meaningful difference!

Envelop
Don't miss any update

Stay up to date

Subscribe to the newsletter to stay up to date with articles, courses and much more!

Angular Material Dev

Angular Material Dev is one place stop for developers to learn about integrating Material Design in Angular applications like a pro.

Find us on X (Twitter) and LinkedIn