Web Tipografisi Nasıl Seçilir? Yazı Tipinin Kullanıcı Deneyimine Etkisi

Web tipografisi, bir sitedeki metnin hangi yazı tipiyle, hangi boyutta, hangi satır aralığıyla ve hangi hızla ekrana geldiğini belirleyen tasarım kararlarının tamamıdır. 2012'den beri kurduğum sitelerde gördüğüm şu: ziyaretçi logoyu bir kez görür, ama metni her saniye okur. Bu yüzden yazı tipi seçimi süs değil, kullanıcı deneyiminin omurgasıdır.

Bu rehberde font eşleştirmeyi, okunabilirliği, satır uzunluğunu, Türkçe karakter desteğini ve web font performansını adım adım anlatıyorum. Genel sayfa hızının sıralamaya etkisini ayrıca site hızı SEO'yu nasıl etkiler yazısında ele aldım; burada yalnızca yazı tipi tarafına odaklanıyorum.

Web tipografisi nedir ve neden bu kadar önemlidir?

Web tipografisi, ekrandaki metnin yazı tipi, boyut, satır aralığı, satır uzunluğu, ağırlık ve yüklenme davranışıyla birlikte planlanmasıdır. Amaç, metni güzel göstermeden önce okura kolaylık sağlamak, hızla ekrana getirmek ve markayla uyumlu kılmaktır. Kısacası okur iyi tipografiyi fark etmez; kötü tipografi ise onu ilk paragrafta yorar.

Önemli olmasının üç nedeni var. İlki anlaşılırlık: hizmetinizi, fiyatınızı ve teklif formunuzu okuyamayan kişi size ulaşmaz. İkincisi güven: tutarsız başlık boyutları ve sıkışık paragraflar siteyi amatör gösterir. Üçüncüsü ise performans, çünkü her web fontu tarayıcının indirmesi gereken ek bir dosyadır.

Sahada en sık gördüğüm hata, yazı tipini yalnızca tasarım dosyasında beğenilen görüntüye göre seçmek. Oysa aynı font 13 inçlik bir dizüstünde, güneş altındaki bir telefonda ve eski bir Android cihazda bambaşka bir izlenim bırakır. Dolayısıyla seçimi ekranda, gerçek içerikle ve gerçek cihazlarda test ederek yapmanızı öneririm.

Web tipografisi kullanıcı deneyimini nasıl etkiler?

Tipografi, ziyaretçinin sayfada ne kadar kaldığını ve ne kadarını anladığını doğrudan etkiler. Örneğin 14 piksellik gri metin, masaüstünde idare etse de mobilde okuru zorlar. Kullanıcı bu zorluğu bilinçli fark etmez; sadece sayfayı kapatır ve bir rakibe geçer.

Etkinin görüldüğü yerleri şöyle sıralayabilirim:

• Tarama hızı: net başlık hiyerarşisi, okurun aradığı bölümü saniyeler içinde bulmasını sağlar.
• Okuma yorgunluğu: dar satır aralığı ve uzun satırlar, uzun metinlerde gözü çabuk yorar.
• Güven algısı: tutarlı tipografi, kurumsal ve özenli bir işletme izlenimi verir.
• Erişilebilirlik: düşük kontrast ve küçük punto, görme güçlüğü yaşayan kullanıcıları dışarıda bırakır.
• Dönüşüm: okunmayan bir fayda cümlesi ya da CTA metni, formun doldurulma ihtimalini düşürür.

Bu nedenle tipografiyi ayrı bir estetik karar olarak değil, arayüz tasarımındaki UX hatalarını önleyen temel bir katman olarak görüyorum. Tasarım sürecinde ilk kurduğum sistem de genellikle renkten önce tipografi ölçeği olur.

Serif mi sans-serif mi: hangisini seçmelisiniz?

Ekranda gövde metni için bugün iki aile de rahatça kullanılabiliyor. Yüksek çözünürlüklü ekranlar, serif harflerin eskiden yaşadığı bulanıklık sorununu büyük ölçüde ortadan kaldırdı. Yani seçim artık teknik bir zorunluluktan çok, markanın karakteri ve içeriğin türüyle ilgili.

