Web Tipografisi: İşi Metne Yaptırmak

Arayüz Zaten Yazıdır

Bir içerik sitesinde ziyaretçinin baktığı şeyin yüzde doksanı kelimelerdir. Yazı tipi, boyutlar, boşluklar ve satır uzunlukları tasarımın son rötuşları değildir — tasarımın kendisidir ve okumanın zahmetsiz mi yoksa iş gibi mi hissettireceğini belirler.

Tipografinin mevcut en ucuz kalite yükseltmesi olmasının sebebi de budur. Bir sayfayı özenli hissettirmek için yeni fotoğrafa ya da yeni bir düzene ihtiyacınız yoktur. Tutarlı uygulanan, birbiriyle uyumlu bir tipografi kararları kümesine ihtiyacınız vardır.

İşe Uygun Yazı Tipi Seçmek

İlham panoları, başlıkta doğru görünen ama paragrafta on dört pikselde dağılan yazı tipleri üretir. Yazının gerçekten yapması gereken işe göre seçin: uzun metin okuma, yoğun arayüz etiketleri, sayısal tablolar ya da tek bir büyük ifade.

Estetik olanlardan önce pratik olanları kontrol edin. İhtiyacınız olan ağırlıklar var mı, yoksa kalını taklit etmek zorunda mı kalacaksınız? Rakamlar iyi tasarlanmış mı ve sütuna girecek her şey için tabular rakam sunuyor mu? Karışabilecek karakterler — büyük I, küçük l, bir rakamı, sıfır ve büyük O — gövde boyutunda ayırt edilebilir kalıyor mu? Türkçe için noktalı ve noktasız i’yi, ğ, ş, ç, ö ve ü’yü doğrulayın; bunların mekanik olarak birleştirilmiş değil çizilmiş olduğundan emin olun, çünkü kötü yapılmış aksanlar her sayfada ucuzluk olarak okunur.

Genellikle Tek Aile Yeter

Ağırlık yelpazesi geniş, iyi kurgulanmış tek bir aile bütün bir siteyi taşır. İki aile, işleri net biçimde ayrıldığında çalışabilir — biri başlıklar, biri metin için — ama üç aile neredeyse her zaman kimsenin karar vermediğinin işaretidir. Eşleştirme göründüğünden zordur ve hata biçimi, tek bir bariz kusuru olmadan belli belirsiz uyumsuz hissettiren bir sitedir.

Rastgele Boyutlar Yerine Bir Ölçek

Siteler boyut biriktirir. Biri h2’den biraz küçük bir başlığa ihtiyaç duyar ve 26 yazar. Altı ay sonra kullanımda on bir boyut vardır, aralarında hiçbir ilişki yoktur ve sayfa, kimse nedenini bilmeden gürültülü okunur.

Bir ölçek tanımlayın — adımları arasında tutarlı bir oran olan küçük bir boyut kümesi — ve onu sabit kabul edin. Neredeyse her kurumsal site için beş altı boyut yeter. İnsanların profesyonellik olarak okuduğu düzen hissini üreten şey, bu kısıttır.

Daha Az Stille Hiyerarşi

Hiyerarşi daha fazla boyut gerektirmez; elinizdekiler arasında daha fazla kontrast gerektirir. Ağırlık, renk, boşluk ve konum, seviyeleri boyut kadar etkili ve genelde daha zarif biçimde ayırır. Daha kalın olan ve üstünde daha çok boşluk bulunan bir başlığın ayrıca gövdenin iki katı olmasına gerek yoktur.

Satır Uzunluğu, Satır Yüksekliği ve Okuma Konforu

Satır uzunluğu en çok göz ardı edilen ve en çok hissedilen ayardır. Sürekli okuma için altmış ile yetmiş beş karakter civarı rahattır; çok daha uzunda göz bir sonraki satırın başını kaybeder, çok daha kısada ritim bozulur. Geniş ekranda bu, yer olmasına rağmen metin sütununu sınırlamak demektir.

Satır yüksekliği bununla birlikte çalışır. Uzun satırlar daha fazla aralık ister; kısa satırlar ve büyük başlıklar daha azını. Her şeye uygulanan tek bir küresel değer, ölçeğinizin iki ucunda da yanlış olur; satır yüksekliğinin sayfaya değil ölçeğin her adımına ait olmasının sebebi budur.

Boşluk İlişkiye Aittir

