---
title: "Typography"
description: "Text style classes, text color classes, font tokens and the Tailwind type scale Systhema sets."
requested_language: ar
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/ar/next/reference/tokens/typography
version: unreleased (main)
docs_index: https://docs.systhema.app/ar/next/llms.txt
---
> This page isn't translated yet. Showing English.


<!-- generated by pnpm docs:generate; do not edit -->

## Text styles

Each text style is one class that sets font family, size, weight, line height and letter spacing from CSS variables. Size and line height change per breakpoint (`sm`, `md`, `lg`); the class picks up the right value automatically. Variables follow the class name: `text-h1` reads `--typography-h1-font-size`, `--typography-h1-line-height`, `--typography-h1-letter-spacing`, `--font-h1-font-family` and `--font-h1-font-weight`.

| Class                                  | Size / line height (sm) | Size / line height (md) | Size / line height (lg) | Weight | Letter spacing    | Transform   |
| -------------------------------------- | ----------------------- | ----------------------- | ----------------------- | ------ | ----------------- | ----------- |
| `text-h1`                              | `33.31px / 42.2px`      | `43.19px / 50.47px`     | `54.07px / 59.21px`     | `700`  | `0px`             | `none`      |
| `text-h2`                              | `29.48px / 38.59px`     | `36.6px / 45.07px`      | `44.14px / 51.22px`     | `700`  | `0px`             | `none`      |
| `text-h3`                              | `26.09px / 35.07px`     | `31.02px / 40.08px`     | `36.03px / 44.58px`     | `700`  | `0px`             | `none`      |
| `text-h4`                              | `23.09px / 31.65px`     | `26.29px / 35.29px`     | `29.41px / 38.53px`     | `700`  | `0px`             | `none`      |
| `text-h5`                              | `20.43px / 28.36px`     | `22.28px / 30.67px`     | `24.01px / 32.74px`     | `700`  | `0px`             | `none`      |
| `text-h6`                              | `18.08px / 25.26px`     | `18.88px / 26.34px`     | `19.6px / 27.29px`      | `700`  | `0px`             | `none`      |
| `text-label`                           | `12px / 22px`           | `14px / 24px`           | `14px / 24px`           | `700`  | `3px · 4px · 4px` | `uppercase` |
| `text-lead`                            | `18px / 28px`           | `20px / 28px`           | `20px / 30px`           | `400`  | `0px`             | `none`      |
| `text-body`                            | `16px / 28px`           | `16px / 28px`           | `16px / 28px`           | `400`  | `0px`             | `none`      |
| `text-small`                           | `12px / 22px`           | `14px / 24px`           | `14px / 24px`           | `400`  | `0px`             | `none`      |
| `text-form-label`                      | `16px / 28px`           | `16px / 28px`           | `16px / 28px`           | `500`  | `0px`             | `none`      |
| `text-form-description`                | `16px / 28px`           | `16px / 28px`           | `16px / 28px`           | `400`  | `0px`             | `none`      |
| `text-form-block`                      | `16px / 28px`           | `16px / 28px`           | `16px / 28px`           | `400`  | `0px`             | `none`      |
| `text-form-inline`                     | `16px / 28px`           | `16px / 28px`           | `16px / 28px`           | `400`  | `0px`             | `none`      |
| `text-cookie-consent-title`            | `18.08px / 25.26px`     | `18.88px / 26.34px`     | `19.6px / 27.29px`      | `700`  | `0px`             | `none`      |
| `text-cookie-consent-description`      | `16px / 28px`           | `16px / 28px`           | `16px / 28px`           | `400`  | `0px`             | `none`      |
| `text-cookie-consent-category-title`   | `18.08px / 25.26px`     | `18.88px / 26.34px`     | `19.6px / 27.29px`      | `700`  | `0px`             | `none`      |
| `text-cookie-consent-button-primary`   | `16px / 28px`           | `16px / 28px`           | `16px / 24px`           | `600`  | `0px`             | `none`      |
| `text-cookie-consent-button-secondary` | `16px / 28px`           | `16px / 28px`           | `16px / 24px`           | `600`  | `0px`             | `none`      |

## Text colors

Text color classes set `color` from a color-system role, so they follow the theme.

| Token     | CSS variable                 | Class           | Default   | Dark      |
| --------- | ---------------------------- | --------------- | --------- | --------- |
| `label`   | `--color-typography-label`   | `color-label`   | `#000000` | `#ffffff` |
| `heading` | `--color-typography-heading` | `color-heading` | `#000000` | `#ffffff` |
| `body`    | `--color-typography-body`    | `color-body`    | `#000000` | `#ffffff` |

