Docs

You are viewing documentation for an older Vaadin version. View latest documentation

Docs

Typography

See the Material Design documentation for the type system, to learn about creating and applying a consistent typographic theme.

Open in a
new tab
// Import all Material CSS custom properties into the global style scope
import '@vaadin/vaadin-material-styles/color';
import '@vaadin/vaadin-material-styles/typography';
// prettier-ignore

Font Family

If available, the Roboto font is used. You should either include Roboto locally in your project, or import it from Google Fonts.

Description CSS Custom Property

Main font
Headings, body and UI text

--material-font-family:

Font Size

The following font sizes are available to use. The default font size for most elements is --material-body-font-size.

Description CSS Custom Property

Heading 1

--material-h1-font-size:

Heading 2

--material-h2-font-size:

Heading 3

--material-h3-font-size:

Heading 4

--material-h4-font-size:

Heading 5

--material-h5-font-size:

Heading 6

--material-h6-font-size:

Body

--material-body-font-size:

Small

--material-small-font-size:

Button

--material-button-font-size:

Caption

--material-caption-font-size:

0975AF57-9257-4E5E-8A7D-9777E359BF7B