Typography in Angular Material 18
Angular Material 18 Project
We will simply use the project from my earlier articleAngular Material Theming with CSS Variables. You can clone it fromGitHub.
Thetypography-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 insrc/styles.scss
:
:root{@includemat.all-component-themes($angular-material-theming-css-vars-theme);@includemat.typography-hierarchy($angular-material-theming-css-vars-theme);// 👈 Added@includemat.system-level-colors($angular-material-theming-css-vars-theme);@includemat.system-level-typography($angular-material-theming-css-vars-theme);}
Now if you add header elements, like<h1>
, you will notice that it has a set of styling applied it to it. Earlier,<h1>
did not have any custom styling. Try to comment outtypography-hierarchy
to see the difference.
Generated CSS Classes
Thetypography-hierarchy
generates a set of CSS classes based on type scale levels. Atype scale is a selection of font styles that can be used across an app.
There arelarge
,medium
, andsmall
variations forDisplay,Headline,Title,Body andLabel. You can read more about ithere.
The table below lists the CSS classes emitted and the native elements styled:
CSS class | Typescale level | Native Element |
---|---|---|
.mat-display-large | display-large | <h1> |
.mat-display-medium | display-medium | <h2> |
.mat-display-small | display-small | <h3> |
.mat-headline-large | headline-large | <h4> |
.mat-headline-medium | headline-medium | <h5> |
.mat-headline-small | headline-small | <h6> |
.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:
- Through
get-theme-typography
SCSS function - You can read more about ithere - 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:
- Pre-typescale levels
display
headline
title
body
label
- Variations
large
medium
small
- Properties
font
(The CSS font shorthand, includes all font properties except letter-spacing) - No tokenfont-family
-font
font-size
-size
font-weight
-weight
line-height
-line-height
letter-spacing
-tracking
Now, just use below format to get the correct CSS variable:
.some-class{some-property:var(--sys-<pre_typescale_level>-<variation>-<property_token>);}
So, for example, to getfont
ofdisplay-large
, you would write CSS like below:
.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 getfont-weight
of<h6>
, you will write CSS like below:
.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 changefont-size
andline-height
of<h1>
, you can write below CSS
:root{--sys-display-large-size:128px;--sys-display-large-line-height:1.25;/* <h1> (and display-large) uses --sys-display-large, hence we also need to update that variable to see the changes */--sys-display-large:400var(--sys-display-large-size)/var(--sys-display-large-line-height)Roboto,sans-serif}
Let's create an input through which user can change thefont-size
s of button labels and headings.
<mat-form-field><mat-label>Flat Button Font Size</mat-label><inputtype="number"matInput[defaultValue]="14"(change)="changeFlatButtonFontSize($event)"/></mat-form-field><mat-form-field><mat-label>Heading Font Size</mat-label><inputtype="number"matInput[defaultValue]="'56.992'"(change)="changeHeadingFontSize($event)"/></mat-form-field>
changeFlatButtonFontSize(ev:Event){constsize=(ev.targetasHTMLInputElement).value??'14';consttargetElement=document.documentElement;targetElement.style.setProperty('--sys-label-large-size',size+'px');}changeHeadingFontSize(ev:Event){constsize=(ev.targetasHTMLInputElement).value??'56.992';consttargetElement=document.documentElement;targetElement.style.setProperty('--sys-display-large-size',size+'px');// setting the line-height relationallytargetElement.style.setProperty('--sys-display-large-line-height','1.25');// <h1> (and display-large) uses --sys-display-large, hence we also need to update that variable to see the changestargetElement.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:
Live Playground
Top comments(0)
For further actions, you may consider blocking this person and/orreporting abuse