## Font tokens

Font family and weight per role. Weights are emitted as numbers; each weight token also has a `-font-style` sibling (`normal` or `italic`).

| Token                                          | CSS variable                                            | Value                                                                               |
| ---------------------------------------------- | ------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| `default.body.fontFamily`                      | `--font-default-body-font-family`                       | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `default.body.fontWeight`                      | `--font-default-body-font-weight`                       | `400`                                                                               |
| `default.heading.fontFamily`                   | `--font-default-heading-font-family`                    | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `default.heading.fontWeight`                   | `--font-default-heading-font-weight`                    | `700`                                                                               |
| `h1.fontFamily`                                | `--font-h1-font-family`                                 | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `h1.fontWeight`                                | `--font-h1-font-weight`                                 | `700`                                                                               |
| `h2.fontFamily`                                | `--font-h2-font-family`                                 | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `h2.fontWeight`                                | `--font-h2-font-weight`                                 | `700`                                                                               |
| `h3.fontFamily`                                | `--font-h3-font-family`                                 | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `h3.fontWeight`                                | `--font-h3-font-weight`                                 | `700`                                                                               |
| `h4.fontFamily`                                | `--font-h4-font-family`                                 | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `h4.fontWeight`                                | `--font-h4-font-weight`                                 | `700`                                                                               |
| `h5.fontFamily`                                | `--font-h5-font-family`                                 | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `h5.fontWeight`                                | `--font-h5-font-weight`                                 | `700`                                                                               |
| `h6.fontFamily`                                | `--font-h6-font-family`                                 | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `h6.fontWeight`                                | `--font-h6-font-weight`                                 | `700`                                                                               |
| `lead.fontFamily`                              | `--font-lead-font-family`                               | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `lead.fontWeight`                              | `--font-lead-font-weight`                               | `400`                                                                               |
| `body.fontFamily`                              | `--font-body-font-family`                               | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `body.fontWeight`                              | `--font-body-font-weight`                               | `400`                                                                               |
| `small.fontFamily`                             | `--font-small-font-family`                              | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `small.fontWeight`                             | `--font-small-font-weight`                              | `400`                                                                               |
| `extrasmall.fontFamily`                        | `--font-extrasmall-font-family`                         | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `extrasmall.fontWeight`                        | `--font-extrasmall-font-weight`                         | `400`                                                                               |
| `label.fontFamily`                             | `--font-label-font-family`                              | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `label.fontWeight`                             | `--font-label-font-weight`                              | `700`                                                                               |
| `button.primary.fontFamily`                    | `--font-button-primary-font-family`                     | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `button.primary.fontWeight`                    | `--font-button-primary-font-weight`                     | `600`                                                                               |
| `button.secondary.fontFamily`                  | `--font-button-secondary-font-family`                   | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `button.secondary.fontWeight`                  | `--font-button-secondary-font-weight`                   | `600`                                                                               |
| `gallery.navigation.pagination.fontFamily`     | `--font-gallery-navigation-pagination-font-family`      | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `gallery.navigation.pagination.fontWeight`     | `--font-gallery-navigation-pagination-font-weight`      | `400`                                                                               |
| `gallery.navigation.buttons.fontFamily`        | `--font-gallery-navigation-buttons-font-family`         | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `gallery.navigation.buttons.fontWeight`        | `--font-gallery-navigation-buttons-font-weight`         | `600`                                                                               |
| `carousel.bottom.pagination.fontFamily`        | `--font-carousel-bottom-pagination-font-family`         | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `carousel.bottom.pagination.fontWeight`        | `--font-carousel-bottom-pagination-font-weight`         | `400`                                                                               |
| `carousel.bottom.buttons.fontFamily`           | `--font-carousel-bottom-buttons-font-family`            | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `carousel.bottom.buttons.fontWeight`           | `--font-carousel-bottom-buttons-font-weight`            | `600`                                                                               |
| `chip.fontFamily`                              | `--font-chip-font-family`                               | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `chip.fontWeight`                              | `--font-chip-font-weight`                               | `400`                                                                               |
| `accordion.fontFamily`                         | `--font-accordion-font-family`                          | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `accordion.fontWeight`                         | `--font-accordion-font-weight`                          | `700`                                                                               |
| `form.label.fontFamily`                        | `--font-form-label-font-family`                         | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `form.label.fontWeight`                        | `--font-form-label-font-weight`                         | `500`                                                                               |
| `form.description.fontFamily`                  | `--font-form-description-font-family`                   | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `form.description.fontWeight`                  | `--font-form-description-font-weight`                   | `400`                                                                               |
| `form.block.fontFamily`                        | `--font-form-block-font-family`                         | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `form.block.fontWeight`                        | `--font-form-block-font-weight`                         | `400`                                                                               |
| `form.inline.fontFamily`                       | `--font-form-inline-font-family`                        | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `form.inline.fontWeight`                       | `--font-form-inline-font-weight`                        | `400`                                                                               |
| `header.navigation.item.fontFamily`            | `--font-header-navigation-item-font-family`             | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `header.navigation.item.fontWeight`            | `--font-header-navigation-item-font-weight`             | `400`                                                                               |
| `header.navigation.menuToggle.fontFamily`      | `--font-header-navigation-menu-toggle-font-family`      | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `header.navigation.menuToggle.fontWeight`      | `--font-header-navigation-menu-toggle-font-weight`      | `400`                                                                               |
| `header.menu.navigation.item.fontFamily`       | `--font-header-menu-navigation-item-font-family`        | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `header.menu.navigation.item.fontWeight`       | `--font-header-menu-navigation-item-font-weight`        | `400`                                                                               |
| `header.menu.navigation.menuToggle.fontFamily` | `--font-header-menu-navigation-menu-toggle-font-family` | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `header.menu.navigation.menuToggle.fontWeight` | `--font-header-menu-navigation-menu-toggle-font-weight` | `400`                                                                               |
| `footer.main.navigation.item.fontFamily`       | `--font-footer-main-navigation-item-font-family`        | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `footer.main.navigation.item.fontWeight`       | `--font-footer-main-navigation-item-font-weight`        | `400`                                                                               |
| `cookieConsent.title.fontFamily`               | `--font-cookie-consent-title-font-family`               | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `cookieConsent.title.fontWeight`               | `--font-cookie-consent-title-font-weight`               | `700`                                                                               |
| `cookieConsent.description.fontFamily`         | `--font-cookie-consent-description-font-family`         | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `cookieConsent.description.fontWeight`         | `--font-cookie-consent-description-font-weight`         | `400`                                                                               |
| `cookieConsent.button.primary.fontFamily`      | `--font-cookie-consent-button-primary-font-family`      | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `cookieConsent.button.primary.fontWeight`      | `--font-cookie-consent-button-primary-font-weight`      | `600`                                                                               |
| `cookieConsent.button.secondary.fontFamily`    | `--font-cookie-consent-button-secondary-font-family`    | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `cookieConsent.button.secondary.fontWeight`    | `--font-cookie-consent-button-secondary-font-weight`    | `600`                                                                               |
| `cookieConsent.category.title.fontFamily`      | `--font-cookie-consent-category-title-font-family`      | `Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` |
| `cookieConsent.category.title.fontWeight`      | `--font-cookie-consent-category-title-font-weight`      | `700`                                                                               |

