Valo

Typography

If you are not importing any element themes, and want to use the font properties, you need to import them manually.

Global style modules

To easily apply basic typographic styles for your app, include the following style module in the global scope (e.g. index.html). It will set the font family, font size and line height for the body element, as well as specify consistent header styles (it doesn’t override header margins).

If needed, you can include the style module in any other style scope as well.

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; Ubuntu on Ubuntu Linux. On other systems, Helvetica, Arial are used as fallbacks.

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


Custom properties

Font family
--valo-font-family