Materialize CSS Typography, Working with Typography in Materialize CSS

Materialize CSS Tutorial

Materialize Typography

The Material Design standard font is "Roboto 2.0" font. We have included the font files with our framework. You don't like this font, Simply change the font stack by modifying the code below to your liking and add it to your custom css.

html{ 
	font-family:Arial, Helvetica, sans-serif;
}

Headers

Material Design provide some basic header tags. you can see the the 6 header tags( <h1>, <h2>, <h3>, <h4>, <h5>, <h6> )' different sizes.

<h1>Heading h1</h1>
<h2>Heading h2</h2>	
<h3>Heading h3</h3>	
<h4>Heading h4</h4>	
<h5>Heading h5</h5>	
<h6>Heading h6</h6>

Output :

Blockquotes

Blockquotes are mainly used to give emphasis to a quote or citation. The following example is given below :

<blockquote>
      <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h5>
</blockquote>

Output :

Flow Text

<p class="flow-text">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

Output :

Materialize CSS Tutorial

WEB DEVELOPMENT TUTORIALS

S/W RELATED LINKS

COMPETITIVE EXAMS

We see you’re using an ad blocker.