Benim pratik kuralım şu: arayüz ağırlıklı sitelerde gövdeye sans-serif, içerik ağırlıklı sitelerde ise serif ya da iyi bir hibrit seçiyorum. Ancak hangi aileyi seçerseniz seçin, belirleyici olan harf aralığı, x yüksekliği ve Türkçe karakterlerin çizim kalitesidir.

Font eşleştirmeyi nasıl yaparsınız?

Font eşleştirme, başlık ve gövde için birbirini tamamlayan iki yazı tipini seçme işidir. Amaç kontrast yaratmak, ama çatışma yaratmamaktır. Çoğu kurumsal site için iki aile yeterlidir; üçüncü aile genellikle yalnızca kod ya da özel vurgu için gerekir.

Eşleştirmede izlediğim adımlar şöyle:

1. Önce gövde fontunu seçin, çünkü okurun en çok gördüğü metin odur.
2. Ardından başlık için belirgin ama aynı ruhu taşıyan bir aile arayın.
3. İki fontun x yüksekliklerini yan yana karşılaştırın; çok farklıysa sayfa dengesini kaybeder.
4. Kontrastı tek eksende kurun: ya aile farkı, ya ağırlık farkı, ya da boyut farkı.
5. Son olarak gerçek içerikle, Türkçe başlıklarla ve mobil ekranda test edin.

Güvenli bir başlangıç, tek bir değişken fonttan farklı ağırlıklar kullanmaktır. Böylece hem uyum sorunu yaşamazsınız hem de dosya sayısını düşük tutarsınız. Markanız basılı materyallerde belirli bir yazı tipi kullanıyorsa, dijitale uyarlama sürecini basılı kurumsal kimliğin dijitale taşınması yazısında ayrıntılı anlattım.

Okunabilirlik için yazı boyutu kaç piksel olmalı?

Gövde metni için tarayıcıların varsayılan boyutu 16 pikseldir ve ben bunu alt sınır olarak kabul ediyorum. İçerik ağırlıklı sayfalarda 17 ile 19 piksel arası okuru çoğu zaman daha az yorar. Bu değer bir standart değil, saha tecrübesine dayalı bir başlangıç aralığıdır; seçtiğiniz fontun x yüksekliğine göre değişir.

Boyutu piksel yerine rem birimiyle tanımlamanızı öneririm. Böylece kullanıcı tarayıcı ayarından yazı boyutunu büyüttüğünde siteniz buna uyum sağlar. Üstelik WCAG'nin metni yeniden boyutlandırma ölçütü, metnin içerik veya işlev kaybı olmadan yüzde 200'e kadar büyütülebilmesini ister.

Başlıklar için ise sabit oranlı bir ölçek kurun. Örneğin 1,25 oranlı bir ölçekte 16 piksellik gövdenin üstündeki kademeler 20, 25 ve 31 piksel civarına denk gelir. Bu örnek hesap yalnızca yöntemi gösteriyor. Mobilde oranı biraz düşürmek, uzun Türkçe kelimelerin başlıkta taşmasını da önler. CSS'teki clamp() fonksiyonuyla bu geçişi ekran genişliğine göre akıcı hale getirebilirsiniz.

Satır uzunluğunu ve satır aralığını nasıl ayarlarsınız?

Satır uzunluğu, gözün bir satırın sonundan sonrakinin başına ne kadar zahmetle döndüğünü belirler. WCAG'nin görsel sunum ölçütü, en yüksek erişilebilirlik seviyesinde satır genişliğinin 80 karakteri geçmemesini öneriyor. Ben gövde metnini genellikle 60 ile 75 karakter arasında tutuyorum; bu da saha tecrübesi, kesin kural değil.

CSS tarafında bunu yapmanın en kolay yolu max-width değerini ch birimiyle vermektir. Örneğin 68ch, seçtiğiniz fonta göre yaklaşık o kadar karakterlik bir sütun oluşturur. Böylece geniş monitörlerde metin ekranın bir ucundan diğerine uzanmaz.

