Scale & Basic Styles

Display 4 Light 112px
Display 3 Regular 56px
Display 2 Regular 45px
Display 1 Regular 34px
Headline Regular 24px
Title Medium 20px
Subhead Regular 16px (Device), Regular 15px (Desktop)
Body 2 Medium 14px (Device), Medium 13px (Desktop)
Body 1 Regular 14px (Device), Regular 13px (Desktop)
Body 2 (force preferred font) Medium 14px (Device), Medium 13px (Desktop)
Body 1 (force preferred font) Regular 14px (Device), Regular 13px (Desktop)
Caption Regular 12px
Menu Medium 14px (Device), Medium 13px (Desktop)
Button Medium (All Caps) 14px

HTML Elements

Headings

<h1>

<h2>

<h3>

<h4>

<h5>
<h6>

Formatting

<u>Underlined<u>

<b>Bold<b>

<strong>Strong<strong>

<italic>Italic<italic>

<em>Em<em>

<s>Strikethrough<s>

<small>Small<small>

<mark>Mark<mark>

Body Text

<p>

<p class="mdl-typography-body-2">

<p class="mdl-typography-caption">

<p class="mdl-typography-menu">

<p class="mdl-typography-button">

Subtitles

<h1> Subtitle

<h2> Subtitle

<h3> Subtitle

<h4> Subtitle

<h5> Subtitle
<h6> Subtitle

Description

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Quotes

<blockquote>

Alignment

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

Transformations

Lowercased text.

Uppercased text.

Capitalized text.

Addresses

Googleplex
1600 Amphitheatre Pkwy
Mountain View, CA 94043
P: (650) 253-0000

Code

Multi-line code blocks

Use <pre> for multi-line code blocks. 

<p>This is the first line of code</p>
<p>This is the second line of code</p>

Inline code blocks

Code blocks like <main> could be displayed inline.

Color Contrasts

Caption

Body

Subhead

Title

Display

Caption

Body

Subhead

Title

Display

Caption

Body

Subhead

Title

Display

Caption

Body

Subhead

Title

Display