Typography
- Lumo
- Material
You can use these CSS Custom Properties to apply consistent typographic styles across your application.
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: |
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: |