Lumo Typography

You can use these CSS Custom Properties to apply consistent typographic styles across your application.

Importing

Import the custom properties before using them in your style sheets.

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

The system font stack is used by default:

On other systems, Helvetica and Arial are used as fallbacks.

Description	CSS Custom Property
Main font Headings, body and UI text	:

Description	CSS Custom Property
XXXL Heading text	:
XXL Heading text	:
XL Heading text	:
L Heading text	:
M Body/UI text	:
S Label text	:
XS Help text, field validation text, badges	:
XXS Small badges	:

The following line heights are available to use. M is the standard size, and is used by most elements by default.