Scroll to Top

Typography

We have tried to make the Typography more attractive and catchy so users doesn't have to waste there time in writing styles. User can use simple classes to create attractive paragraph, heading etc. Material Grammi use Google Font 'Roboto' as optional Font, which is also included in the download package and configured by default via classes. Now Extreme control on fonts is available in Material Grammi Framework. Fonts need to be responsive too when we talk about Mobile First Frameworks, there should be different font sizes according to different devices so we have introduced new classes to make your font responsive. We also offer to control your document's font styling if you want to customize the font size, font style or text decorations, you can make it possible with Material Grammi. You can over-ride the default properties given by Material Grammi Framework too via these classes.

SITEMAP Documentation / Css / Typography

Headings are the important element of web design and these should be responsive in nature too. New Classes for headings are introduced and all the tags are available for use. Some Tags are style to improve the performance and Presentation of your website designing.

Heading tags have default styling.

Demo

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Code copy

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading tags have been styled too for better use of headings.

Demo

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Code copy

<p class="h1">Heading 1</p>
<p class="h2">Heading 2</p>
<p class="h3">Heading 3</p>
<p class="h4">Heading 4</p>
<p class="h5">Heading 5</p>
<p class="h6">Heading 6</p>

Material Grammi use Google's Font 'Roboto' as optional Font & classes for them are introduced, which is also included in the download package and configured by default. Now Extreme control on fonts is available in Material Grammi Framework. Fonts need to be responsive too when we talk about Mobile First Frameworks, there should be different font sizes according to different devices. We also offer to control your document's font styling if you want to customize the font size, font style or text decorations, you can make it possible with Material Grammi. Font related classes are given in the below table, you can over-ride the default properties given by Material Grammi Framework.

You can now control the font size of text by using classes font sizes varies from 10px to 100px.

Demo

font-10

font-15

font-20

font-25

font-30

font-40

font-50

font-60

font-80

font-100

Code copy

    <p class="font-10">font-10</p>
    <p class="font-15">font-15</p>
    <p class="font-20">font-20</p>
    <p class="font-25">font-25</p>
    <p class="font-30">font-30</p>
    <p class="font-40">font-40</p>
    <p class="font-50">font-50</p>
    <p class="font-60">font-60</p>
    <p class="font-80">font-80</p>
    <p class="font-100">font-100</p>

Give text decoration by using classes.

Demo

overline

line-through

underline

Code copy

    <p class="text-overline">overline</p>
    <p class="text-linethrough">line-through</p>
    <p class="text-underline">underline</p>

Feedback