Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Typography in Angular Material 18
Angular Material Dev profile imageDharmen Shah
Dharmen Shah forAngular Material Dev

Posted on • Originally published atangular-material.dev

     

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);}
Enter fullscreen modeExit fullscreen mode

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 classTypescale levelNative Element
.mat-display-largedisplay-large<h1>
.mat-display-mediumdisplay-medium<h2>
.mat-display-smalldisplay-small<h3>
.mat-headline-largeheadline-large<h4>
.mat-headline-mediumheadline-medium<h5>
.mat-headline-smallheadline-small<h6>
.mat-title-largetitle-largeNone
.mat-title-mediumtitle-mediumNone
.mat-title-smalltitle-smallNone
.mat-body-largebody-largeNone
.mat-body-mediumbody-mediumNone
.mat-body-smallbody-smallNone
.mat-label-largelabel-largeNone
.mat-label-mediumlabel-mediumNone
.mat-label-smalllabel-smallNone

Reading typescale properties

There are 2 ways to read:

  1. Throughget-theme-typography SCSS function - You can read more about ithere
  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:

.some-class{some-property:var(--sys-<pre_typescale_level>-<variation>-<property_token>);}
Enter fullscreen modeExit fullscreen mode

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);}
Enter fullscreen modeExit fullscreen mode

One more example, to getfont-weight of<h6>, you will write CSS like below:

.h6-font-weight{font-weight:var(--sys-headline-small-weight)}
Enter fullscreen modeExit fullscreen mode

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}
Enter fullscreen modeExit fullscreen mode

Let's create an input through which user can change thefont-sizes 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>
Enter fullscreen modeExit fullscreen mode
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');}
Enter fullscreen modeExit fullscreen mode

Once you make above changes, the output will look like below:

Live Playground

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Develop Angular applications with Material Design like a Pro

More fromAngular Material Dev

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp