---
title: "Typography"
type: guide
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Frutjam typography system. Semantic HTML text scaling with CSS variables, WCAG accessible, Tailwind CSS v4 compatible."
url: https://frutjam.com/pl/docs/typography
---

# Typography

System typografii Frutjam obsługujący wyłącznie CSS dla Tailwind CSS v4. Semantyczna skala nagłówków i akapitów, narzędzia do responsywnego układu i integracja tekstu — nie wymaga JavaScript, dostępny WCAG AA. Współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

## Układ

`.wrapper` to narzędzie do responsywnego układu strony, które wyśrodkowuje treść w poziomie i stosuje spójne poziome dopełnienie w punktach przerwania. Użyj wariantów rozmiaru, aby ustawić ograniczenie maksymalnej szerokości dla różnych potrzeb układu.

### Wszystkie klasy

Wszystkie warianty mają tę samą responsywną skalę dopełniania. Różni się tylko maksymalna szerokość.

| Klasa          | Maksymalna szerokość | Przypadek użycia                          |
| -------------- | -------------------- | ----------------------------------------- |
| `wrapper`      | none                 | Pojemnik wyśrodkowany na całej szerokości |
| `wrapper-xs`   | 320px                | Wąskie okna dialogowe lub paski boczne    |
| `wrapper-sm`   | 640px                | Treść w jednej kolumnie                   |
| `wrapper-md`   | 768px                | Artykuły i wpisy na blogu                 |
| `wrapper-lg`   | 1024px               | Standardowe układy stron                  |
| `wrapper-xl`   | 1280px               | Szerokie układy                           |
| `wrapper-2xl`  | 1536px               | Bardzo szerokie układy                    |
| `wrapper-full` | 100%                 | Pełne krwawienie ze spójną wyściółką      |

### Responsywna wyściółka

Wszystkie warianty opakowań automatycznie skalują poziome dopełnienie w punktach przerwania — nie są potrzebne żadne dodatkowe klasy użytkowe.

```css
/* Applied to every wrapper variant */
default  → padding-inline: 1rem   (16px)
sm       → padding-inline: 2rem   (32px)
lg       → padding-inline: 4rem   (64px)
```

### Przykład układu strony

Użyj pliku `.wrapper-xl` w głównym obszarze zawartości, aby uzyskać standardowy układ strony.

```html
<header class="bg-base-200">
  <div class="wrapper-xl">
    <nav class="navbar">...</nav>
  </div>
</header>

<main class="wrapper-xl py-12">
  <h1 class="heading-4xl">Page Title</h1>
  <p class="para-base">Page content goes here.</p>
</main>

<footer class="bg-base-200">
  <div class="wrapper-xl">...</div>
</footer>
```

### Przykład układu artykułu

Użyj `.wrapper-md`, aby uzyskać czytelny układ artykułów lub postów na blogu.

```html
<article class="wrapper-md py-10 prose prose-frutjam">
  <h1>Article Title</h1>
  <p>Long-form content benefits from a narrower max-width for optimal line length.</p>
</article>
```

## Typografia

### 1. Narzędzia elementów

Klasy te są przeznaczone do bezpośredniego użycia w elementach HTML. Nagłówki są zoptymalizowane pod kątem wagi i wpływu, a akapity są zoptymalizowane pod kątem czytelności.

### Nagłówki

Użyj `.heading-{size}` w przypadku tytułów i tekstu o dużym znaczeniu.

#### Skala standardowa

`heading-xs`, `heading-sm`, `heading-md`, `heading-base`, `heading-lg`, `heading-xl`, `heading-2xl`, `heading-3xl`, `heading-4xl`, `nagłówek-5xl`, `nagłówek-6xl`, `nagłówek-7xl`, `nagłówek-8xl`, `nagłówek-9xl`

```html
<h1 class="heading-4xl">Gigantic Hero</h1>
<h2 class="heading-3xl">Section Title</h2>
<h3 class="heading-base">Small Subheading</h3>
```

