Material Typography

Typography based on Google's Material Design Standard; available in CSS, LESS, SASS, SCSS, and Stylus.

Install Instructions

NPM

npm install --save material-typography

Bower

bower install material-typography

Or simply download the .zip and place it in your project folder wherever you'd like, then include your flavor of typography in your primary stylesheet.

For example:

@import "material-typography/css/typography.min.css";

Or

<link rel="stylesheet" href="node_modules/material-typography/css/typography.min.css" />

Typography

Typeface

Roboto

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.

Roboto font weights

Roboto has six weights: Thin, Light, Regular, Medium, Bold, and Black.

Font stack

'Roboto', 'Noto', sans-serif;

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.

These sizes and styles were developed to balance content density and reading comfort under typical usage conditions. Type sizes are specified with sp (scaleable pixels) to enable large type modes for accessibility.

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

Across form factors, text that appears in the app bar should use the Title style, Medium 20sp

Button style (Medium 14sp, all caps) is used for all buttons. Button text should be all caps in languages that have capitalization. For languages that don’t have capitals, consider using color text for flat buttons to make them stand out from normal text.

Line Height

To achieve proper readability and appropriate pacing, line heights have been determined based on each style’s individual size and weight. Line wrapping only applies to Body, Subhead, Headline, and the smaller Display styles. All other styles should exist as single lines.

English and English-like scripts