Typography with Angular 10 and Google Fonts

Typography is one of the vital factor when your 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 one need 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 clearly text visible by using proper font typeface, font size, font style

Why typography is important?, Typography helps to attract the user attention and stresses the very important things and improves user experience

Tough there are many standards when it comes to font style, size and font weights. In this article we deep dive into the use of default angular material typography with the help of Angular Material and Google fonts also we will go through how to override the default values of it and also you will witness dynamically changing the fonts or typography when the route is changed, Please not that we have deployed the demo application and you can access it

To enable typography in Angular, you have to install the angular material package and during the time of installation you also required to select Yes to enable the Angular Typography

Once the setup is done, you will notice that in the index.html body will have a class with mat-typography if not add the class to the body tag and also you can observe that we have included all the fonts required for the 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>

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 your convenient

Then in the style.scss file you should import@import "[email protected]/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) );

Demo: https://angular-typography.herokuapp.com/first-typography

Github Repo: https://github.com/allabouttech0803/angular-typography