Materialize CSS | Typography - GeeksforGeeks

12 Jun, 2020
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>
Output:
Materialize-CSS
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?