Web sitesi tipografisi: başlık, metin ve buton nasıl birlikte çalışır?
Bir tasarım dosyasında etkileyici görünen büyük başlık, telefonda üç satıra taşabilir veya ğ harfinin üstünü kesebilir. Web sitesi tipografisinde yalnızca fontun karakterini seçmiyorsunuz; metnin nasıl okunacağını ve sayfanın hangi bölümünün önce fark edileceğini de belirliyorsunuz.
Önce üç metin görevini ayırın
Bir hizmet sayfasından gerçek bir başlık, açıklama ve düğme metni seçin. Başlık konuyu tanıtsın, açıklama kapsamı anlatsın, düğme sonraki işi söylesin. Her birini büyük veya kalın yaparsanız öncelik belirsizleşir. Küçük bir metin sistemi, birbirinden kopuk onlarca boyuttan daha kolay yönetilebilir.
Örnek çalışma: aynı hizmeti tek ana başlık, kısa giriş ve bölüm başlıklarıyla düzenleyin. Sonra renkleri geçici olarak sadeleştirip hangi sırayla okuduğunuza bakın. Bu bir tasarım egzersizidir; kullanıcı araştırmasının yerine geçtiğini iddia etmiyoruz.
Türkçe karakterleri gerçek sözcüklerle deneyin
“Stüdyo Günlüğü”, “İçgörüler”, “Büyüme” ve “Çözüm” gibi site içinde kullanılacak sözcükleri örnek sayfaya koyun. Büyük ve küçük harfleri, kalınlığı ve varsa italik biçimi kontrol edin. Font dosyasının adı doğru olsa bile ekranda kullanılan yazı tipinin gerçekten yüklendiğini doğrulayın.
Kesilmeyi gidermek için harfi değiştirmeyin. Metni saran alanın satır yüksekliğini, iç boşluğunu ve taşma davranışını inceleyin. Bir başlığın tek satırda iyi görünmesi, uzun başlığın veya başka dildeki karşılığının da sığacağını kanıtlamaz.
Satırları içerikle birlikte ölçekleyin
Telefon için masaüstü başlığı yalnızca oransal küçültmek yeterli olmayabilir. Kelime uzunluğu, satır kırılması ve çevredeki boşluk birlikte değerlendirilmelidir. Örnek sayfada kısa bir başlığın yanına uzun bir hizmet adını da koyun; menü, kart ve detay başlığı aynı koşullarda davranmayabilir.
Gövde metninde çok geniş satırlar ile çok dar sütunları karşılaştırın. Tek bir evrensel karakter sayısı ilan etmek yerine kendi metninizin okuma ritmini sınayın. Sıkıştırarak sığdırılan buton etiketlerini, daha açık ve kısa bir ifadeyle yeniden yazmak da bir tasarım çözümüdür.
Kullanıcı metni değiştirdiğinde kırılmayı arayın
W3C metin aralığı ölçütü, kullanıcı satır, paragraf, harf ve sözcük boşluklarını değiştirdiğinde içerik veya işlev kaybı olmamasını ele alır. Buradaki değerler her sitenin varsayılan görünümü olmak zorunda değildir. Önemli ayrım, tasarımın kullanıcı ayarına dayanabilmesidir.
Kontrolde bir kart başlığı büyüdüğünde alttaki bağlantıyı kapatıp kapatmadığına bakın. Menü metni genişlediğinde düğmeler üst üste biniyor mu? Yalnızca ekran görüntüsünde güzel duran sabit yüksekliklerin gerçek içerikte sorun çıkarabileceğini teslim ekibinizle konuşun.
Tipografi onayını çalışan sayfada verin
Ajansınızdan gerçek font dosyalarıyla hazırlanmış bir sayfa isteyin. Telefon ve masaüstünde başlık, uzun paragraf, sayı, fiyat örneği ve düğmeleri birlikte inceleyin. Yavaş bağlantıda font yüklenirken metnin kaybolup kaybolmadığını veya yerleşimin değişip değişmediğini gözlemleyin.
Genel marka kararları için marka tasarım sistemi rehberimizi, uygulama için web tasarım hizmetimizi inceleyin. Onay kaydına kullanılan dosyayı, test edilen sayfayı ve düzeltilen kesilme örneğini eklemek sonraki güncellemelerde aynı hatanın izlenmesini kolaylaştırır.
Sık sorulan sorular
ğ harfinin üstü kesiliyorsa fontu değiştirmek gerekir mi?
Her zaman değil. Önce gerçek font yüklenmesini, satır yüksekliğini, kapsayıcı boşluğunu ve taşma ayarlarını inceleyin; sorun yerleşimden kaynaklanabilir.
Büyük başlıklar mobilde kullanılabilir mi?
Evet; gerçek uzun metinlerle, farklı ekran genişlikleriyle ve kullanıcı metin ayarlarıyla test edilirse. Tek bir kısa örnekle karar vermeyin.