## Tailwind type scale

Systhema keeps Tailwind's `text-*` and `tracking-*` utilities but sets their values in px. Prefer the text style classes above for content; use these for one-off UI text.

| Class       | Font size | Line height          |
| ----------- | --------- | -------------------- |
| `text-xs`   | `12px`    | `calc(1 / 0.75)`     |
| `text-sm`   | `14px`    | `calc(1.25 / 0.875)` |
| `text-base` | `16px`    | `calc(1.5 / 1)`      |
| `text-lg`   | `18px`    | `calc(1.75 / 1.125)` |
| `text-xl`   | `20px`    | `calc(1.75 / 1.25)`  |
| `text-2xl`  | `24px`    | `calc(2 / 1.5)`      |
| `text-3xl`  | `30px`    | `calc(2.25 / 1.875)` |
| `text-4xl`  | `36px`    | `calc(2.5 / 2.25)`   |
| `text-5xl`  | `48px`    | `1`                  |
| `text-6xl`  | `60px`    | `1`                  |
| `text-7xl`  | `72px`    | `1`                  |
| `text-8xl`  | `96px`    | `1`                  |
| `text-9xl`  | `128px`   | `1`                  |

| Class              | Letter spacing |
| ------------------ | -------------- |
| `tracking-tighter` | `-0.8px`       |
| `tracking-tight`   | `-0.4px`       |
| `tracking-normal`  | `0px`          |
| `tracking-wide`    | `0.4px`        |
| `tracking-wider`   | `0.8px`        |
| `tracking-widest`  | `1.6px`        |