Typography usage

The Roboto font is default for Material Design. The font is included in the framework and is set as the default font. If you would like to use Noto click here.

The Roboto font is available in a couple of font weights: 100 (thin), 300 (light), 400 (regular), 500 (medium), 700 (bold) and 900 (black). The availability of font weights for The Noto font depends.

Roboto font example

Class Used for
.display-4

h1

.display-3

h2

.display-2

h3

.display-1

h4

.headline
h5
.title Appbar title,
h6
.subhead-2 Example
.subhead-1 Example
.body-2 Example
.body-1 Body
.caption Example
.label
.menu Example
.button Button

Settings

Variable Options Result
$roboto-font-path Font file path Changes the location of the font path
$noto-font-path Font file path Changes the location of the font path
$font-size Integer The initial size from which everything else is calculated
$font-color-display-4 Color / variable changes the color of display 4
$font-color-display-3 Color / variable changes the color of display 3
$font-color-display-2 Color / variable changes the color of display 2
$font-color-display-1 Color / variable changes the color of display 1
$font-color-headline Color / variable changes the color of headline
$font-color-title Color / variable changes the color of title
$font-color-subhead Color / variable changes the color of subhead
$font-color-body-2 Color / variable changes the color of body 2
$font-color-body-1 Color / variable changes the color of body 1
$font-color-caption Color / variable changes the color of caption
$font-color-label Color / variable changes the color of label
$font-color-menu Color / variable changes the color of menu
$font-color-button Color / variable changes the color of button