Bir başlığın üstündeki boşluk, altındakinden belirgin biçimde büyük olmalıdır; çünkü başlık, kendisini izleyen metne aittir. Bunu ters yapmak web’deki en yaygın tipografik hatalardan biridir ve sayfayı belli belirsiz dağınık hissettirir; çünkü her başlık bir bloğu takdim etmek yerine iki bloğun arasında yüzüyormuş gibi görünür.

Parıltısız Yükleme

Özel yazı tipleri sayfadan sonra gelir ve arada olan şey, bilinçle vermeniz gereken bir tasarım kararıdır. Yazı tipi yüklenene kadar hiçbir şey göstermemek, yavaş bağlantıda boş bir sayfa riski taşır; yedek bir yazı tipinden geçiş yapmak ise rahatsız edici ve içeriği birinin parmağının altında kaydırabilen görünür bir yeniden akış yaratır.

Dosyaları gerçekten kullandığınız karakterlere indirgeyin ve Türkçe karakterleri bu alt kümede tutun; modern formatlar sunun; ekranın üst kısmında görünen bir iki kesimi önceden yükleyin; ve metrikleri yeterince yakın bir yedek seçin ki geçiş neredeyse hiçbir şeyi oynatmasın. Her ek ağırlık bir dosya daha demektir ve bu, Core Web Vitals rehberimizdeki metriklere doğrudan bir maliyettir.

Renk, Kontrast ve Karanlıkta Okumak

Beyaz üzerine açık gri gövde metni, modern sitelerdeki en yaygın erişilebilirlik hatasıdır ve tamamen kendi elimizle yaratılmıştır. Kontrast bir üslup tercihi değildir; eşikler vardır ve bu eşiklerin altındaki metin, kitlenizin kayda değer bir bölümü için okunamazdır.

Renk kutucuklarını değil gerçek kombinasyonları test edin; görsel üzerindeki ve marka renginiz üzerindeki metin dahil. Koyu tema sunuyorsanız saf siyah üzerine saf beyazın rahatsız edici olduğunu ve koyu modda yazının aynı görünmesi için genelde biraz daha ince ağırlıklara ihtiyaç duyduğunu unutmayın. Bu kararlar, web tasarımında renk rehberimizdekilerin yanında durur.

Profesyoneli Amatörden Ayıran Detaylar

Gerçek tipografik karakterleri kullanın: kıvrık tırnaklar ve kesme işaretleri, doğru tireler ve üç nokta yerine gerçek bir üç nokta karakteri. Doğru olduklarında görünmezler, yanlış olduklarında ucuz görünürler ve içerik yönetim sistemlerinin çoğu izin verirseniz bunu sizin için yapar.

Sonra satır sonlarını toparlayın. Paragrafın son satırında tek başına kalan bir kelimeden kaçının, tek kelimeden sonra bölünen başlıklardan kaçının ve sayıları birimleriyle birlikte tutmak için bölünmez boşluk kullanın. Bu, önemli sayfalarda on beş dakikalık bir iştir ve birinin önemsediği site ile yalnızca monte edilmiş site arasındaki en görünür farktır.

Türkçe Metin Daha Uzundur

İngilizce metnin Türkçe çevirisi genelde daha uzun sürer ve daha uzun kelimeler kullanır; bu yüzden İngilizcede düzgün oturan bir başlık Türkçede kötü kırılır ya da kabına sığmaz. Bileşenleri en kısa dile göre ayarlamak yerine buna tolerans gösterecek şekilde tasarlayın ve Türkçe sayfaları, İngilizce düzenin aynen geçtiğini varsaymak yerine gerçek kırılma noktalarında mutlaka gözden geçirin.

Zaman İçinde Korumak

Tipografi, bir tasarımın diğer her parçasından hızlı bozulur; çünkü her yeni sayfa yeni bir boyut ekleme fırsatıdır. Savunma, ölçeği CMS’teki metin stillerine koymak ve editörlerin bir rakam değil adlandırılmış bir stil uygulamasını sağlamaktır; bu, tasarım sistemleri rehberimizde anlatılan disiplinin aynısıdır.

Yılda bir gözden geçirin: sitede gerçekten kullanılan her boyut ve ağırlığı listeleyin ve sonradan sızanları silin. Ölçeğin doğru tanımlanmasını ve uygulamada korunmasını isterseniz, UI/UX ekibimiz tipografiyi geç değil ilk sistem kararı sayar ve tasarım çalışmamız kelimelerin nasıl okunacağından başlar.