You can use these CSS custom properties to apply consistent typographic styles across your application.

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-lumo-styles/typography';

Learn how to use CSS Custom Properties.

Font Family

The system font stack is used by default:

  • Segoe UI on Windows

  • Roboto on Android and Chrome OS

  • San Francisco on macOS, iOS, and iPadOS

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

DescriptionCSS Custom Property

Main font
Headings, body and UI text

--lumo-font-family:

Font Size

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

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

Line Height

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

DescriptionCSS Custom Property

M

--lumo-line-height-m:

S

--lumo-line-height-s:

XS

--lumo-line-height-xs: