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.
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.
Plain text.
Small size text.
Extra small size text.
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.
The following font sizes are available to use. M is the standard size, and is used by most elements by default.