Typography

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

Usage

In server-side views (Flow/Java), the custom properties are imported automatically.

In client-side views (Fusion/TypeScript), you need to explicitly import the custom properties before you can use them in your style sheets.

import '@vaadin/vaadin-material-styles/typography';

Learn how to use CSS Custom Properties.

Font Family

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

DescriptionCSS 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.

DescriptionCSS 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: