Tipografi

02 · Tipografi

Metinler Public Sans, kod ve sayı etiketleri DM Mono ile yazılır (ikisi de SIL Open Font License). Bileşenlerin gövde metni 14px (text-sm); başlık etiketleri mürekkep rengini ve hafif negatif harf aralığını kendiliğinden alır.

Public Sans · DM Mono

Başlıklar

h1–h6 etiketleri yalnızca rengi (gray-900, koyu temada zinc-100) ve -0,011em harf aralığını tema katmanından alır; boyut ve kalınlığı text-* ile font-* sınıflarıyla siz verirsiniz. Aşağıdaki eşleşme panel genelinde kullanılır.

CANLI ÖRNEK

<div class="space-y-4">
    <p class="text-4xl font-bold tracking-tight">Aylık satışlar · 4xl / 40px</p>
    <p class="text-3xl font-bold tracking-tight">Aylık satışlar · 3xl / 32px</p>
    <h1 class="text-2xl font-semibold">Sayfa başlığı · 2xl / 26px</h1>
    <h2 class="text-xl font-semibold">Bölüm başlığı · xl / 21px</h2>
    <h3 class="text-lg font-semibold">Alt bölüm · lg / 18px</h3>
    <h4 class="text-base font-semibold">Kart başlığı (büyük) · base / 16px</h4>
    <h5 class="text-sm font-semibold">Kart başlığı · sm / 14px</h5>
    <h6 class="text-xs font-semibold tracking-wide text-gray-500 uppercase dark:text-zinc-400">Bölüm etiketi · xs / 12px</h6>
</div>

Prop	Değerler
`text-*`	2xl (sayfa) \| xl (bölüm) \| lg \| base \| sm (kart)
`font-*`	semibold (başlık) \| bold (büyük rakam ve vitrin)

Metin boyutları

Her text-* boyutu kendi satır yüksekliğiyle tanımlıdır, ayrıca leading-* vermeniz gerekmez. Tablo, form ve kart içerikleri text-sm, alan açıklamaları text-xs, tablo başlıkları gibi küçük büyük harf etiketler text-2xs kullanır.

CANLI ÖRNEK

<div class="space-y-3">
    <p class="text-base">Giriş metni (base / 16px). Panel, ekiplerin siparişleri yönetmesini, kargoları izlemesini ve raporları takip etmesini sağlar.</p>
    <p class="text-sm">Gövde metni (sm / 14px). Tablolar, formlar ve kartların içeriği bu ölçüdedir.</p>
    <p class="text-xs text-gray-500 dark:text-zinc-400">Yardım metni (xs / 12px). Alanların altındaki açıklamalar.</p>
    <p class="text-2xs font-semibold tracking-wider text-gray-400 uppercase dark:text-zinc-500">Küçük etiket (2xs / 11px)</p>
</div>

Prop	Değerler
`text-*`	2xs \| xs \| sm \| base \| lg \| xl \| 2xl \| 3xl \| 4xl

Ağırlıklar

Önerilen yükleme Public Sans'ın dört ağırlığını içerir. Gövde metni font-normal, tablo hücresindeki öne çıkan değer ve etiketler font-medium, başlıklar font-semibold, büyük rakamlar font-bold kullanır.

CANLI ÖRNEK

<div class="space-y-1 text-lg">
    <p class="font-normal">Regular 400 · Müşteri kaydı</p>
    <p class="font-medium">Medium 500 · Müşteri kaydı</p>
    <p class="font-semibold">Semibold 600 · Müşteri kaydı</p>
    <p class="font-bold">Bold 700 · Müşteri kaydı</p>
</div>

Prop	Değerler
`font-*`	normal \| medium \| semibold \| bold

Sayılar ve kod

Sütunlarda alt alta gelen rakamlar için tabular-nums kullanın; her rakam aynı genişlikte yazılır. code, kbd ve pre etiketleri DM Mono'yu kendiliğinden alır; kod, tarih ve sipariş numarası gibi değerlerde font-mono sınıfını da kullanabilirsiniz.

CANLI ÖRNEK

<div class="space-y-2">
    <p class="text-2xl font-semibold tabular-nums">1.248 · 3.106 · 96</p>
    <p class="font-mono text-sm">SİP-1042 · 2026-10-07</p>
    <p class="text-sm">Satır içi <code class="rounded-sm bg-gray-100 px-1.5 py-0.5 text-[0.85em] text-gray-900 dark:bg-zinc-800 dark:text-zinc-100">acun:table</code>, <a href="#" class="font-medium text-brand-600 hover:underline dark:text-brand-400">bağlantı</a>, <strong>kalın</strong> ve <em>italik</em>.</p>
</div>

Prop	Değerler
`tabular-nums`	Eşit genişlikte rakamlar
`font-mono`	DM Mono

Marka yazısı

Düzenlerde logonun yanındaki uygulama adı font-brand ile yazılır. Varsayılanı Public Sans'tır; uygulamanız marka yazısı için ayrı bir font kullanıyorsa yalnızca bu değişkeni değiştirin.

CANLI ÖRNEK

<span class="font-brand text-[15px] font-bold tracking-tight text-gray-900 dark:text-zinc-100">Acme</span>

Prop	Değerler
`font-brand`	Marka yazısı ailesi (varsayılan Public Sans)

Fontları yüklemek

Paket font dosyası içermez; Public Sans ve DM Mono'yu uygulamanız yükler. Düzenlerin head slot'una bir font servisinin bağlantısını ekleyin ya da dosyaları kendiniz barındırın.

BLADE

{{-- acun:layout.* bileşenlerinin head slot'unda --}}
<acun:slot:head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap">
</acun:slot:head>

Fontu değiştirmek

Font aileleri @theme içindeki --font-sans, --font-mono ve --font-brand değişkenlerinden gelir. Uygulamanın CSS'inde bunları yeniden tanımlayarak tüm bileşenlerin fontunu değiştirebilirsiniz.

CSS

/* app.css — @import '@acunsoft/acun-ui-core'; satırından sonra */
@theme {
    --font-brand: 'Poppins', ui-sans-serif, system-ui, sans-serif;
}

Prop	Değerler
`--font-sans · --font-mono · --font-brand`	Font ailesi değişkenleri

API

Prop'lar ve slot'lar

Bileşenin kabul ettiği değerler.

Prop	Varsayılan	Açıklama
`font-sans`	`Public Sans`	Tüm metinler
`font-mono`	`DM Mono`	code, kbd, pre, sayı etiketleri
`font-brand`	`Public Sans`	Logo yanındaki marka yazısı
`text-2xs`	`11px / 16px`	Küçük büyük harf etiketler, tablo başlıkları
`text-xs`	`12px / 18px`	Yardım metni, rozet
`text-sm`	`14px / 22px`	Gövde metni, form ve tablo
`text-base`	`16px / 24px`	Giriş metni, büyük kart başlığı
`text-lg`	`18px / 26px`	Alt bölüm başlığı
`text-xl`	`21px / 28px`	Bölüm başlığı
`text-2xl`	`26px / 34px`	Sayfa başlığı
`text-3xl`	`32px / 40px`	Vitrin başlığı
`text-4xl`	`40px / 48px`	Büyük vitrin başlığı