# Typography

Roboto has been refined extensively to work across the wider set of supported platforms. It is slightly wider and rounder, giving it greater clarity and making it more optimistic. Vue Material use Roboto by default, with Noto Sans as a fallback. To get up and running with Roboto font, just install it from Google Fonts. Or install it from the following snippet:

# Breakpoints 

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">

# Display Typography

Documentation and examples for VueMaterial.io typography, including global settings, headings, body text, lists, and more.

Display 4 Display 3 Display 2 Display 1 Headline Title Subheading Body 2 Body 1 Caption Links 
<div class="typo">
  <span class="md-display-4">Display 4</span>
  <span class="md-display-3">Display 3</span>
  <span class="md-display-2">Display 2</span>
  <span class="md-display-1">Display 1</span>
  <span class="md-headline">Headline</span>
  <span class="md-title">Title</span>
  <span class="md-subheading">Subheading</span>
  <span class="md-body-2">Body 2</span>
  <span class="md-body-1">Body 1</span>
  <span class="md-caption">Caption</span>
  <router-link to="#demo">Links</router-link>
  <md-button>Buttons</md-button>
</div>

# Styles

Too many type sizes and styles at once can wreck any layout. A typographic scale has a limited set of type sizes that work well together along with the layout grid. The sizes and styles balance content density and reading comfort under typical usage conditions. They are all based on simple classes that gives the styles and works fine with dark themes. Look:

Header 1The Life of Material Kit

Header 2The Life of Material Kit

Header 3The Life of Material Kit

Header 4The Life of Material Kit

Header 5The Life of Material Kit
Header 6The Life of Material Kit

Header 1 TitleThe Life of Material Kit

Header 2 TitleThe Life of Material Kit

Header 3 TitleThe Life of Material Kit

Header 4 TitleThe Life of Material Kit

Paragraph I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.

Quote

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.

Kanye West, Musician
Muted Text

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...

Primary Text

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...

Info Text

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...

Success Text

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...

Warning Text

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...

Danger Text

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...

Small Tag Header with small subtitle
Use "small" tag for the headers 

<div class="md-layout">
  <div class="md-layout-item">
    <div class="tim-typo">
        <h1><span class="tim-note">Header 1</span>The Life of Material Kit </h1>
    </div>
    <div class="tim-typo">
        <h2><span class="tim-note">Header 2</span>The Life of Material Kit</h2>
    </div>
    <div class="tim-typo">
        <h3><span class="tim-note">Header 3</span>The Life of Material Kit</h3>
    </div>
    <div class="tim-typo">
        <h4><span class="tim-note">Header 4</span>The Life of Material Kit</h4>
    </div>
    <div class="tim-typo">
        <h5><span class="tim-note">Header 5</span>The Life of Material Kit</h5>
    </div>
    <div class="tim-typo">
        <h6><span class="tim-note">Header 6</span>The Life of Material Kit</h6>
    </div>
    <div class="tim-typo">
        <h1 class="title"><span class="tim-note">Header 1 Title</span>The Life of Material Kit </h1>
    </div>
    <div class="tim-typo">
        <h2 class="title"><span class="tim-note">Header 2 Title</span>The Life of Material Kit</h2>
    </div>
    <div class="tim-typo">
        <h3 class="title"><span class="tim-note">Header 3 Title</span>The Life of Material Kit</h3>
    </div>
    <div class="tim-typo">
        <h4 class="title"><span class="tim-note">Header 4 Title</span>The Life of Material Kit</h4>
    </div>
    <div class="tim-typo">
        <p><span class="tim-note">Paragraph</span>
            I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that&#x2019;s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
    </div>
    <div class="tim-typo">
        <span class="tim-note">Quote</span>
        <div class="blockquote undefined">
         <p>
         I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that&#x2019;s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.
         </p>
         <small>
         Kanye West, Musician
         </small>
        </div>
    </div>

    <div class="tim-typo">
        <span class="tim-note">Muted Text</span>
        <p class="text-muted">
        I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
        </p>
    </div>
    <div class="tim-typo">
        <span class="tim-note">Primary Text</span>
        <p class="text-primary">
        I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...                        </p>
    </div>
    <div class="tim-typo">
        <span class="tim-note">Info Text</span>
        <p class="text-info">
        I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...                        </p>
    </div>
    <div class="tim-typo">
        <span class="tim-note">Success Text</span>
        <p class="text-success">
        I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...                        </p>
    </div>
    <div class="tim-typo">
        <span class="tim-note">Warning Text</span>
        <p class="text-warning">
        I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
        </p>
    </div>
    <div class="tim-typo">
        <span class="tim-note">Danger Text</span>
        <p class="text-danger">
        I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...                        </p>
    </div>
    <div class="tim-typo">
        <h2><span class="tim-note">Small Tag</span>
            Header with small subtitle <br>
            <small>Use &quot;small&quot; tag for the headers</small>
        </h2>
    </div>
  </div>
</div>

← Icons →