Tipografi eğitimi

Tipografi yazı tipi seçmek değil, metni düzenlemektir

Bir kenara bırakılacak ilk şey, iyi bir yazı tipi bulunduğunda işin bittiği düşüncesidir. Tipografi, yazı tipi seçildikten sonra alınan kararlar bütünüdür ve pratikte bunlar dörttür: boyut, ağırlık, boşluk ve satır uzunluğu.

Bunu görmenin en kolay yolu bir deney. Sevdiğiniz bir sayfayı alın ve yazı tipini sıradan bir sistem yazı tipiyle değiştirin. Sayfa hâlâ çalışır. Şimdi tersini yapın: yazı tipini koruyun, bütün boyutları aynı yapın ve boşlukları kaldırın. Sayfa dağılır. Onu bir arada tutan şey hiçbir zaman yazı tipi değildi.

Yıllarca Farsça site işi yaptıktan sonraki tutumumuz daha da açık: çoğu projede kullanılabilir yazı tipi listesi o kadar kısadır ki seçim kendiliğinden yapılır. Web için Farsçada, web lisansı olan, yeterli ağırlığı bulunan ve Farsça rakamları doğru olan aile sayısı kimsenin bir haftasını hak edecek kadar çok değildir. O hafta diğer dört karara aittir.

Bu dersin kasten dışarıda bıraktığı ve kendi dersi olan bir şey var: Farsça yazıya özgü olan her şey, harflerin birleşmesinden yarım boşluğa ve rakamlara kadar. O tartışma Farsça tipografi dersinde açılıyor ve onsuz bu ders bir Farsça site için eksiktir.

Bir yazı tipini okunaklı kılan nedir?

Okunaklılık zevk değil, ölçülebilir birkaç özelliktir. En önemlisi x yüksekliğidir: uzantısı olmayan bir küçük harfin, harfin tam yüksekliğine oranla yüksekliği. X yüksekliği daha büyük yazı tipleri küçük punto boyutlarında daha iyi okunur; aynı boyutta dizilmiş iki yazı tipinin birbirine hiç benzememesinin nedeni budur.

Bilmeye değer üç şey daha: üst ve alt uzantılar, yani harfin taban çizgisinden taşan ve satır aralığınızın ne kadar açık olması gerektiğini belirleyen parçaları; göz, yani harfin içindeki kapalı boşluk, dar olduğunda küçük boyutlarda dolar ve harfi okunamaz kılar; ve kalem kontrastı, yani kalın ile ince çizgiler arasındaki fark, arttıkça başlık için daha iyi, uzun metin için daha kötü bir yazı tipi demektir.

Ve kötü yazı tiplerini yirmi saniyede eleyen pratik bir sınama: birbirine benzeyen karakterleri yan yana yazın. Latincede büyük I, küçük l ve bir rakamı. Üçü de düz bir dikey çizgiyse o yazı tipi arayüz için kötüdür, çünkü kullanıcınız orada bir takip kodu ve bir parola okuyacak.

Farsçada aynı sınama başka bir biçim alır ve daha da katıdır: noktalar. Be, pe, te ve se harflerini ayıran şey yalnızca noktalardır ve süslü yazı tiplerinde bu noktalar ya küçülür ya da harfin gövdesine yapışır. Böyle dizilmiş bir başlık sayfası sorun değildir; aynı şekilde dizilmiş bir kayıt formu müşteriye bir destek masası satar.

Boyut ölçeğini nasıl kurarsınız?

Ölçek, izin verilen boyutların kısa bir listesidir ve kuralı basittir: tasarımdaki her boyut o listede olmalıdır. Bir sayfada sekiz farklı boyut varsa o sayfanın ölçeği yoktur ve sekizinin her biri ayrı ayrı kararlaştırılmıştır.

Kurmanın en basit yolu şudur: gövde metni boyutundan başlayın ve gerisini sabit bir oranla türetin. Küçük oran, uzun metne uygun daha sakin bir ölçek verir; büyük oran başlıkları doldurur ve satış sayfalarına yakışır. Oranın tam değeri pek önemli değildir. Sabit kalması önemlidir.

Okuduğunuz sitenin sayıları, gerçek bir örnek görmüş olun diye: kök 16px, gövde metni 1.0625rem yani yaklaşık on yedi piksel ve kırıntı yolu ile şekil notları gibi küçük metinler 0.85rem. Başlıkların hepsi clamp() ile yazılmıştır: h3 1,15 ile 1,4rem arası, h2 1,5 ile 2,2rem arası ve h1 2 ile 3,3rem arası. Telefonda en küçük sayı, büyük ekranda en büyüğü ve hiçbir yerde kırılma noktası yok.

Bu clamp(), bu bölümün en işe yarar pratik aracıdır ve üç dört medya sorgusunun yerini alır. Üç değer alır: bir alt sınır, genelde görüntü alanı genişliğine dayanan akışkan bir boyut ve bir üst sınır. Yaygın hata yalnızca akışkan kısmı yazıp alt sınırı bırakmaktır; sonucu, dar bir telefonda gövde metni boyutuna inen bir başlıktır.

Ve her orandan önemli bir kural: boyut sayısını azaltın. Beş boyut hemen her siteye yeter ve altıncıya ihtiyacınız olduğunu hissediyorsanız sorun genelde boyut değil, boşluktur.

Satır uzunluğu ve satır yüksekliği: en çok etkisi olan iki sayı

