Menu
When using ng add @angular/material to add Material support to an Angular project there is a prompt Set up global Angular Material typography styles?
What does this even mean? The documentation states the prompt appears, but does not describe what it actually means.
655
Typography is a way of arranging the text legible, readable, and attractive when displayed. The typology of the angular material is based on the guidelines derived from the material design imagery and organized within the typography level. Each level has a size, line height, and font-weight.
To customize component typography for your entire application, you can pass your custom typography config to the core mixin described in the theming guide. @use '@angular/material' as mat; $my-custom-typography: mat. define-typography-config( $headline: mat. define-typography-level(3rem, 1, 700), ); @include mat.
subheading-1 - Section heading corresponding to the <h4> tag. body-1 - Base body text. body-2 - Bolder body text.
By default, Angular Material doesn’t apply global CSS. Meaning that a standard element (eg. <h1>) will not have Angular materials' styles applied to it.
So, when configured this way, in order to apply Angular material styles to a broad section of your HTML, you can use the mat-typography class
<h1>This header doesn't have Angular Material styling</h1>
<section class="mat-typography">
<h1>This header does have Angular Material styling</h1>
</section>
If you set up global typography styles; then the first <h1> will already be styled.
78
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