#### Dynamiczna precyzja (dowolna liczba)

Frutjam pozwala oderwać się od skali. Użyj dowolnej wartości numerycznej, aby ustawić określony rozmiar w pikselach

`.heading-{number}` (np. `.heading-46`)

```html
<h2 class="heading-46">Bespoke Heading</h2>
```

### Akapity

Użyj `.para-{size}` do tekstu podstawowego, opisów i etykiet interfejsu użytkownika

#### Skala standardowa

`para-xs`, `para-sm`, `para-md`, `para-base`, `para-lg`, `para-xl`, `para-2xl`, `para-3xl`, `para-4xl`, `para-5xl`, `para-6xl`, `para-7xl`, `para-8xl`, `para-9xl`

```html
<p class="para-lg">This is a lead paragraph with extra breathing room.</p>
<p class="para-base">This is your standard UI text size.</p>
<p class="para-xs">Small footer or caption text.</p>
```

#### Dynamiczna precyzja (dowolna liczba)

Nie utknij w skali. Użyj dowolnej wartości numerycznej, aby wybrać dokładny rozmiar w pikselach wymagany przez projekt.

`.para-{number}` (np. `.para-28`)

```html
<p class="para-28">Editorial-style body text.</p>
```

### Responsywna typografia

Frutjam does not force "automatic" resizing. Instead, it gives you full control using Tailwind's mobile-first breakpoints. This ensures your design never "guesses" what your mobile layout should look like.

#### Wzór responsywny

Zawsze najpierw określ rozmiar swojego telefonu komórkowego (klasa bazowa), a następnie użyj przedrostków takich jak `md:` lub `lg:`, aby skalować w przypadku większych ekranów.

```html
<h1 class="heading-2xl md:heading-5xl lg:heading-9xl">
  Responsive Headline
</h1>

<p class="para-sm md:para-base lg:para-lg">
  Body text that stays comfortable on all devices.
</p>
```

### 2. Tekst bogaty (proza)

Podczas renderowania treści Markdown lub CMS nie można ręcznie dodawać klas takich jak `heading-lg` do każdego tagu. `prose-frutjam` to opakowanie, które łączy oficjalną wtyczkę `@tailwindcss/typography` z tokenami projektowymi Frutjam — dzięki czemu tagi HTML bez stylu automatycznie dziedziczą kolory i typografię motywu.

#### Organizować coś

Upewnij się, że obie wtyczki są aktywne w CSS Tailwind v4:

```css
@import "tailwindcss";
@plugin "frutjam";
@plugin "@tailwindcss/typography";
```

#### Stosowanie

Dodaj zarówno `.prose`, jak i `.prose-frutjam` do elementu opakowania. `.prose` aktywuje wtyczkę typograficzną; `.prose-frutjam` mapuje na nim tokeny tematyczne Frutjama.

```html
<article class="prose prose-frutjam max-w-none">
  <h1>Article Title</h1>
  <p>Body text, links, and lists all inherit Frutjam theme colors automatically.</p>
  <ul>
    <li>Links use your primary color</li>
    <li>Blockquote borders use your primary color</li>
    <li>Headings, body, and captions use semantic on-base colors</li>
  </ul>
</article>
```

#### Co zostaje zmapowane

Opakowanie zastępuje następujące zmienne CSS prozy za pomocą tokenów Frutjam:

```css
/* prose-frutjam maps these automatically */
body text      → --color-body
headings       → --color-on-base
links          → --color-primary
blockquotes    → --color-on-base  (text), --color-primary (border)
bullets        → --color-neutral
code           → --color-on-base
captions       → --color-on-neutral
```

#### Tryb ciemny

Dodaj `.prose-invert` obok `.prose-frutjam`, aby uzyskać ciemne tła — tokeny invert są również mapowane na kolory Frutjam.

```html
<article class="prose prose-frutjam prose-invert bg-neutral p-6 rounded-lg">
  <h2>Dark Background Content</h2>
  <p>Inverted tokens keep text legible on dark surfaces.</p>
</article>
```