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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <!-- 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" 
    </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=
    </script>
</body>
  
</html>

chevron_right


Output:




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 contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. 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 contribute@geeksforgeeks.org to report any issue with the above content.