Satır aralığında ise gövde için 1,5 ile 1,7 arası iyi bir başlangıçtır. Aynı ölçüt, satır aralığının en az 1,5 olmasını ve paragraflar arası boşluğun satır aralığından belirgin şekilde büyük olmasını önerir. Öte yandan başlıklarda satır aralığını 1,1 ile 1,3 arasına çekmek gerekir; aksi halde iki satırlık başlıklar kopuk durur.

Harf ve kelime aralığı ne kadar olmalı?

Çoğu kaliteli font, gövde boyutunda ek harf aralığına ihtiyaç duymaz. Tasarımcı bu aralığı zaten o boyut için dengelemiştir. Bu yüzden letter-spacing değerine ancak belirli durumlarda dokunmanızı öneririm.

Dokunduğum durumlar şunlar:

• Tamamı büyük harfle yazılmış kısa etiketler ve butonlar: hafif pozitif aralık netliği artırır.
• Çok büyük başlıklar: hafif negatif aralık, harflerin arasındaki boşluğu toparlar.
• Çok küçük yardımcı metinler: az miktarda pozitif aralık, harflerin birbirine yapışmasını engeller.

Bir de erişilebilirlik tarafı var. WCAG'nin metin aralığı ölçütü, kullanıcı satır aralığını 1,5'e, paragraf boşluğunu 2 katına, harf aralığını 0,12 em'e ve kelime aralığını 0,16 em'e çıkardığında içeriğin kaybolmamasını istiyor. Dolayısıyla sabit yükseklikli kutular kullanmaktan kaçının; metin büyüdüğünde kutu da büyüyebilsin.

Türkçe karakter desteği neden kritik?

Türkçe metin, Latin alfabesinin temel setinde bulunmayan harfler içerir: ğ, ı, İ, ş ve Ş gibi. Unicode bu harfleri Latin Genişletilmiş-A bloğunda tanımlar. Birçok ücretsiz font ise yalnızca temel Latin setini ya da Batı Avrupa dillerini kapsar. Sonuçta tarayıcı başlığınızın ortasındaki bir harfi yedek fontla çizer ve kelime yamalı bir hal alır.

Bunu önlemek için fontu seçmeden önce şu cümleyi test ediyorum: "Işığı söndür, çağrıya İzmir'den şoför gelsin." Bu cümle büyük ve küçük tüm özel Türkçe harfleri gösterir. Ayrıca ı ve İ harflerinin noktalarını ve ğ harfinin şapkasını büyük boyutta kontrol edin; kötü çizilmiş bir ğ, başlıkta hemen dikkat çeker.

Bir başka tuzak da CSS'teki text-transform: uppercase kuralıdır. Sayfanın dil etiketi lang="tr" değilse tarayıcı "i" harfini "İ" yerine "I" yapar. Bu yüzden HTML etiketinde dili doğru tanımlamak, tipografinin görünmeyen ama kritik bir parçasıdır. Çok dilli sitelerde bu ayarın her dil sürümünde ayrı yapılması gerekir; ayrıntılar için çok dilli web sitesi SEO rehberine bakabilirsiniz.

Web font performansı sayfa hızını nasıl etkiler?

Her web fontu, tarayıcının indirmesi gereken ek bir dosyadır; tarayıcı onu genellikle CSS dosyasını okuyana kadar fark etmez. Bu gecikme, metnin geç görünmesine ya da yüklendikten sonra yerinden kaymasına yol açabilir. Kısacası web tipografisi hem LCP hem de CLS metriklerini etkileyebilir.

Üç tipik sorun görüyorum:

• Görünmez metin: font inene kadar tarayıcı metni gizler ve kullanıcı boş bir alana bakar.
• Düzen kayması: yedek fontla çizilen metin, web fontu gelince farklı genişlikte olduğu için satırlar kayar.
• Gereksiz yük: kullanılmayan ağırlıklar ve karakter setleri yüzlerce kilobayt ekler.

web.dev'in font en iyi uygulamaları rehberi, WOFF2 biçiminin WOFF'a göre yaklaşık yüzde 30 daha iyi sıkıştırdığını belirtiyor ve yalnızca WOFF2 kullanmayı öneriyor. Font dosyalarının etkisini ölçmek için Lighthouse performans testi rehberindeki adımları kullanabilirsiniz.

font-display değerlerinden hangisini kullanmalısınız?

font-display, web fontu henüz inmemişken tarayıcının metni nasıl göstereceğini belirleyen CSS tanımlayıcısıdır. web.dev'e göre block değeri 2 ila 3 saniyelik bir engelleme süresi tanır; swap engelleme yapmaz ve font geldiğinde değiştirir. fallback yaklaşık 100 milisaniye bekler ve 3 saniyelik bir değiştirme penceresi bırakır. optional ise 100 milisaniye bekler, font yetişmezse o sayfa görüntülemesinde yedek fontla devam eder.

Benim tercihim duruma göre değişiyor. Marka için vazgeçilmez başlık fontlarında swap kullanıyorum, çünkü metni hemen göstermek her şeyden önemli. Öte yandan gövde metninde optional çoğu zaman daha sakin bir deneyim verir; ilk ziyarette okur sistem fontunu görür, sonraki sayfalarda ise önbellekteki web fontu devreye girer.

Ancak swap tek başına düzen kaymasını çözmez. Yedek fontun ölçülerini web fontuna yaklaştırmazsanız değişim anında satırlar yine oynar. Bir sonraki bölümde bunun nasıl giderildiğini anlatıyorum. Tüm değerlerin teknik tanımı için MDN font-display sayfasına bakabilirsiniz.

Font yüklenirken oluşan kaymayı nasıl önlersiniz?

Kaymanın kaynağı, yedek font ile web fontunun farklı genişlik ve yükseklikte olmasıdır. Çözüm, yedek fontu web fontuna benzetmektir. CSS'te @font-face içinde size-adjust, ascent-override ve descent-override tanımlayıcılarını kullanarak sistem fontunun ölçülerini ayarlayabilirsiniz. web.dev de size-adjust kullanımının CLS etkisini azalttığını belirtiyor.

Uygulamada izlediğim yol şu:

1. Web fontuna en yakın sistem fontunu seçin; sans-serif için genellikle Arial, serif için Georgia iyi bir adaydır.
2. Bu sistem fontu için ayrı bir @font-face tanımı yazın ve ona örneğin "Marka Yedek" adını verin.
3. size-adjust ile genişliği, ascent ve descent değerleriyle dikey ölçüleri web fontuna yaklaştırın.
4. font-family listesinde web fontunun hemen arkasına bu yedeği yazın.
5. Son olarak yavaş ağ simülasyonuyla sayfayı açıp kaymayı gözle ve DevTools ile kontrol edin.

Bazı modern çatılar bu hesabı otomatik yapıyor. Yine de sonucu kendiniz ölçmenizi öneririm; otomatik değerler her zaman kusursuz eşleşme sağlamıyor.

Font alt kümeleme (subsetting) nedir, nasıl yaparsınız?

Alt kümeleme, font dosyasından sitenizde kullanmadığınız karakterleri çıkarıp daha küçük bir dosya üretmektir. web.dev'e göre Latin fontları tipik olarak 100 ile 1000 arasında glif içerir; Kiril, Yunan veya Vietnamca karakterlere ihtiyacınız yoksa bunları taşımanız anlamsızdır.

Burada Türkçe için kritik bir uyarı var. Hazır alt küme seçeneklerinde "latin" seti bazen yalnızca temel Latin ve Batı Avrupa karakterlerini içerir; ğ, ı ve ş ise "latin-ext" setinde kalır. Dolayısıyla alt kümeleme yaparken Türkçe harfleri mutlaka dahil edin, yoksa daha küçük bir dosya uğruna yamalı başlıklar elde edersiniz.

