Materialize CSS Typography

Materialize CSS provides several elements that can be used for the typography of the page:

Headers
Blockquotes
Flow Text

Headers: Materialize CSS provides basic styling to be used on the header tags. The tags below show the available header tags that are styled by Materialize CSS:

<h1>Heading 1</h1>  
<h2>Heading 2</h2>  
<h3>Heading 3</h3>  
<h4>Heading 4</h4>  
<h5>Heading 5</h5>  
<h6>Heading 6</h6>

Blockquotes: A Blockquote is used to give emphasis to a quote or citation. It can also be used for extra text hierarchy and emphasis.

<blockquote>
    This is an example quotation using blockquote tag.
</blockquote>

Flow Text: The flow-text class can be used to fluidly resize the font size and line-height of the text that has to be scaled. To use flow-text, one needs to add the class flow-text to the needed tag. The below example shows the usage of this class.

<p class="flow-text">I am Flow Text</p>

Note: The standard font used by Materialize CSS is the Roboto 2.0 font. This font can be replaced by simply changing the font stack. This can be done by modifying the code below to include the needed font and add to the custom CSS.

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

Example:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <!-- Include the Google Icon Font -->
    <link rel="stylesheet" href=
"https://fonts.googleapis.com/icon?family=Material+Icons">
  
    <!-- Include compiled and
        minified Materialize CSS -->
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
  
    <!-- Include jQuery -->
    <script type="text/javascript" 
    src="https://code.jquery.com/jquery-2.1.1.min.js">
    </script>
</head>
  
<body>
    <h3>Headings</h3>
    <div class="card-panel green">
  
        <!-- Using all the headers -->
        <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>
  
    <!-- Using blockquotes -->
    <h3>Blockquote</h3>
    <h5>
        <blockquote>
            <p>
                This is an example quotation
                that uses the blockquote tag.
                <br>
                This is a basic tutorial for
                the Materialize CSS Typography.
            </p>
        </blockquote>
    </h5>
  
    <div class="card-panel">
        <h3>Free Flow</h3>
  
        <!-- Using the flow-text class -->
        <p class="flow-text">
            GeeksforGeeks is a Computer
            Science portal for geeks.
            It contains well written,
            well thought and well explained
            computer science and programming
            articles, quizzes and courses.
            GeeksforGeeks is a very fast
            growing community among programmers
            and have a reach of around 10
            million+ readers globally.
        </p>
    </div>
  
    <!-- Include the compiled and
        minified Materialize JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
    </script>
</body>
  
</html>