Tuesday, March 7, 2017

Materialize - Typography

Materialize uses Roboto 2.0 as standard font. It can be overriden using following CSS style:

html {
   font-family: GillSans, Calibri, Trebuchet, sans-serif;
}

Following are the examples of headings, blockquotes and free-flow but responsive text.

Example

materialize_typography.htm

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Typography Example</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">      
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> 
   </head>
   <body class="container"> 
      <h2>Typography Demo</h2>
   <hr/>
   <h3>Headings</h3>
      <div class="card-panel">
         <h1>Heading 1</h1>
         <h2>Heading 2</h2>
         <h3>Heading 3</h3>
         <h4>Heading 4</h4>
         <h5>Heading 5</h5>
         <h6>Heading 6</h6>
      </div>
   <h3>Block Quotes</h3>
      <div class="card-panel">
         <blockquote>
          The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.
         </blockquote>
      </div>
   <h3>Responsive free-flow text</h3>
      <div class="card-panel">
          <p class="flow-text">
          The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.
         </p>
      </div>    
   </body>
</html>

Result

Verify the result.

Typography Demo

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Block Quotes

The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.

Responsive free-flow text