Angular Material - Typography

In this lecture we will talk about typography in angular material, well typography basically deals with style and appearance of text on your website, if your website has text content with way too many styles or font sizes it kind of spoils the UI to address, this concern angular material provides typography levels each level has a definite font size font weight and line-height.

Headers

Let's take a closer look at the different typography levels, to create huge headers in the web page we can make use of material display classes now there are a total of four display classes so let's create four div tags one for each display class in fact let simply copy past and then explain it.

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

So we have four div tags each with a different class the topmost one is matte display-4 and display-3 display-2 display-1. If you save this and take a look at the browser you can see how they appear on the web page.

Display 4 has the largest size and the size decreases as we move towards display 1, when we have to really capture the user attention this is probably the way to go. Next we have four more classes that correspond to H1 H2 H3 H4 tags for a section of your web page again let us copy past four more div tags.

<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 h4</div>

We have the mat-headline class which is for an h1 tag mat-title which is equivalent to an h2, subheading-2 for an h3 and subheading-1 for an h4. If you save the file and take a look at the browser you can see the four classes in action.

So these are also kind of headings but smaller compared to th display classes the display classes will probably used only once at very top of your page and the section headings like headline can be used multiple times once for each section.

Body text & Caption

For the body content in your page that is text other than headings you can make use of mat-body-1 and if you need the text to be in bold you can use mat-body-2 and if there is a caption use the mat-caption just like this bellow.

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

If you save the file again and take a look at the browser can see them in action.

Now the final class we have is the typography class itself and what it does is it allows h1 to h4 tags to be used as you would normally you just have to wrap them in material typography class, again let us quickly copy paste the div tags.

<div class="mat-typography">
    <h1>This is a heading for h1</h1>
    <h2>This is a heading for h2</h2>
    <h3>This is a heading for h3</h3>
    <h4>This is a heading for h4</h4>
</div>

So you can see that we have a div tag with class mat-typography and then within this div tag we can use the regular h1, h2, h3, and h4.

If you save the file and take a look at browser you can see that it is exactly the same as headline, title and subheading classes.

So this is about typography in angular material a set of classes concerned with the style and appearance of text in your application.