Typography

Use typography to present your design and content as clearly and efficiently as possible.

Too many type sizes and styles at once can spoil any layout. A typographic scale has a limited set of type sizes that work well together along with the layout grid.

General

The Roboto font will not be automatically loaded by Material-UI. The developer is responsible for loading all fonts used in their application. Roboto Font has a few easy ways to get started.

Roboto Font CDN

Shown below is a sample link markup used to load the Roboto font from a CDN.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">

Install with npm

You can install it by typing the below command in your terminal:

npm install typeface-roboto --save

Then, you can import it in your entry-point.

import 'typeface-roboto';

For more info check out the typeface project.

⚠️ Be careful when using this approach. Make sure your bundler doesn't eager load all the font variations (100/300/400/500/700/900, italic/regular, SVG/woff). Inlining all the font files can significantly increase the size of your bundle. Material-UI default typography configuration only relies on 300, 400 and 500 font weights.

Component

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading

h6. Heading

subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur

subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur

body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.

body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.

button textcaption textoverline text

Deprecated variants

Display 4

Display 3

Display 2

Display 1

Headline

Title

Subheading

Body 2

Body 1

Caption

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Button

Theme

In some situations you might not be able to use the Typography component. Hopefully, you might be able to take advantage of the typography keys of the theme.

This div's text looks like that of a button.

Migration to typography v2

The material design specification changed concerning variant names and styles. To allow a smooth transition we kept old variants and restyled variants for backwards compatibility but we log deprecation warnings. We will remove the old typography variants in the next major release v4.0.0 (Q1 2019).

Strategies

To make an immediate switch to typography v2 you can simply pass useNextVariants: true when calling createMuiTheme:

const theme = createMuiTheme({
  typography: {
    useNextVariants: true,
  },
});

or set window.__MUI_USE_NEXT_TYPOGRAPHY_VARIANTS__ = true; if you don't use the theme.

This will use new variants instead of old variants according to the following mapping:

display4 => h1
display3 => h2
display2 => h3
display1 => h4
headline => h5
title => h6
subheading => subtitle1
body2 => body1
body1 (default) => body2 (default)

Please note that this will log deprecation warnings if you use one of the old variants. We recommend you replace those old variants with the recommended variants to be prepared for the next major release. See Themes for more information about how to use a global theme.

API

<Typography />