May 5, 2021

Typography with Angular Material and Google Fonts

Typography is one of the vital factors when you are expressing something in the form of writing, it may be in book or paper, or web application, typography means not only having the perfect font typeface but also needs to consider the font size, font-weight, and font style.

What is typography?

It's a way to represent the written information to the users with clear text visible by using proper font typeface, font size, font style.

Why typography is important?

Typography helps to attract the user's attention and stresses the very important things, and improves user experience.

In this article, we deep dive into the use of default angular material typography with the help of Angular Material and Google fonts and we are going to override the default values and you will witness the dynamically changing the fonts or typography when the route is changed, and at end of this article, you can also go through the demo application.

Steps to enable typography in Angular Material

Follow the below steps to enable typography in Angular, you have to install the angular material package with typography.

Run the command ng add @angular/material to your existing angular application
Select Yes to enable the Angular Typography

HTML and CSS changes required for the typography

Once the setup is done, you will notice that the index.html body will have a class with mat-typography if not add the class to the body tag and additionally you can observe that we have included all the fonts required for setting up typography

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Angular Typography using Google Fonts</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Sen&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Titillium+Web&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Oxygen&display=swap" rel="stylesheet">
    <link
      href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i|Oxygen:300,400,700|Quicksand:300,400,500,600,700|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Sen:400,700,800|Ubuntu:300,300i,400,400i,500,500i,700,700i&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese"
      rel="stylesheet">
  </head>

  <body class="mat-typography">
    <app-root></app-root>
  </body>

</html>

From the above code, the class mat-typography is automatically sets the different styles for all the major HTML elements such as h1, h2, h3, etc.

Then we will create a separate style for typography configuration which extends mat-typography-config and each level have 3 parameters font-size, line-height, and font-weight and all these are now by default configuration used by Angular and you can override them by changing the values according to your convenience.

@import "~bootstrap/scss/bootstrap-reboot";
@import "~bootstrap/scss/bootstrap-grid";

@import "~@angular/material/theming";
@include mat-core();
@import "./app/styles/first-typography.scss";
@import "./app/styles/second-typography.scss";
@import "./app/styles/third-typography.scss";
@import "./app/styles/fourth-typography.scss";
@import "./app/styles/fifth-typography.scss";
@import "./app/styles/sixth-typography.scss";

body {
  height: 100%;
}

.first-typography {
  @include angular-material-typography($first-custom-typography);
}

.second-typography {
  @include angular-material-typography($second-custom-typography);
}

.third-typography {
  @include angular-material-typography($third-custom-typography);
}

.fourth-typography {
  @include angular-material-typography($fourth-custom-typography);
}

.fifth-typography {
  @include angular-material-typography($fifth-custom-typography);
}

.sixth-typography {
  @include angular-material-typography($sixth-custom-typography);
}

.mat-display-2,
.mat-display-1 {
  text-align: center;
}

Then in the style.scss file you should import @import "~@angular/material/theming";@include mat-core(); and then you should import the above configuration style file to customize the typography.

$first-custom-typography: mat-typography-config(
  $font-family: "Quicksand, sans-serif",
  $display-4: mat-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
  $display-3: mat-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
  $display-2: mat-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
  $display-1: mat-typography-level(34px, 40px, 400),
  $headline: mat-typography-level(24px, 32px, 400),
  $title: mat-typography-level(20px, 32px, 500),
  $subheading-2: mat-typography-level(16px, 28px, 400),
  $subheading-1: mat-typography-level(15px, 24px, 400),
  $body-2: mat-typography-level(14px, 24px, 500),
  $body-1: mat-typography-level(14px, 20px, 400),
  $caption: mat-typography-level(12px, 20px, 400),
  $button: mat-typography-level(14px, 14px, 500),
  $input: mat-typography-level(inherit, 1.125, 400)
);