Materialize Typography

Materialize Typography

Materialize Typography - The Material design uses the "Roboto 2.0" font. It is also included in the Materialize CSS framework. You can also change the material design font by the following given below CSS styles rule & place it into the custom CSS file.

Custom Font
   html{ 
    font-family: "Goudy Bookletter 1911", sans-serif;
    }
    

Headers

Material design provides some basic styles on the header tags. Let us see the 6 header tags( <h1>, <h2>, <h3>, <h4>=>, <h5>, <h6> ) different sizes.

Source Code

Download
<h1>Heading h1</h1>
<h2>Heading h2</h2>	
<h3>Heading h3</h3>	
<h4>Heading h4</h4>	
<h5>Heading h5</h5>	
<h6>Heading h6</h6>    
Try it yourself

Source Code : Output

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5
Heading h6

Blockquotes

Blockquotes are mainly used to give emphasis to a quote or citation.

General Syntax

<blockquote></blockquote>    
Try It Now

Source Code

Download
<blockquote>
    This is an example that uses the blockquote tag.Let us see its oputput.
</blockquote>    
Try it yourself

Source Code : Output

This is an example that uses the blockquote tag.Let us see its oputput.

Flow Text

To create flow text, use predefined class .flow-text.

General Syntax

<element class="flow-text"></element>    
Try It Now

Source Code

Download
<p class="flow-text">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
</p>    
Try it yourself

Source Code : Output

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

Web Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS