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