Global CSS API: Typography
The following CSS custom properties are used to control form UI typography.
Base Typography
Properties used for base form UI typography.
| Property | Description | Default |
|---|---|---|
| --gf-font-family-base | Base font family. | initial (inherit theme's font family) |
| --gf-font-style-base | Base font style. | normal |
Primary Typography
Properties used for primary typography, namely form controls and validation UI.
| Property | Description | Default |
|---|---|---|
| --gf-font-family-primary | Primary font family. | var(--gf-font-family-base) |
| --gf-font-size-primary | Primary font size. | 14px |
| --gf-font-style-primary | Primary font style. | var(--gf-font-style-base) |
| --gf-font-weight-primary | Primary font weight. | 400 |
| --gf-letter-spacing-primary | Primary letter spacing. | 0 |
| --gf-line-height-primary | Primary line height. | 1.5 |
Secondary Typography
Properties used for secondary typography, namely form labels.
| Property | Description | Default |
|---|---|---|
| --gf-font-family-secondary | Secondary font family. | var(--gf-font-family-base) |
| --gf-font-size-secondary | Secondary font size. | 14px |
| --gf-font-style-secondary | Secondary font style. | var(--gf-font-style-base) |
| --gf-font-weight-secondary | Secondary font weight. | 500 |
| --gf-letter-spacing-secondary | Secondary letter spacing. | 0 |
| --gf-line-height-secondary | Secondary line height. | 1.43 |
Tertiary Typography
Properties used for tertiary typography, namely form descriptions and sub-labels (labels for complex fields and fieldsets).
| Property | Description | Default |
|---|---|---|
| --gf-font-family-tertiary | Tertiary font family. | var(--gf-font-family-base) |
| --gf-font-size-tertiary | Tertiary font size. | 14px |
| --gf-font-style-tertiary | Tertiary font style. | var(--gf-font-style-base) |
| --gf-font-weight-tertiary | Tertiary font weight. | 400 |
| --gf-letter-spacing-tertiary | Tertiary letter spacing. | 0 |
| --gf-line-height-tertiary | Tertiary line height. | 1.43 |