Docs

You are viewing documentation for an older Vaadin version. View latest documentation

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

Open in a
new tab
// Import all Lumo CSS custom properties into the global style scope
import '@vaadin/vaadin-lumo-styles/color';
import '@vaadin/vaadin-lumo-styles/typography';
import '@vaadin/vaadin-lumo-styles/sizing';
import '@vaadin/vaadin-lumo-styles/spacing';
import '@vaadin/vaadin-lumo-styles/style';
// prettier-ignore

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.

Description CSS 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.

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:

Line Height

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

Description CSS Custom Property

M

--lumo-line-height-m:

S

--lumo-line-height-s:

XS

--lumo-line-height-xs: