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

     
      <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

     
      <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

It is a responsive text that adjusts text font-size and line-height according to the device viewport width. To create flow text, add .flow-text class to the needed tag.

General Syntax

    <element class="flow-text"></element>

Try It Now

Source Code

     
      <p class="flow-text">
   Shape Your Path is an online web development learning platforms for professional as well as beginners.
</p>

Try it yourself

Source Code : Output

Shape Your Path is an online web development learning platforms for professional as well as beginners.

Web Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS