UI/UX ve Web Tasarımında Tipografi Prensipleri

Tipografi, yüzlerce yıl öncesine uzanan eski bir sanat biçimi. Modern teknoloji ilerledikçe tipografi kullanımı evrim geçirip daha sade bir hal aldı.

İletişim tasarımda hayati bir rol oynar. Web sitesi, mobile app yada giyilebilir kullanıcı arayüzü tasarımında tipografi amacını açıkça belli etmesi gerekir. Metin iletişimde en ağır yükü taşıdığından, sağlam bir tipografi anlayışına ihtiyaç duyar.

Elbette, bir kullanıcı arayüzü tasarlamak bir e-book yada blog teması tasarlamaktan farklı, ancak yazı merkezli tasarım ilkeleri halen geçerli. Tipografiyi optimize etmek okunabilirliği, erişilebilirliği ve kullanılabilirliği yani aslında genel grafik dengesini optimize etmek demek. Başka bir deyişle: tipografinizi optimize etmek ayrıca kullanıcı arayüzünü de optimize eder.

Typography, Typeface ve Font Nedir?

Yazılı dili daha okunaklı, fonksiyonel ve çekici hale getiren düzenleme sanatına ve tekniğine tipografi deniyor.

Tipografi yazı tipi, punto büyüklüğü, satır uzunluğu, satır arası boşluğu ve benzer etkenlerin kombinasyonları ile yapılır.

Dünya genelinde tasarımcılar arasında typeface ve font benzer anlamda kullanılıyor. Fakat aslında ikisi birbirinden farklı şeyler.

Font nedir: Bir typeface’in belirli bir boyutu, ağırlığı ve stiline; örneğin, Helvetica bold 10 punto’ya font denir.

Genel Font Kategorileri

- Serif
- Sans Serif
- Script
- Decorative

Atık typeface ve font arasındaki ayrımı iyice anladığımıza göre biz font demeye devam edebiliriz. :)

1- Font Seçimi

Font seçimi söz konusu olduğunda, dikkate alınması gereken en önemli konu hedef kitlenin ve içeriğin karakteristik özellikleridir. Font seçmeden önce müşterinizin hedeflerini, hedef kitlenizin ihtiyaçlarını ve tercihlerini öğrenmeniz gerekir.

Yazı tipleri görsel performansı ve kullanıcıların üründen aldıkları ilk izlenimi etkiler. Hatalı seçimler kullanıcıda yanlış bir izlenim yaratabilir. Örneğin ciddi bir haber web sitesi için çok eğlenceli ve fancy görünen bir yazı tipi seçimi, haberin gayri ciddi olduğu izlenimi yaratabilir. Ya da gençlere yönelik bir tasarım için çok resmi bir font sıkıcı görünebilir.

Her yazı tipi kendi ruh halini tasarıma taşıdığından, font seçiminde çok titiz olmak ve daha çok zaman ayırmakta fayda var.

2. Minimum Sayıda Font Kullanın

Başlık gibi diğer yazı elementlerine karar vermenizi etkileyeceğinden ilk iş body text için bir font seçmek olmalı.

App yada sitenin tasarım olarak bir düzen içinde gözükmesini ve daha profesyonel olmasını istiyorsanız en fazla 3 font seçin. Aynı anda çok fazla sayıda boyut ve stilin tasarımın düzenini bozabileceğini unutmayın.

Kullanıcıların artık yavaş bir siteye tahammülleri yok. Tasarım kararları müşterinin para kaybetmesine ve beklemedik etkilere zemin hazırlayacağından tasarımı optimize etmeye minimum sayıda font seçerek başlamak iyi bir karar olacaktır.

3. Her ölçüde sorunsuz çalışan bir font seçin.

Basic bir UI design element setini bile incelediğinizde farkedeksiniz; kullanıcı arayüzleri buttonlar, etiketler, text inputları, bölüm başlıkları vb gibi değişik ölçülerde text gerektiren tasarım öğeleri barındırır. Bu yüzden her boyutta okunabilir bir font seçmek çok önemli.

Kullanıcılar sitenize farklı ekran boyutları ve çözünürlükleri olan cihazlardan erişeceği için yazı boyutlarını responsive olarak optimize etmeniz gerekiyor.

4- Heading Tags

Heading tags kullanımı metninize görsel bir hiyerarşi vermekte baskın bir rol oynar. Web sayfasında başlıkları tanımlamak için HTML kodu içinde <h1> dan <h6>’ya kadar heading tags dediğimiz etiketler kullanılır. <H1> en kalın ve sayfadaki en kritik içeriği vurgulamak için kullanılırken, <h6> en küçük ve en az önem taşıyan başlıklar için kullanılır.

Arama motorları artık kullanıcı deneyimine çok önem verdiği için, robotlar içeriğin alaka düzeyini başlık etiketlerini kontrol ederek anlıyorlar. Daha basit bir anlatımla SEO yani arama motoru optimizasyonu için heading tags kullanmak hayati önem taşıyor.

5. Satır Uzunluğu (Line Length)

Tasarım yaparken metne sadece bir element olarak bakmayın, metnin rahatça okunması tasarımın en önemli odak noktalarında 1 tanesi olmalı. İyi bir okuma deneyimi sunmak için her satırda desktop için en fazla 40–60, mobile cihazlar için de 30–40 karakter olmasına dikkat etmek gerekiyor.

Her satırda doğru miktarda karakter bulundurmak metnin okunabilirliği için anahtar konumunda.

6- Satır Arası Boşluğu (Line Height)

Web tasarımında iki satır arasındaki boşluk mesafesine “line height” deniyor. Satır aralarında yeterli mesafe bırakmak göze hoş gelen akışkan bir okuma deneyimi sunar. Başka bir deyişle sıkışık metinler karmaşık bir görünüm verir ve kullanıcıda okuma isteğini azaltır.

Kural olarak, okunabilirlik için line height karakter yüksekliğinden yaklaşık olarak % 30 daha fazla olmalıdır.

Başka bir önemli konu da başlık ve metin arasındaki satır boşluğu. Negatif alan içeriğe olan ilgiyi etkilediğinden başlık ve metin arasına başlığın büyüklüğüne göre 15px, 20px veya 30px boşluk sağlanmalı.

Final

Projenizin amacı ne olursa olsun, UI yada UX tasarımında yazı hayati bir rol oynayacaktır. Doğru tipografi seçimleri yapmak web sitenize daha hoş ve okunaklı bir görünüm verecektir. Öte yandan kötü tipografi dikkati dağıtıcı olabilir ve kullanıcının kısa sürede siteden ayrılmasına yol açabilir.

Tipografi içeriği onurlandırmak için var olur.

O zaman içeriği kullanıcının gözünde asla yük olmayacak bir şekilde onurlandıralım.