Uygulamada iki yöntem kullanıyorum. İlki, fontu kendi sunucunuzda barındırıp pyftsubset gibi bir araçla gerekli Unicode aralıklarını seçmek. İkincisi ise CSS'teki unicode-range tanımlayıcısıyla dosyayı parçalara bölmek; böylece tarayıcı yalnızca sayfada gerçekten geçen karakterlerin dosyasını indirir. Hangi yöntemi seçerseniz seçin, sonucu Türkçe test cümlesiyle doğrulayın.

Değişken fontlar ne işe yarar?

Değişken font, tek bir dosya içinde birden fazla ağırlık, genişlik veya eğim barındıran font biçimidir. Klasik yaklaşımda normal, yarı kalın ve kalın için üç ayrı dosya indirirsiniz. Değişken fontta ise tek dosya bu aralığın tamamını kapsar.

Avantajı, üç veya daha fazla ağırlık kullanan sitelerde belirginleşir. Örneğin başlıkta 700, gövdede 400, butonlarda 600 kullanıyorsanız, tek değişken dosya çoğu zaman üç statik dosyadan daha az istek demektir. Üstelik ara ağırlıkları da kullanabilirsiniz; 450 gibi bir değer, koyu arka planda metni biraz daha dolgun göstermek için işe yarar.

Ancak değişken font her zaman daha hafif değildir. Yalnızca normal ve kalın kullanıyorsanız iki statik dosya daha küçük kalabilir. Bu nedenle kararı dosya boyutlarını karşılaştırarak verin. Ayrıca değişken fontun Türkçe glifleri kapsayıp kapsamadığına bakın, çünkü bazı aileler değişken sürümü daha dar bir karakter setiyle sunuyor.

Fontu kendi sunucunuzda mı barındırmalısınız, Google Fonts'tan mı çekmelisiniz?

Tarayıcılar artık önbelleği siteler arasında paylaşmadığı için, başka bir sitede inen Google Fonts dosyasının sizin sitenizde hazır bekleme avantajı büyük ölçüde ortadan kalktı. web.dev de iki yöntem arasındaki performans farkının net olmadığını, kendi barındırmanın iyi sonuç vermesi için CDN ve HTTP/2 gerektiğini belirtiyor.

Benim tercihim çoğu kurumsal projede kendi barındırma. Bunun üç nedeni var: harici bir alan adına bağlantı kurma maliyeti ortadan kalkar, alt kümelemeyi tamamen kontrol edersiniz ve ziyaretçinin IP adresini üçüncü taraf bir sunucuya göndermezsiniz. Son madde KVKK açısından da düşünülmesi gereken bir noktadır; bu hukuki bir tavsiye değil, dikkate almanız gereken bir risk notudur.

Harici servis kullanacaksanız ise en azından preconnect ipucu ekleyin ve yalnızca gerçekten kullandığınız ağırlıkları isteyin. Kritik fontu preload ile öne almak da mümkündür, ancak web.dev bu yöntemi yalnızca tek bir biçim için ve dikkatle kullanmanızı öneriyor.

Web tipografisi mobilde nasıl farklılaşır?

Mobilde ekran dar, kullanım koşulları ise zordur: güneş ışığı, tek elle kaydırma, hareket halindeyken okuma. Bu yüzden web tipografisi kararlarını masaüstünde değil, önce telefonda doğrulamanızı öneririm. Bu yaklaşımın genel mantığını mobil öncelikli tasarım yazısında anlattım.

Mobilde özellikle dikkat ettiğim noktalar şunlar. Gövde metni 16 pikselin altına inmemeli, çünkü iOS'ta bu boyutun altındaki form alanları odaklanınca sayfa otomatik yakınlaşır. Başlık ölçeği daha dar olmalı; masaüstündeki 48 piksellik başlık telefonda iki kelimelik satırlar üretir. Ayrıca uzun Türkçe birleşik kelimeler dar sütunda taşabilir, bu nedenle overflow-wrap ayarını kontrol edin.

Dokunma hedefleri de tipografiyle ilişkilidir. Küçük puntolu bir metin bağlantısı, parmakla isabet ettirmesi zor bir hedeftir. Böylece okunabilirlik sorunu bir kullanılabilirlik sorununa dönüşür; bağlantı içeren satırlarda satır aralığını biraz daha geniş tutmak bu riski azaltır.

