Tipografi
Yazı yüzleri, ağırlıklar ve yazı ölçeği.
Yazı yüzleri
Başlık
Outfit
Gövde
IBM Plex Sans
Kod ve teknik kimlik
ui-monospaceKod benzeri metin sistemin eş aralıklı yazı yüzünü kullanır; indirilecek ek dosya yoktur.
Yazı yüzleri kendi sunucumuzdan verilir; harici yazı yüzü servisi kullanılmaz. Lisans: SIL Open Font License.
Ağırlık
İzinli:
- 400
- 600
- 700
Kullanılmaz:
- 100
- 200
- 300
- 500
- 800
- 900
Ad ve gövde 400, vurgu 600, başlık 700. İnce ağırlıklar küçük boyutta okunmaz.
İtalik
Ekran arayüzünde italik kullanılmaz; vurgu ağırlık ve renkle yapılır. Basılı belgelerde yerleşik gelenekler korunabilir.
Ölçek
Ölçek, Apple Human Interface Guidelines tipografi tablosunun Small içerik boyutu kademesine dayanır: yoğun veri ekranlarına uygun en yakın kademedir. Birim rem’dir; tablo varsayılan 16 px tabanındaki karşılıkları gösterir.
| Token | Boyut | Satır | Harf ar. | Rol |
|---|---|---|---|---|
text-caption2 | 11px · 0.6875rem | 13px | 0.006em | En küçük izinli metin |
text-caption1 | 11px · 0.6875rem | 13px | 0.006em | Etiket, rozet |
text-footnote | 12px · 0.75rem | 16px | 0em | Dipnot, yoğun tablo satırı |
text-subhead | 13px · 0.8125rem | 18px | -0.006em | Alt başlık |
text-calloutharf aralığı ara değer | 14px · 0.875rem | 19px | -0.011em | Öne çıkarılmış metin |
text-body | 15px · 0.9375rem | 20px | -0.016em | Paragraf, varsayılan gövde |
text-title3harf aralığı ara değer | 18px · 1.125rem | 23px | -0.025em | Bölüm başlığı |
text-title2 | 20px · 1.25rem | 25px | -0.023em | Sayfa alt başlığı |
text-title1harf aralığı ara değer | 26px · 1.625rem | 32px | 0.005em | Sayfa başlığı |
text-large-titleharf aralığı ara değer | 32px · 2rem | 39px | 0.010em | En üst başlık |
Small kademesinde Caption 1 ve Caption 2 aynı değere düşer; yeni tasarım bu ikisini ayırt etmeye güvenmemelidir.
Günlük üretim raporu: 1.284,50 kg — ğüşıöç
Günlük üretim raporu: 1.284,50 kg — ğüşıöç
Günlük üretim raporu: 1.284,50 kg — ğüşıöç
Günlük üretim raporu: 1.284,50 kg — ğüşıöç
Günlük üretim raporu: 1.284,50 kg — ğüşıöç
Günlük üretim raporu: 1.284,50 kg — ğüşıöç
Günlük üretim raporu: 1.284,50 kg — ğüşıöç
Günlük üretim raporu: 1.284,50 kg — ğüşıöç
Günlük üretim raporu: 1.284,50 kg — ğüşıöç
Günlük üretim raporu: 1.284,50 kg — ğüşıöç
En küçük boyut
11px. Bundan küçük metin kullanılmaz.
Form alanı yazısı
--text-field 16/20 · 1rem
Yazı alanları (input, select, textarea) ölçeğin dışında ayrı bir boyut kullanır: iOS Safari, yazısı 16 px’ten küçük bir alana odaklanınca sayfayı yakınlaştırır. Düğme, gövde ve başlık bu değeri kullanmaz.
Neden px, pt değil
Apple’ın pt birimi mantıksal noktadır; web’deki karşılığı CSS px’tir. CSS’in kendi pt birimi bir baskı birimidir (1/72 inç) ve aynı sayıyı yaklaşık üçte bir büyük çizer.