Bu dersten yalnızca iki sayı saklayacaksanız bunları saklayın. Çok uzun bir satır, gözü bir sonrakinin başına dönerken kaybeder; çok kısa bir satır okumayı art arda sıçramalara çevirir. Sıkı satır aralığı ise iki satırı, okuyucu farkına varmadan birini iki kez okuyacak kadar üst üste bastırır.

Satır uzunluğu için resmî bir tavan var. WCAG 1.4.8 ölçütü, ki AA değil AAA düzeyindedir, bir metin bloğunun genişliğinin seksen karakteri geçmemesi gerektiğini söyler. Aynı ölçüt çok daha az alıntılanan iki şey daha söyler: metin iki yana yaslanmamalı ve satır aralığı en az bir buçuk olmalı.

CSS'te bunu piksel yerine ch birimiyle kurarsınız, çünkü ölçü yazı tipi boyutuyla birlikte inip çıkmalıdır. Bu sitenin sayıları: her sayfanın giriş paragrafı 56ch ve makale gövdeleri 78ch, yani o seksen tavanının hemen altında.

Neredeyse kimsenin yazmadığı ve herkesin ilk seferde yanlış anladığı bir nokta: ch, geçerli yazı tipindeki sıfır rakamının genişliğidir, gerçek bir karakterin genişliği değil. Bu sitenin kullandığı yazı tipinde o sıfır, 1000 birimlik em'in 570 birimidir, yani 0,57em. Dolayısıyla 78ch tekrarlanabilir bir sayıdır ama "yetmiş sekiz harf" değildir ve harf genişliklerinin çok değiştiği Farsçada aradaki fark daha da açılır. Sayıyı bir sayım değil, ayarlanabilir bir ölçü olarak görün.

Satır aralığı için WCAG 1.4.12 ölçütü, ki AA düzeyindedir, kullanıcının satır yüksekliğini içerik kaybetmeden yazı tipi boyutunun en az 1,5 katına çıkarabilmesi gerektiğini söyler. Bu bir taban, öneri değil. Bu sitedeki gövde metni 1.9'da durur ve bu seçim Farsça içindir: yazı taban çizgisinin altında çok sayıda nokta ve uzantı taşır ve Latince için yeten bir aralıkta kalabalık görünür.

İki yazı tipi mi gerekir, bir tane mi?

Çoğu site için dürüst yanıt: bir. Birkaç ağırlığı olan tek bir aile, neredeyse her zaman iki farklı aileyi geçer; çünkü ağırlık farkı tasarlanmış bir farktır, aile farkı ise tesadüfi.

Gerçekten iki istiyorsanız kural şu: kategori olarak ayrılmalılar, ruh hâli olarak değil. Başlık için tırnaksız, gövde için tırnaklı bir yazı tipi, gözün anında kavradığı bir farktır. Yalnızca biraz farklı iki tırnaksız yazı tipi ise olabilecek en kötü durumdur: okuyucu farkın bir anlamı mı olduğunu yoksa hata mı olduğunu ayırt edemez.

Ve kararda genelde görülmeyen maliyet: her fazladan aile, indirilecek daha fazla dosya demektir. Farsçada bu maliyet daha ağırdır, çünkü Farsça bir yazı tipi daha fazla glif taşır ve dosyası eşdeğer bir Latin yazı tipinden büyüktür. Yalnızca başlıklarda görünen ikinci bir yazı tipi, mobil bağlantıda birkaç görsel kadara mal olabilir.

Ağırlıklar da aynı mantığı izler. Genelde üçü yeter: biri metin, biri metin içi vurgu, biri başlıklar için. Bir tasarımda altı ağırlık varsa üçü muhtemelen kimsenin gözüne çarpmaz ve yalnızca indirilir.

Hiyerarşinin doğru kurulduğunu nasıl anlarsınız?

Hiyerarşi, okuyucunun okumadan neyin daha önemli olduğunu anlayabilmesi demektir. Sınama on saniye sürer: sayfa bulanıklaşana dek gözlerinizi kısın ya da iki metre uzaktan bakın. O bulanıklıkta hâlâ görünen şey, okuyucunun zihnine ilk yerleşen şeydir. Gördüğünüz, amaçladığınız şey değilse, tasarım ne kadar temiz görünürse görünsün hiyerarşi çalışmıyordur.

Kurmak için dört kolunuz var: boyut, ağırlık, boşluk ve renk. İlk üçü neredeyse her zaman dördüncüden iyi çalışır ve bu üçü arasında boşluk en ucuzu ve en az kullanılanıdır. Bir şey yeterince öne çıkmadığında herkesin ilk tepkisi onu büyütmek ya da koyulaştırmaktır; oysa genelde çevresini boşaltmak yeter.

Renk, en son başvurulacak koldur. Nedeni basit: okurlarınızın bir kısmı rengi sizin gördüğünüz gibi görmez ve bir öğenin önemli olduğuna dair tek işaret rengiyse, onlar için o öğe gerisinden farksızdır. Renk üçüncü vurgu olmalı, tek vurgu değil.

Her yerden çok başlıklarda görülen yaygın bir hata: başlığın üstündeki boşluk altındakinden büyük olmalıdır. Üstündeki ve altındaki paragrafa eşit uzaklıktaki bir başlık hiçbirine ait değildir ve bu tek küçük ayar, uzun bir sayfanın yapısal okunurluğunu başka herhangi bir değişiklikten daha çok yükseltir.