Kontrast ve renk tipografiyi nasıl etkiler?

En güzel font bile yetersiz kontrastta okuru kaybeder. WCAG'nin asgari kontrast ölçütü, normal metin için en az 4,5:1, büyük metin için en az 3:1 kontrast oranı ister. Tasarımda sık gördüğüm açık gri gövde metni, çoğu zaman bu eşiğin altında kalır.

İnce ağırlıklı fontlar kontrast sorununu büyütür. Hesaplanan oran yeterli görünse bile 300 ağırlığındaki bir font, ince çizgileri nedeniyle göze daha soluk gelir. Dolayısıyla gövde metninde 400'ün altına inmemenizi öneririm.

Renk kodlarını belirlerken HTML renk kodları aracı işinizi kolaylaştırır. Koyu arka planda açık renkli metin kullanıyorsanız ağırlığı biraz artırmak ya da harf aralığını hafifçe açmak metnin dağılmasını önler. Son olarak renk tek başına anlam taşımasın; bağlantıları yalnızca renkle değil, alt çizgi gibi ikinci bir işaretle de ayırt edin.

Tipografiyi CSS'te bir sisteme nasıl dönüştürürsünüz?

Tipografi kararlarını her sayfada tek tek vermek, bir süre sonra tutarsızlığa yol açar. Bu yüzden ben her projede kararları CSS özel özelliklerine, yani değişkenlere taşıyorum. Böylece font ailesi, boyut ölçeği ve satır aralığı tek bir yerden yönetilir hale geliyor.

Kurduğum yapı genellikle şu parçalardan oluşuyor:

• Aile değişkenleri: başlık, gövde ve kod için birer font yığını, sonunda ölçüleri ayarlanmış yedek font.
• Ölçek değişkenleri: gövdeden en büyük başlığa kadar beş veya altı kademe, her biri clamp() ile akıcı.
• Ritim değişkenleri: gövde ve başlık için ayrı satır aralığı, paragraf arası boşluk için ortak bir değer.
• Ağırlık değişkenleri: normal, orta ve kalın için üç sabit değer.

Bu sistemin en büyük faydası bakım tarafında ortaya çıkıyor. Örneğin marka yeni bir başlık fontuna geçtiğinde tek bir satırı değiştiriyorsunuz ve bütün site aynı anda güncelleniyor. Üstelik geliştirici ile tasarımcı aynı isimleri kullandığı için "bu başlık neden farklı" tartışması da ortadan kalkıyor.

Bir de ölçü birimi meselesi var. Boyutlarda rem, satır uzunluğunda ch, satır aralığında ise birimsiz sayı kullanıyorum. Birimsiz satır aralığı, alt öğelerin kendi boyutuna göre doğru aralığı hesaplamasını sağlıyor. Kısacası küçük bir disiplin, büyüyen bir sitede ciddi zaman kazandırıyor.

Web tipografisinde en sık yapılan hatalar nelerdir?

Denetlediğim sitelerde aynı hatalar tekrar tekrar karşıma çıkıyor. Çoğunun kökünde tasarım ile geliştirme arasındaki kopukluk var.

• Çok fazla font ailesi ve ağırlık: beş ağırlık yükleyip ikisini kullanmak.
• Türkçe karakter testini atlamak: ğ ve ş harflerinin yedek fontla görünmesi.
• Sabit piksel boyutları: kullanıcının tarayıcı ayarını yok saymak.
• Kenardan kenara metin: geniş ekranda 150 karakterlik satırlar.
• Her şeyi kalın yapmak: vurgunun anlamını yitirmesi.
• Görsel içine gömülü metin: arama motorlarının ve ekran okuyucuların okuyamadığı başlıklar.

Son madde SEO açısından da önemli. Başlığı görsel olarak değil, gerçek HTML metni olarak kullanmak hem erişilebilirliği hem de dizine eklemeyi kolaylaştırır. Metnin ne kadar kolay okunduğunu ölçmek isterseniz okunabilirlik analizi aracı iyi bir ilk kontrol sağlar. Ayrıca sosyal medya biyografileri için süslü harf arıyorsanız yazı tipi değiştirici işinize yarar; ama bu Unicode karakterlerini sitenizin gövde metninde kullanmayın, çünkü ekran okuyucular ve arama motorları onları normal harf olarak okumaz.

