---
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/tr/docs/typography
---

# Typography

Tailwind CSS v4.0 için Frutjam'ın yalnızca CSS tipografi sistemi. Anlamsal başlık ve paragraf ölçeği, duyarlı düzen yardımcı programları ve düzyazı entegrasyonu; JavaScript gerekmez, WCAG AA'ya erişilebilir. Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.

## Düzen

`.wrapper`, içeriği yatay olarak ortalayan ve kesme noktaları boyunca tutarlı yatay dolgu uygulayan duyarlı bir sayfa düzeni yardımcı programıdır. Farklı düzen gereksinimlerine yönelik maksimum genişlik sınırlaması ayarlamak için boyut çeşitlerini kullanın.

### Tüm Sınıflar

Tüm varyantlar aynı duyarlı dolgu ölçeğini paylaşır. Yalnızca maksimum genişlik farklıdır.

| Sınıf          | Maksimum Genişlik | Kullanım Örneği                     |
| -------------- | ----------------- | ----------------------------------- |
| `wrapper`      | none              | Tam genişlikte merkezli konteyner   |
| `wrapper-xs`   | 320px             | Dar diyaloglar veya kenar çubukları |
| `wrapper-sm`   | 640px             | Tek sütunlu içerik                  |
| `wrapper-md`   | 768px             | Makaleler ve blog gönderileri       |
| `wrapper-lg`   | 1024px            | Standart sayfa düzenleri            |
| `wrapper-xl`   | 1280px            | Geniş düzenler                      |
| `wrapper-2xl`  | 1536px            | Ekstra geniş düzenler               |
| `wrapper-full` | 100%              | Tutarlı dolgu ile tam taşma         |

### Duyarlı Dolgu

Tüm sarmalayıcı çeşitleri yatay dolguyu kesme noktaları boyunca otomatik olarak ölçeklendirir; ekstra yardımcı program sınıflarına gerek yoktur.

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

### Sayfa Düzeni Örneği

Standart bir sayfa düzeni için ana içerik alanınızda `.wrapper-xl` kullanın.

```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>
```

### Makale Düzeni Örneği

Okunabilir makale veya blog yazısı düzenleri için `.wrapper-md` kullanın.

```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>
```

## Tipografi

### 1. Öğe Yardımcı Programları

Bu sınıflar HTML öğelerinde doğrudan kullanım için tasarlanmıştır. Başlıklar ağırlık ve etki açısından optimize edilirken Paragraflar okunabilirlik için optimize edilmiştir.

### Başlıklar

Başlıklar ve yüksek öneme sahip metinler için `.heading-{size}` kullanın.

#### Standart Ölçek

`heading-xs`, `heading-sm`, `heading-md`, `heading-base`, `heading-lg`, `heading-xl`, `heading-2xl`, `heading-3xl`, `heading-4xl`, `başlık-5xl`, `başlık-6xl`, `başlık-7xl`, `başlık-8xl`, `başlık-9xl`

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

#### Dinamik Hassasiyet (Herhangi Bir Sayı)

Frutjam, tartıdan kopmanızı sağlar. Belirli bir piksel boyutunu ayarlamak için herhangi bir sayısal değeri kullanın

`.heading-{number}` (ör. `.heading-46`)

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

### Paragraflar

Gövde metni, açıklamalar ve kullanıcı arayüzü etiketleri için `.para-{size}` kullanın

#### Standart Ölçek

`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>
```

#### Dinamik Hassasiyet (Herhangi Bir Sayı)

Bir teraziye takılıp kalmayın. Tasarımınızın gerektirdiği tam piksel boyutunu ayarlamak için herhangi bir sayısal değeri kullanın.

`.para-{number}` (ör. `.para-28`)

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

### Duyarlı Tipografi

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.

#### Duyarlı Desen

Her zaman önce mobil boyutunuzu tanımlayın (temel sınıf), ardından daha büyük ekranlara ölçeklendirmek için `md:` veya `lg:` gibi önekleri kullanın.

```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. Zengin Metin (Düzyazı)

Markdown veya CMS içeriğini oluştururken, her etikete `heading-lg` gibi sınıfları manuel olarak ekleyemezsiniz. `prose-frutjam`, resmi `@tailwindcss/typography` eklentisini Frutjam'ın tasarım belirteçleriyle birleştiren bir sarmalayıcıdır; böylece biçimlendirilmemiş HTML etiketleri, temanızın renklerini ve tipografisini otomatik olarak devralır.

#### Kurmak

Tailwind v4 CSS'nizde her iki eklentinin de etkin olduğundan emin olun:

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

#### Kullanım

Sarmalayıcı öğesine hem `.prose` hem de `.prose-frutjam`'ı ekleyin. `.prose` tipografi eklentisini etkinleştirir; `.prose-frutjam`, Frutjam'ın tema jetonlarını buna eşler.

```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>
```

#### Neler Haritalanır?

Sarmalayıcı, Frutjam belirteçleriyle aşağıdaki düz CSS değişkenlerini geçersiz kılar:

```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
```

#### Karanlık Mod

Koyu arka planlar için `.prose-frutjam`'ın yanına `.prose-invert` ekleyin; ters çevirme belirteçleri de Frutjam renkleriyle eşlenir.

```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>
```