Angular Material - Typography

Angular Material provides various typography CSS classes which can be used to create visual consistency across Angular JS application.

The following table lists down the different classes with their description.

Sr.No Class Name & Description
1

md-display-1

Shows the text with Regular 34px.
2

md-display-2

Shows the text with Regular 45px.
3

md-display-3

Shows the text with Regular 56px.
4

md-display-4

Shows the text with Light 112px.
5

md-headline

Shows the text with Regular 24px.
6

md-title

Shows the text with Medium 20px.
7

md-subhead

Shows the text with Regular 16px.
8

md-body-1

Shows the text with Regular 14px.
9

md-body-2

Shows the text with Medium 14px.
10

md-button

Shows the button with Medium 14px.
11

md-caption

Shows the text with Regular 12px.

Example

The following example shows the use of typography CSS classes.

am_typography.htm

Live Demo 
<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('typographyController', typographyController);
           
         function typographyController ($scope) {               
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div class = "frameContainer" ng-controller = "typographyController as ctrl"
         layout = "column" layout-padding layout-wrap layout-fill
         style = "padding-bottom: 32px;" ng-cloak>
         <p class = "md-display-4">.md-display-4</p>
         <p class = "md-display-3">.md-display-3</p>
         <p class = "md-display-2">.md-display-2</p>
         <p class = "md-display-1">.md-display-1</p>
         <p class = "md-headline">.md-headline</p>
         <p class = "md-title">.md-title</p>
         <p class = "md-subhead">.md-subhead</p>
         <p class = "md-body-1">.md-body-1</p>
         <p class = "md-body-2">.md-body-2</p>
         <md-button>.md-button</md-button>
         <p class = "md-caption">.md-caption</p>
      </div>
   </body>
</html>

Result

Verify the result.

Advertisements