Web tipografisi için bir kontrol listesini nasıl kurarsınız?

Her projede teslimden önce aynı listeyi uyguluyorum. Bu liste, tasarım dosyasında güzel duran tipografinin canlı sitede de aynı kalitede çalıştığını doğrulamamı sağlıyor.

1. En fazla iki font ailesi ve gerçekten kullanılan ağırlıklar.
2. Türkçe test cümlesiyle tüm başlık ve gövde boyutlarında glif kontrolü.
3. Gövde metni en az 16 piksel ve rem biriminde.
4. Gövde satırı yaklaşık 60 ile 75 karakter, satır aralığı 1,5 civarı.
5. Kontrast oranı normal metinde en az 4,5:1.
6. Yalnızca WOFF2 dosyaları, Türkçe harfleri kapsayan alt küme.
7. Bilinçle seçtiğiniz bir font-display değeri ve ölçülerini ayarladığınız bir yedek font.
8. Doğru lang özniteliği ve sorunsuz büyük harf dönüşümü.
9. Yüzde 200 yakınlaştırmada taşma ya da kesilme yok.

Bu listeyi bir kez kurduğunuzda yeni sayfalar için tekrar tekrar kullanabilirsiniz. Tasarım aşamasında bu kararları Figma ile arayüz tasarımı sürecinde metin stilleri olarak tanımlamak, geliştirme aşamasındaki tutarsızlıkları büyük ölçüde azaltır.

Web tipografisini canlıya almadan önce nasıl test edersiniz?

Tasarım dosyasında kusursuz duran bir metin, canlı sitede farklı davranabilir. Bu nedenle teslimden önce kısa ama düzenli bir test turu yapıyorum. İlk olarak sayfayı gerçek bir orta segment Android telefonda ve bir dizüstünde açıyorum. Ardından tarayıcının yakınlaştırmasını yüzde 200'e çıkarıp taşan ya da kesilen metin arıyorum.

Sonra DevTools'ta ağ hızını yavaşlatıp sayfayı önbelleksiz yeniliyorum; böylece font gelene kadar okurun ne gördüğünü ve değişim anında satırların oynayıp oynamadığını izliyorum. Son adımda koyu modu, uzun Türkçe başlıkları ve büyük harfli butonları tek tek kontrol ediyorum. Bu tur çoğu projede yarım saati geçmiyor, ama canlıda fark edeceğiniz utanç verici hataların büyük kısmını önceden yakalıyor. Yani küçük bir yatırımla ciddi bir kalite farkı elde ediyorsunuz.

Tipografi kararlarını marka kimliğiyle nasıl uyumlu hale getirirsiniz?

Tipografi, markanın sesinin görsel karşılığıdır. Bir hukuk bürosunun sitesi ile bir mobil uygulama girişiminin sitesi aynı yazı tipini kullandığında ikisi de karakterini kaybeder. Bu yüzden font seçimini marka kimliği çalışmasının bir parçası olarak ele alıyorum.

Uyumlu bir sistem için önce markanın üç sıfatını yazmanızı öneririm; örneğin güvenilir, sade ve sıcak. Ardından her aday fontu bu sıfatlara göre değerlendirin. Böylece seçim kişisel beğeniye değil, ortak bir ölçüte dayanır.

Logo fontu ile web fontu aynı olmak zorunda değildir. Hatta logo için çizilen gösterişli bir yazı tipi, gövde metninde çoğu zaman yorucudur. Doğru yaklaşım, logodaki karakteri başlıklara taşıyıp gövdede nötr ve okunaklı bir aile kullanmaktır. Marka dili ve görsel sistem tarafında destek isterseniz marka kimliği hizmetime, sitenin tamamını bu ilkelerle kurmak isterseniz web tasarım hizmetime göz atabilirsiniz.