Docs

You are viewing documentation for an older Vaadin version. View latest documentation

Docs

Theming: Typography

Headings

The H1, H2, H3, H4, H5 and H6 headings all have margin by default, which is not always desirable (e.g. when used in application headers). To create headings without margins:

  • UIUtils.createH1Label(String)

  • UIUtils.createH2Label(String)

  • UIUtils.createH3Label(String)

  • UIUtils.createH4Label(String)

  • UIUtils.createH5Label(String)

  • UIUtils.createH6Label(String)

Font Size

Lumo defines 8 different font sizes: XXS, XS, S, M (default), L, XL, XXL and XXXL.

font size

UIUtils can create labels of a specific size (example 1) and set the font size of any component (example 2).

Example 1

Creating a label with a specific font size.

Source code
Java
UIUtils.createLabel(FontSize.XL, "Hello World!");

Example 2

Setting the font size of any component.

Source code
Java
UIUtils.setFontSize(FontSize.XL, component);

Text Color

There are 11 text colors in Lumo: HEADER, BODY (default), SECONDARY, TERTIARY, DISABLED, PRIMARY, PRIMARY_CONTRAST, ERROR, ERROR_CONTRAST, SUCCESS and SUCCESS_CONTRAST.

text color

Example 3

Creating a label with a specific text color.

Source code
Java
UIUtils.createLabel(TextColor.PRIMARY, "Hello World!");

Example 4

Setting the text color of any component.

Source code
Java
UIUtils.setTextColor(TextColor.PRIMARY, component);

Combining Font Size & Text Color

Example 5

Creating a label with a specific font size and text color.

Source code
Java
UIUtils.createLabel(FontSize.S, TextColor.SUCCESS, "Hello World!");

Example 6

Setting the font size and text color of any component.

Source code
Java
UIUtils.setFontSize(FontSize.S, component);
UIUtils.setTextColor(TextColor.SUCCESS, component);

6D4AA171-1F26-4838-92D2-326556E8D735