Tipografi

Nasıl çalışır

Her metin stili bir font kısaltmasıdır: kalınlık, boyut, satır yüksekliği ve yazı ailesi birlikte gelir. Böylece bir başlığın boyutu ile satır yüksekliği birbirinden ayrı değişemez. Tailwind’de her stil bir type-* aracıdır: type-heading-lg, type-body-md gibi.

Arayüz yazı ailesi Inter, kod ve hesap numarası gibi sabit genişlikli değerler JetBrains Mono’dur. Marka kılavuzu farklı bir aile seçerse yalnızca token değişir. Gövde metni Inter’in cv11 ve ss01 özelliklerini açar: tek katlı “a” ve açık rakamlar.

Büyük başlıklar sıkı harf aralığı alır (letter-spacing-* token’ları): display ve heading-xl −0,02 em, heading-lg −0,015 em, heading-md ve heading-sm −0,01 em. type-* araçları harf aralığını kendileri ekler. Başlık satırları dengelenir (text-wrap: balance), paragraflar ise son satırda tek kelime bırakmayacak biçimde kırılır (text-wrap: pretty). heading-sm orta kalınlıktadır (500); title-sm Türkçe alt uzantılar (ğ, ş, ç) kırpılmasın diye 20 px satır yüksekliği taşır.

Ölçek

Değer sütunu boyut/satır yüksekliği · kalınlık biçimindedir. Satır yükseklikleri 4’ün katıdır, böylece metin boşluk ızgarasına oturur.

Token	Değer	Önizleme
--bigbang-text-display Pano özet rakamları, karşılama ekranı	40/48 · 600	Ödeme tamamlandı
--bigbang-text-heading-xl Sayfa başlığı	32/40 · 600	Ödeme tamamlandı
--bigbang-text-heading-lg Bölüm başlığı	24/32 · 600	Ödeme tamamlandı
--bigbang-text-heading-md Kart ve panel başlığı	20/28 · 600	Ödeme tamamlandı
--bigbang-text-heading-sm Alt başlık, diyalog başlığı	16/24 · 500	Ödeme tamamlandı
--bigbang-text-title-sm	16/20 · 500	Ödeme tamamlandı
--bigbang-text-body-lg Uzun okuma metni	16/24 · 400	Ödeme tamamlandı
--bigbang-text-body-md Varsayılan arayüz metni, tablo hücreleri	14/20 · 400	Ödeme tamamlandı
--bigbang-text-body-sm Yardım metni, zaman damgası	12/16 · 400	Ödeme tamamlandı
--bigbang-text-label-lg Form bölümü başlıkları	16/24 · 500	Ödeme tamamlandı
--bigbang-text-label-md Düğme ve form etiketleri	14/20 · 500	Ödeme tamamlandı
--bigbang-text-label-sm Rozet, tablo başlığı	12/16 · 500	Ödeme tamamlandı
--bigbang-text-code-md IBAN, işlem numarası, kod	14/20 · 400	Ödeme tamamlandı

Hiyerarşi

Bir ekranda tek bir heading-xl olur: sayfanın adı. Bölümler heading-lg, kartlar heading-md kullanır. Başlık düzeyini görünüşe göre değil, belge yapısına göre seçin; ekran okuyucular başlıklar arasında bu sırayla gezinir.

Rakamlar

Tutar ve tarih gibi sütun halinde okunan sayılar için tabular-nums kullanın: rakamlar eşit genişlikte olur ve alt alta hizalanır. Tutarlar sağa yaslanır ve <Money> bileşeniyle ₺1.250,00 biçiminde yazılır (I18N-10). Biçim kuralları Biçim ve yerelleştirme sayfasındadır.

Satır uzunluğu

Gövde metninde bir satır 45-75 karakterdir; uzun metin bloklarına max-width: 65ch verin. Tablo hücreleri, etiketler ve kısa yardımcı metinler bu sınırın dışındadır.

Kaydırma ve kesme

• Metin sığmadığında alt satıra geçer. Kesme yalnızca Truncate bileşeniyle yapılır ve tam metin ipucunda ve erişilebilir adda kalır (I18N-16).
• Tutar, referans numarası, tarih, yasal metin ve hata metni kesilmez.
• Metin kutularına sabit yükseklik verilmez; satır yüksekliği ve harf aralığı büyütüldüğünde metin kaybolmaz (WCAG 1.4.12).
• Uzun kelimeler ve adresler için overflow-wrap: anywhere kullanın.

Türkçe karakterler

• Yazı tipi Ç Ğ İ ı Ö Ş Ü harflerini ve ₺ simgesini kapsar. Yeni bir marka yazı tipi bu karakterler olmadan kabul edilmez (I18N-23).
• Büyük harfe çevirme toLocaleUpperCase('tr-TR') ile yapılır; CSS text-transform: uppercase kullanılmaz.
• Yazı tipi yüklenene kadar ölçüleri yakın bir yedek yazı tipi gösterilir; satır yüksekliği sayısal değerdir, normal değildir (FID-06).

Yönergeler

Stil adını kullanın

type-heading-md

YapınStil boyutu, satır yüksekliğini ve kalınlığı birlikte taşır.

text-[19px] leading-[26px] font-bold

YapmayınAyrı ayrı yazılan değerler zamanla birbirinden kopar.

Tutarları hizalayın

1.250,00 TL18.400,50 TL311,10 TL

YapınEşit genişlikli rakamlar sağa yaslanınca basamaklar alt alta gelir.

1.250,00 TL18.400,50 TL311,10 TL

YapmayınSola yaslı ve orantılı rakamlarla tutarları karşılaştırmak zorlaşır.