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.

    This is an example quotation using blockquote tag.

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;







<!DOCTYPE html>
    <!-- Include the Google Icon Font -->
    <link rel="stylesheet" href=
    <!-- Include compiled and
        minified Materialize CSS -->
    <link rel="stylesheet" href=
    <!-- Include jQuery -->
    <script type="text/javascript" 
    <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>
    <!-- Using blockquotes -->
                This is an example quotation
                that uses the blockquote tag.
                This is a basic tutorial for
                the Materialize CSS Typography.
    <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.
    <!-- Include the compiled and
        minified Materialize JavaScript -->
    <script src=



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using or mail your article to See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.

Article Tags :

Be the First to upvote.

Please write to us at to report any issue with the above content.