Documentation

Documentation versions (currently viewingVaadin 23)
Check out the new styling guides

Lumo Typography

Lumo’s typography consists of a set of CSS Custom Properties for:

  • Font family

  • Font size

  • Line height

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

Note that there is a built-in Lumo compact mode variant that you can enable to reduce the font size and the sizing and spacing of all components, allowing you to place more components on the screen.

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

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

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

5B833A4F-22A1-4628-97EF-32B1DF6C94CE