Lumo Source code

Typography

Lumo defines a set of style modules and CSS custom properties you can use to apply a consistent typographic styles across your application.

Import typography.html to use them.

Style module

Include the typography style module to easily apply basic typographic styles for any style scope. It will set the font family, font size and line height for the root element (html in the global scope), as well as specify header and link styles inside the style scope.

Font family

The system font stack is used by default: Segoe UI on Windows; Roboto on Android and Chrome OS; San Francisco on macOS and iOS; On other systems, Helvetica, Arial are used as fallbacks.

You can apply or change the font family using the --lumo-font-family custom property.

Font size

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


Custom properties

Font family
--lumo-font-family
Font size
--lumo-font-size-xxxl
--lumo-font-size-xxl
--lumo-font-size-xl
--lumo-font-size-l
--lumo-font-size-m
--lumo-font-size-s
--lumo-font-size-xs
--lumo-font-size-xxs
Line-height
--lumo-line-height-m
--lumo-line-height-s
--lumo-line-height-xs