Skip to main content
codeFork me on GitHub favoriteMade by Daemon

Typography

Material's typographic scale has a set of type sizes that balances content density and reading comfort under typical usage conditions.

Colours

Black and white variations

.text-black

.text-black-primary

.text-black-secondary

.text-black-hint

.text-black-divider

<div class="bg-light-4 card card-body">
  <p class="text-black">.text-black</p>
  <p class="text-black-primary">.text-black-primary</p>
  <p class="text-black-secondary">.text-black-secondary</p>
  <p class="text-black-hint">.text-black-hint</p>
  <p class="text-black-divider">.text-black-divider</p>
</div>

.text-white

.text-white-primary

.text-white-secondary

.text-white-hint

.text-white-divider

<div class="bg-dark-1 card card-body">
  <p class="text-white">.text-white</p>
  <p class="text-white-primary">.text-white-primary</p>
  <p class="text-white-secondary">.text-white-secondary</p>
  <p class="text-white-hint">.text-white-hint</p>
  <p class="text-white-divider">.text-white-divider</p>
</div>

Theme colours

.text-primary

.text-secondary

.text-danger

.text-info

.text-success

.text-warning

.text-dark

.text-light

<div class="bg-light-4 card card-body">
  <p class="text-primary">.text-primary</p>
  <p class="text-secondary">.text-secondary</p>
  <p class="text-danger">.text-danger</p>
  <p class="text-info">.text-info</p>
  <p class="text-success">.text-success</p>
  <p class="text-warning">.text-warning</p>
  <p class="text-dark">.text-dark</p>
  <p class="bg-dark-1 text-light">.text-light</p>
</div>

Styles

Roboto is the standard typeface. Please make sure to load Roboto by including a single line of HTML:

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

By default, Material utilises 4 weights, 300 (light), 400 (regular), 500 (medium) and 700 (bold), of Roboto, but you may need to include fewer or more weights based on your specific usage. In addition, 300i, 400i, 500i and 700i are also included in the above code, but can be safely removed in some cases to speed up page load time.

The basic set of styles are based on a typographic scale of 12, 14, 16, 20, and 34.

Display 4 - Light 112sp

Display 3 - Regular 56sp

Display 2 - Regular 45sp

Display 1 - Regular 34sp

Headline - Regular 24sp

Title - Medium 20sp

Subheading - Regular 16sp

Body 2 - Medium 14sp

Body 1 - Regular 14sp

Caption - Regular 12sp

<p class="typography-display-4">Display 4 - Light 112sp</p>
<p class="typography-display-3">Display 3 - Regular 56sp</p>
<p class="typography-display-2">Display 2 - Regular 45sp</p>
<p class="typography-display-1">Display 1 - Regular 34sp</p>
<p class="typography-headline">Headline - Regular 24sp</p>
<p class="typography-title">Title - Medium 20sp</p>
<p class="typography-subheading">Subheading - Regular 16sp</p>
<p class="typography-body-2">Body 2 - Medium 14sp</p>
<p class="typography-body-1">Body 1 - Regular 14sp</p>
<p class="typography-caption">Caption - Regular 12sp</p>