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.