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.
-
1. Angular Material - Getting Started
-
2. Angular Material - Material Module
-
3. Angular Material - Typography
-
4. Angular Material - Buttons
-
5. Angular Material Button Toggle
-
6. Angular Material Icons
-
7. Angular Material Badges
-
8. Angular Material Progress Spinner
-
9. Angular Material Navbar
-
10. Angular Material Sidenav
-
11. Angular Material Menu
-
12. Angular Material List
-
13. Angular Material Grid List
-
14. Angular Material Expansion Panel
-
15. Angular Material Cards
-
16. Angular Material Tabs
-
17. Angular Material Stepper
-
18. Angular Material Input
-
19. Angular Material Select
-
20. Angular Material Autocomplete
-
21. Angular Material Checkbox & Radio Button
-
22. Angular Material Date Picker
-
23. Angular Material Tooltip
-
24. Angular Material Snackbar
-
25. Angular Material Dialog
-
26. Angular Material Data Table
-
27. Angular Material Exploring Data Table
-
28. Angular Material Data table Filtering
-
29. Angular Material Data Table Sorting
-
30. Angular Material Data Table Pagination
-
31. Angular Material Virtual Scrolling