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.
You can enable the built-in Lumo compact mode variant 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.
| Description | CSS Custom Property |
|---|---|
Main font | --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.
| Description | CSS Custom Property |
|---|---|
XXXL | --lumo-font-size-xxxl: |
XXL | --lumo-font-size-xxl: |
XL | --lumo-font-size-xl: |
L | --lumo-font-size-l: |
M | --lumo-font-size-m: |
S | --lumo-font-size-s: |
XS | --lumo-font-size-xs: |
XXS | --lumo-font-size-xxs: |