--- title: "Typography classes" description: "Text style classes (`text-h1` … `text-small`) and text color classes (`color-heading`, …)." requested_language: nl language: en translation_notice: "This page isn't translated yet" url: https://docs.systhema.app/nl/reference/utilities/typography version: unreleased (main) docs_index: https://docs.systhema.app/nl/llms.txt --- > This page isn't translated yet. Showing English. One class per text style sets family, size, weight, line height and letter spacing from the typography tokens, so the values change per breakpoint without modifiers. Values per breakpoint are on [Typography tokens](https://docs.systhema.app/nl/reference/tokens/typography.md). | Class | Styles | | -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `text-h1` | `font-family: var(--font-h1-font-family);`
`font-size: var(--typography-h1-font-size);`
`font-weight: var(--font-h1-font-weight);`
`letter-spacing: var(--typography-h1-letter-spacing);`
`line-height: var(--typography-h1-line-height);`
`text-transform: none;`
`text-decoration: none;`
`font-style: var(--font-h1-font-style);` | | `text-h2` | `font-family: var(--font-h2-font-family);`
`font-size: var(--typography-h2-font-size);`
`font-weight: var(--font-h2-font-weight);`
`letter-spacing: var(--typography-h2-letter-spacing);`
`line-height: var(--typography-h2-line-height);`
`text-transform: none;`
`text-decoration: none;`
`font-style: var(--font-h2-font-style);` | | `text-h3` | `font-family: var(--font-h3-font-family);`
`font-size: var(--typography-h3-font-size);`
`font-weight: var(--font-h3-font-weight);`
`letter-spacing: var(--typography-h3-letter-spacing);`
`line-height: var(--typography-h3-line-height);`
`text-transform: none;`
`text-decoration: none;`
`font-style: var(--font-h3-font-style);` | | `text-h4` | `font-family: var(--font-h4-font-family);`
`font-size: var(--typography-h4-font-size);`
`font-weight: var(--font-h4-font-weight);`
`letter-spacing: var(--typography-h4-letter-spacing);`
`line-height: var(--typography-h4-line-height);`
`text-transform: none;`
`text-decoration: none;`
`font-style: var(--font-h4-font-style);` | | `text-h5` | `font-family: var(--font-h5-font-family);`
`font-size: var(--typography-h5-font-size);`
`font-weight: var(--font-h5-font-weight);`
`letter-spacing: var(--typography-h5-letter-spacing);`
`line-height: var(--typography-h5-line-height);`
`text-transform: none;`
`text-decoration: none;`
`font-style: var(--font-h5-font-style);` | | `text-h6` | `font-family: var(--font-h6-font-family);`
`font-size: var(--typography-h6-font-size);`
`font-weight: var(--font-h6-font-weight);`
`letter-spacing: var(--typography-h6-letter-spacing);`
`line-height: var(--typography-h6-line-height);`
`text-transform: none;`
`text-decoration: none;`
`font-style: var(--font-h6-font-style);` | | `text-label` | `& { font-family: var(--font-label-font-family); font-size: var(--typography-label-font-size); font-weight: var(--font-label-font-weight); letter-spacing: var(--typography-label-letter-spacing); line-height: var(--typography-label-line-height); text-transform: uppercase; text-decoration: none; font-style: var(--font-label-font-style); }`
`.post-card-label.text-label { color: color-mix(in srgb, currentColor 60%, transparent); }`
+ 1 more rule | | `text-lead` | `font-family: var(--font-lead-font-family);`
`font-size: var(--typography-lead-font-size);`
`font-weight: var(--font-lead-font-weight);`
`letter-spacing: var(--typography-lead-letter-spacing);`
`line-height: var(--typography-lead-line-height);`
`text-transform: none;`
`text-decoration: none;`
`font-style: var(--font-lead-font-style);` | | `text-body` | `font-family: var(--font-body-font-family);`
`font-size: var(--typography-body-font-size);`
`font-weight: var(--font-body-font-weight);`
`letter-spacing: var(--typography-body-letter-spacing);`
`line-height: var(--typography-body-line-height);`
`text-transform: none;`
`text-decoration: none;`
`font-style: var(--font-body-font-style);` | | `text-small` | `font-family: var(--font-small-font-family);`
`font-size: var(--typography-small-font-size);`
`font-weight: var(--font-small-font-weight);`
`letter-spacing: var(--typography-small-letter-spacing);`
`line-height: var(--typography-small-line-height);`
`text-transform: none;`
`text-decoration: none;`
`font-style: var(--font-small-font-style);` | | `text-form-label` | `font-family: var(--font-form-label-font-family);`
`font-size: var(--typography-form-label-font-size);`
`font-weight: var(--font-form-label-font-weight);`
`letter-spacing: var(--typography-form-label-letter-spacing);`
`line-height: var(--typography-form-label-line-height);`
`text-transform: none;`
`text-decoration: none;`
`font-style: var(--font-form-label-font-style);` | | `text-form-description` | `font-family: var(--font-form-description-font-family);`
`font-size: var(--typography-form-description-font-size);`
`font-weight: var(--font-form-description-font-weight);`
`letter-spacing: var(--typography-form-description-letter-spacing);`
`line-height: var(--typography-form-description-line-height);`
`text-transform: none;`
`text-decoration: none;`
`font-style: var(--font-form-description-font-style);` | | `text-form-block` | `font-family: var(--font-form-block-font-family);`
`font-size: var(--typography-form-block-font-size);`
`font-weight: var(--font-form-block-font-weight);`
`letter-spacing: var(--typography-form-block-letter-spacing);`
`line-height: var(--typography-form-block-line-height);`
`text-transform: none;`
`text-decoration: none;`
`font-style: var(--font-form-block-font-style);` | | `text-form-inline` | `font-family: var(--font-form-inline-font-family);`
`font-size: var(--typography-form-inline-font-size);`
`font-weight: var(--font-form-inline-font-weight);`
`letter-spacing: var(--typography-form-inline-letter-spacing);`
`line-height: var(--typography-form-inline-line-height);`
`text-transform: none;`
`text-decoration: none;`
`font-style: var(--font-form-inline-font-style);` | | `text-cookie-consent-title` | `font-family: var(--font-cookie-consent-title-font-family);`
`font-size: var(--cookie-consent-title-font-size);`
`font-weight: var(--font-cookie-consent-title-font-weight);`
`letter-spacing: var(--cookie-consent-title-letter-spacing);`
`line-height: var(--cookie-consent-title-line-height);`
`text-transform: none;`
`text-decoration: none;`
`font-style: var(--font-cookie-consent-title-font-style);` | | `text-cookie-consent-description` | `font-family: var(--font-cookie-consent-description-font-family);`
`font-size: var(--cookie-consent-description-font-size);`
`font-weight: var(--font-cookie-consent-description-font-weight);`
`letter-spacing: var(--cookie-consent-description-letter-spacing);`
`line-height: var(--cookie-consent-description-line-height);`
`text-transform: none;`
`text-decoration: none;`
`font-style: var(--font-cookie-consent-description-font-style);` | | `text-cookie-consent-category-title` | `font-family: var(--font-cookie-consent-category-title-font-family);`
`font-size: var(--cookie-consent-category-title-font-size);`
`font-weight: var(--font-cookie-consent-category-title-font-weight);`
`letter-spacing: var(--cookie-consent-category-title-letter-spacing);`
`line-height: var(--cookie-consent-category-title-line-height);`
`text-transform: none;`
`text-decoration: none;`
`font-style: var(--font-cookie-consent-category-title-font-style);` | | `text-cookie-consent-button-primary` | `font-family: var(--font-cookie-consent-button-primary-font-family);`
`font-size: var(--cookie-consent-button-primary-font-size);`
`font-weight: var(--font-cookie-consent-button-primary-font-weight);`
`letter-spacing: var(--cookie-consent-button-primary-letter-spacing);`
`line-height: var(--cookie-consent-button-primary-line-height);`
`text-transform: none;`
`text-decoration: none;`
`font-style: var(--font-cookie-consent-button-primary-font-style);` | | `text-cookie-consent-button-secondary` | `font-family: var(--font-cookie-consent-button-secondary-font-family);`
`font-size: var(--cookie-consent-button-secondary-font-size);`
`font-weight: var(--font-cookie-consent-button-secondary-font-weight);`
`letter-spacing: var(--cookie-consent-button-secondary-letter-spacing);`
`line-height: var(--cookie-consent-button-secondary-line-height);`
`text-transform: none;`
`text-decoration: none;`
`font-style: var(--font-cookie-consent-button-secondary-font-style);` | | `color-label` | `color: var(--color-typography-label);` | | `color-heading` | `color: var(--color-typography-heading);` | | `color-body` | `color: var(--color-typography-body);` |