• Typography deals with style and appearance of text on the website.
  • We your website contains my text displayed on it with multiple fonts and sizes it ruins the UI, to address this concern Typography came into picture.Typography levels can be used to address this problem.
  • Each Typography level has it definite font size, font weight and line height.

Add a new module using ng module material and follow below files :


import { MatButtonModule } from '@angular/material';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

material.module.ts (A New module created)

import { NgModule } from '@angular/core';
import { MatButtonModule} from '@angular/material';

const MaterialComponent = [

  imports: [
  exports: [
export class MaterialModule { }


<div class="mat-display-4">This is display 4</div>
<div class="mat-display-3">This is display 3</div>
<div class="mat-display-2">This is display 2</div>
<div class="mat-display-1">This is display 1</div>

<div class="mat-headline">This is a heading for h1</div>
<div class="mat-title">This is a heading for h2</div>
<div class="mat-subheading-2">This is a heading for h3</div>
<div class="mat-subheading-1">This is a heading for h1</div>

<!-- Body content of the page-->
<div class="mat-body-1">This is body text</div>
<div class="mat-body-2">This is bold body text</div>
<div class="mat-caption">This is caption text</div>

<!-- Use the H1 and H2 and other tags normally just wrap them in mat-typography class-->
<div class="mat-typography">
  <h1>This is heading h1</h1>
  <h2>This is heading h2</h2>
  <h3>This is heading h3</h3>
  <h4>This is heading h3</h4>

Output :

Leave a Comment