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	--lumo-font-family:

Description	CSS Custom Property
XXXL Heading text	--lumo-font-size-xxxl:
XXL Heading text	--lumo-font-size-xxl:
XL Heading text	--lumo-font-size-xl:
L Heading text	--lumo-font-size-l:
M Body/UI text	--lumo-font-size-m:
S Label text	--lumo-font-size-s:
XS Help text, field validation text, badges	--lumo-font-size-xs:
XXS Small badges	--lumo-font-size-xxs:

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