> Markdown version of [Theming - Typography](https://vaadin.com/docs/v14/flow/starters/business-app/theming-typography). Section index: [llms.txt](https://vaadin.com/docs/v14/flow/llms.txt)

# Theming: Typography

## <a id="headings"></a>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)`

## <a id="font-size"></a>Font Size

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

[Image: font size]

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

### <a id="example-1"></a>Example 1

Creating a label with a specific font size.

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

### <a id="example-2"></a>Example 2

Setting the font size of any component.

```java
UIUtils.setFontSize(FontSize.XL, component);
```

## <a id="text-color"></a>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`.

[Image: text color]

### <a id="example-3"></a>Example 3

Creating a label with a specific text color.

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

### <a id="example-4"></a>Example 4

Setting the text color of any component.

```java
UIUtils.setTextColor(TextColor.PRIMARY, component);
```

## <a id="combining-font-size-text-color"></a>Combining Font Size & Text Color

### <a id="example-5"></a>Example 5

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

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

### <a id="example-6"></a>Example 6

Setting the font size and text color of any component.

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

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