article: Typography in Angular Material 18 | Angular Material Dev

[giscus[bot]]

article: Typography in Angular Material 18 | Angular Material Dev

Learn Material Design in Angular, Theming Angular Material Components and Developing your Angular application with Material Design like a pro.

https://angular-material.dev/articles/angular-material-18-typography

[dinirichard]

Please is it possible to change the font to something like ''playfair display" and "lato"

[shhdharmen]

Did you try this: https://material.angular.io/guide/theming#customizing-your-typography?

[Teebo]

Hi Dharmen, is there an Angular material way to configure responsive typography while still using the utility classes like mat-display-large, mat-body-large etc?

[shhdharmen]

Nope, there is not Angular material way to achieve responsive font-sizes. You will need to use your own media queries.

[Teebo]

Ok I see. My understanding is that we can use the utility classes to adjust the font scale, for example use:
mat-display-large - for large screens
mat-display-medium - for medium screens

Is this understanding correct? If so, how will I utilize these classes with media queries?

Or rather, how can we use media queries with the font scales that comes with our angular material typography config without rewriting the fonts scales (adjusting font sizes, line-heights etc) per each media query?

[shhdharmen]

mat-display-large, mat-display-medium, etc, they refer to specific typescale and does not have relation with screen size. Check this table to understand what each typescale mean.

You can use media queries like below to adjust font-sizes:

--sys-display-large-size: calc(1.925rem + 8.1vw)

@media (min-width: 1200px) {
    --sys-display-large-size: 8rem;
}

[Teebo]

Ah I see, that makes sense now. Thank you for this clarification.

[RobertNagy299]

Hi Dharmen! Great article, it helped me get started. However, after talking to my team lead at my company about MAT-3 styling, he told me that directly accessing and modifying the design tokens is a bad practice, because they could easily break.

After doing some research, I managed to find a more "beautiful" way of modifying typography:

1. you define your MAT-3 theme object, like this:

$material-styling-test-theme: mat.define-theme(

      (
        color: (
          theme-type: light,
          primary: mat.$azure-palette,
          tertiary: mat.$blue-palette,
        ),
        typography: (
          // this line is CRUCIAL - without it, the overrides below do not work, and the default typography styles defined internally by angular are applied
          use-system-variables: true,
        ),
        density: (
          scale: 0,
        ),
      )
    );

2. then inside a selector like :root or html, include the following mixin:

 // $overrides overrides the system level design tokens that angular uses internally to set the typography levels
 @include mat.system-level-typography(
    $material-styling-test-theme, 
    $overrides:(
      display-large: "600 12rem / 12rem Inter, sans-serif",
     // other font tokens go here, eg: display-medium, etc.
  ));

3. Optionally, you can include this mixin as well (does not have to be inside a selector)

• $back-compat: true is only needed if you rely on MAT-2 utility cllasses like .mat-headline-1, etc.

// if this is not included, then material doesn't generate the built-in utility classes like ".mat-display-large"
// if this is not included, then native h1-h6 tags are not affected by the custom overriden config.

// @include mat.typography-hierarchy($material-styling-test-theme, $back-compat: true);

4. If you did not include the previous mixin, you can then define your own wrapper classes that use the design tokens generated by angular:

// this is similar to how angular sets the styles internally
.headline-clone, h1 {
  font: mat.get-theme-typography($material-styling-test-theme, display-large);
}

5. then in your html, just apply the classes:

<p class="headline-clone">Styling with MAT-3</p>
<h1>Native h1 styling</h1>

This is based on looking inside the material-components source code, and a lot of different articles and documentation. The only downside is, that MAT-3 only defines 15 different fonts, so if your app uses more than 15 fonts, maybe this is not the best approach.

[RobertNagy299]

Oh, I was not aware of that, but that's a very good point! Thank you for the feedback.
I've read the comments and the article you've linked, and to sum it up, if I understand it correctly:

We should not use the

mat.get-theme-typography,
mat.typography-hierarchy,
mat.define-theme 

functions and mixins, because these APIs aren't supported after angular and material V18.

However, we can still use

@mixin theme($config, $overrides: ()) 

and use the $overrides map to override the design tokens emitted by material, and then we use those tokens manually like var(--mat-sys-display-large)

Did I get this right?

Do we have an option to extend the typography config and define more than 15 fonts?

Thank you very much for your feedback!

[shhdharmen]

Did I get this right?

Yes.

Do we have an option to extend the typography config and define more than 15 fonts?

Not exactly, becuase Angular Material follow M3 guidelines, according to it's typography section, it can only have 15 type sclaes. But you can follow same structure as Angular Material System Variables, for example:

/* Pieces first */
--mat-sys-custom-font: Roboto, sans-serif;
--mat-sys-custom-medium-line-height: 1.25rem;
--mat-sys-custom-medium-size: 0.875rem;
--mat-sys-custom-medium-tracking: 0.016rem;
--mat-sys-custom-medium-weight: 400;

/* Main part */
--mat-sys-custom-medium: var(--mat-sys-custom-medium-weight) var(--mat-sys-custom-medium-size) / var(--mat-sys-custom-medium-line-height) var(--mat-sys-custom-medium-font);

[shhdharmen]

Or you can also create custom classes for custom fonts and use overrides API like below:

.example-font-container {
    @include mat.theme-overrides((
      body-small: some-custom-value,
      /* more tokens can be overriden here... */
    ));
  }

[RobertNagy299]

All right, thank you very much for answering!

I managed to come up with something similar myself, but it's great to hear that you've confirmed my assumptions.

Have a lovely evening!

[shhdharmen]

If you want more structural approach with SCSS, you can check my "Adding More Colors" chapter (preview video), where I explain how one can add more colors in Angular Material theme. Then, you can apply similar approach with typography.