Docs

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

Docs

Typography

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
// tag::color[]
import '@vaadin/vaadin-lumo-styles/color';
// end::color[]
// tag::typography[]
import '@vaadin/vaadin-lumo-styles/typography';
// end::typography[]
// tag::size[]
import '@vaadin/vaadin-lumo-styles/sizing';
// end::size[]
// tag::space[]
import '@vaadin/vaadin-lumo-styles/spacing';
// end::space[]
// tag::style[]
import '@vaadin/vaadin-lumo-styles/style';
// end::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: