UI Tipografiniz Neden Acemi Görünüyor: Kesin Değerlerle 6 Çözüm
Arayüzü acemi gösteren altı tipografi hatası ve her biri için kesin sayılarla kıdemli çözüm: tip ölçeği, tek font ailesi, okunabilir gri, büyük harf, satır yüksekliği ve hiyerarşi.
Acemi tipografi nadiren tek büyük bir hatadır. Her biri hisse göre verilmiş altı küçük karardır: doğru görünen bir boyut, eğlenceli duran bir font, zarif görünen bir gri. Kıdemli tipografi sakin görünür, çünkü bu seçimlerin her biri bir kurala uyar. İşte o altısı, sayılarıyla birlikte.
1. Bir tip ölçeği kullanın
✕ Acemi: boyutlar hisle seçilmiş
✓ Kıdemli: tek oran, 16'dan 1.25
Solda her boyut tek tek seçilmiş: 31, 27, 22, 17, 15, 13. Aralarındaki adımlar eşit değil, bu yüzden bazı seviyeler neredeyse aynı görünüyor, bazıları ise sıçrıyor. Sağda her boyut bir öncekinin 1.25 katı: 16, 20, 25, 31, 39. Adımlar eşit, dolayısıyla her seviye bir sonrakinden net biçimde farklı.
1.2 ile 1.333 arasındaki bir oran çoğu arayüze uyar. Birini seçin, yazın ve listede olmayan hiçbir boyutu asla girmeyin. CSS'te bu kısa bir değişken kümesi, Figma'da ise bir metin stili kümesidir. Modüler tip ölçeği rehberimiz oranın nasıl seçileceğini anlatıyor.
:root {
--text-sm: 0.8rem; /* 12.8px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31px */
--text-3xl: 2.441rem; /* 39px */
}
2. Tek aile, iki ağırlık
Lizbon'da Hafta Sonu
küçük bir seyahat günlüğüÜç gün, iki semt ve çok uzun bir tramvay yolculuğu.
DEVAMINI OKU✕ Acemi: tek kartta dört font
Lizbon'da Hafta Sonu
Küçük bir seyahat günlüğüÜç gün, iki semt ve çok uzun bir tramvay yolculuğu.
Devamını oku✓ Kıdemli: tek aile, normal ve kalın
Her yeni font kendi kişiliğini getirir ve tek kartta dört kişilik tartışır. Okuyucu hangisinin marka olduğunu anlayamaz. Okuma için normal, başlıklar için kalın olmak üzere iki ağırlıkta tek bir aile, bir ekranın ihtiyaç duyduğu her seviyeyi kurmaya yeter.
İkinci bir aile istiyorsanız ona tek bir iş verin, mesela yalnızca manşetler, ve her yerde orada tutun. Bir öğeyi "özel" yapmak için asla font eklemeyin.
3. Okuyabildiğiniz gri
Siparişiniz yolda
Varış: 14:20 ile 14:40 arası.Kurye yaklaşınca size mesaj atacağız.
✕ Beyaz üstünde #B0B0B0: okuması zor
Siparişiniz yolda
Varış: 14:20 ile 14:40 arası.Kurye yaklaşınca size mesaj atacağız.
✓ Beyaz üstünde #6B6B6B: okuması kolay
Açık gri, parlak bir monitördeki tasarım dosyasında rafine görünür. Dışarıda bir telefonda ise kaybolur. Soldaki varış saati kartın en faydalı satırı ve aynı zamanda okuması en zor olanı.
#6B6B6B siyah başlığın yanında hâlâ sakin duruyor ve okunabilir kalıyor. Kural olarak, beyaz üzerindeki ikincil metin yaklaşık #767676'dan daha açık olmamalı; bu, gövde metni için erişilebilirlik asgarisini geçen en açık gridir.
4. Büyük harf yalnızca etiketler için
ŞARTLARIMIZI GÜNCELLEDİK. LÜTFEN BİR SONRAKİ SİPARİŞİNİZDEN ÖNCE DEĞİŞİKLİKLERİ İNCELEYİN.
✕ Acemi: büyük harfle yazılmış cümle
GÜNCELLEME
Şartlarımızı güncelledik
Lütfen bir sonraki siparişinizden önce değişiklikleri inceleyin.
✓ Kıdemli: büyük harfli etiket, normal yazımlı metin
Büyük harfler kelimelerin şeklini siler. Küçük harfte uzun ve kısa harfler her kelimeye gözün tanıdığı bir siluet verir; büyük harfte her kelime bir dikdörtgendir, bu yüzden cümle harf harf okunmak zorunda kalır. Büyük harfli bir paragrafın bağırmak gibi hissettirmesinin ve daha uzun sürede okunmasının nedeni budur.
Büyük harf, yapıldığı iş için çalışır: bölüm etiketi, durum ya da düğme gibi bir ile üç kelimelik kısa etiketler. Daha uzun olan her şey normal yazımla gider.
5. Sıkı başlık, ferah gövde
Boşluk tipografinin parçasıdır
Sıkışık satır aralığı paragrafı duvara çevirir. Gövde metnine nefes alacak yer verin, başlıkları ise yakın tutun.
✕ Acemi: gevşek başlık, sıkışık gövde
Boşluk tipografinin parçasıdır
Sıkışık satır aralığı paragrafı duvara çevirir. Gövde metnine nefes alacak yer verin, başlıkları ise yakın tutun.
✓ Kıdemli: başlık 1.1, gövde 1.5
Satır yüksekliğinin farklı boyutlarda zıt işleri vardır. Büyük başlıkların harf aralarında zaten bolca boşluk vardır, bu yüzden 1.1'lik bir başlık tek bir şekil olarak bir arada durur. Küçük gövde metninin satırları arasında göz sonraki satırın başını bulabilsin diye boşluğa ihtiyacı vardır, bu yüzden 1.5 alır.
Acemi sürüm bunun tersini yapar, çoğu zaman her şeye tek bir satır yüksekliği uygulandığı için. İki değer belirleyin ve her yerde kullanın: başlıklar için yaklaşık 1.1 ile 1.2, gövde metni için 1.4 ile 1.6.
6. Boyut, ağırlık, renk, boşluk
Sipariş #2841
Teslim edildiBugün, 14:203 ürünToplam 42,80 $
✕ Acemi: her şey kalın, tek boyut
● Teslim edildi
Sipariş #2841
Bugün, 14:20 · 3 ürünToplam 42,80 $
✓ Kıdemli: dört araç, tek net sıra
Her şey kalınsa hiçbir şey kalın değildir. Acemi kartta aynı boyut ve ağırlıkta beş satır var, bu yüzden okuyucu önemli olanı bulmak için hepsini okumak zorunda.
Kıdemli kart dört aracı da azar azar kullanıyor: sipariş numarası daha büyük, durum bir renk ve nokta alıyor, ayrıntılar griye iniyor ve toplamı boşluk ayırıyor. Hiçbir araç aşırı zorlanmıyor, sakin görünmesinin nedeni bu. Daha fazlası için tipografik hiyerarşi yazımıza bakın.
Altı çözüm tek tabloda
| Acemi | Kıdemli | Değer |
|---|---|---|
| Hisle seçilen boyutlar | Tek tip ölçeği | 16'dan 1.25: 20, 25, 31, 39 |
| Birkaç font | Tek aile, iki ağırlık | Normal ve kalın |
| Açık gri metin | Okunabilir gri | Beyazda #6B6B6B, asla #767676'dan açık değil |
| Büyük harfli cümleler | Kısa etiketlerde büyük harf | Bir ile üç kelime |
| Herkese tek satır yüksekliği | İki satır yüksekliği | Başlıklar 1.1, gövde 1.5 |
| Her şey kalın | Dört hiyerarşi aracı | Boyut, ağırlık, renk, boşluk |
SSS
UI için iyi bir tip ölçeği nedir?
16 px tabandan 1.2 ile 1.333 arasında bir oran. 1.25 oranı 16, 20, 25, 31 ve 39 px verir; çoğu ekran için yeterli seviye.
Bir UI kaç font kullanmalı?
Tek aile yeterli, iki ağırlıkta kullanılır. İkinci bir aileyi yalnızca manşetler gibi tek sabit bir işle ekleyin ve her yerde aynı şekilde kullanın.
Gövde metninin satır yüksekliği ne olmalı?
Gövde metni için yaklaşık 1.5, büyük başlıklar için yaklaşık 1.1 ile 1.2.
Beyaz üstünde hangi gri okunabilir?
#767676, beyaz üzerinde gövde metni için WCAG asgarisini geçen en açık gridir. #6B6B6B biraz daha pay bırakır ve yine de ikincil okunur.
UI metni tamamen büyük harf olmalı mı?
Yalnızca bir ile üç kelimelik kısa etiketlerde. Büyük harfle yazılmış daha uzun metin, kelimeler şeklini kaybettiği için daha yavaş okunur.
Kaynaklar
- Tip ölçeği: 16 × 1.25ⁿ = 20, 25, 31.25 ve 39.06, yuvarlanmış gösterilmiştir.
- Beyaz üzerinde kontrast, WCAG 2 formülüyle hesaplanmıştır: #B0B0B0 2.2 e 1, #767676 4.5 e 1, #6B6B6B 5.3 e 1. WCAG gövde metni için 4.5 e 1 ister (1.4.3 Contrast (Minimum)).
- İlk olarak UX Brainy üzerinde bir karusel olarak yayımlandı.
Want type that looks this calm across your whole product? Our team builds UI and design systems with the typography decided once.
Get Started
