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.

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

Example 2

Setting the font size of any component.

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.

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

Example 4

Setting the text color of any component.

UIUtils.setTextColor(TextColor.PRIMARY, component);

Combining Font Size & Text Color

Example 5

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

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

Example 6

Setting the font size and text color of any component.

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

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