İçerik · Typography

Tipografi

Başlık, üst başlık, alt başlık, gövde ve etiket sınıfları. Dokuz kademeli ölçek.

CSS: kararlı
JavaScript: gerekmiyor
React: kararlı
Vue: kararlı

Örnekler

Başlık düzeyleri Canlı örnek

Sosyal Güvenlik Kurumu

Emeklilik başvurusu

Yaş ve prim gün sayısı koşullarını sağlıyorsanız çevrim içi başvurun.

Başvuru koşulları

Yaş koşulu

İstisnalar

HTML kodunu göster

<p class="trds-ust-baslik">Sosyal Güvenlik Kurumu</p>
<h1 class="trds-baslik trds-baslik--1">Emeklilik başvurusu</h1>
<p class="trds-alt-baslik">Yaş ve prim gün sayısı koşullarını sağlıyorsanız çevrim içi başvurun.</p>
<h2 class="trds-baslik trds-baslik--2">Başvuru koşulları</h2>
<h3 class="trds-baslik trds-baslik--3">Yaş koşulu</h3>
<h4 class="trds-baslik trds-baslik--4">İstisnalar</h4>

Gövde metni Canlı örnek

Başvurunuz 15 iş günü içinde sonuçlanır. Sonuç e-Devlet üzerinden bildirilir.

Eksik belge varsa size SMS gönderilir. Belgeyi 10 gün içinde yüklemeniz gerekir.

Son güncelleme: 12 Mart 2026

HTML kodunu göster

<p class="trds-govde trds-govde--buyuk">Başvurunuz 15 iş günü içinde sonuçlanır. Sonuç e-Devlet üzerinden bildirilir.</p>
<p class="trds-govde">Eksik belge varsa size SMS gönderilir. Belgeyi 10 gün içinde yüklemeniz gerekir.</p>
<p class="trds-govde trds-kucuk">Son güncelleme: 12 Mart 2026</p>

Ne zaman kullanılır

Her sayfada tek bir h1 bulunur. Başlık düzeyi atlanmaz.
Görsel boyut ile anlamsal düzey ayrıdır. h2 öğesine trds-baslik--3 sınıfı verilebilir.
Üst başlık kısa bir bağlam verir: kurum adı, bölüm adı veya belge türü.

Erişilebilirlik

Satır uzunluğu 38rem ile sınırlıdır. Uzun satır okumayı yavaşlatır.
Satır yüksekliği 1,5 altına düşmez. Türkçe uzun sözcük taşır.
Yazı tipi her ağırlıkta ş, ğ, ı, İ, ö, ç, ü taşır.

Karşılanan WCAG 2.2 ölçütleri 1.3.1 1.4.8 1.4.12 2.4.6

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: IE, JP, DE, NO.