Web sitenize uygun yazı tipi kullanımı

Web siteniz için doğru yazı tipi kullanımı adına nelere dikkat etmelisiniz
Web siteniz için doğru yazı tipi kullanımı

Web sitenizde doğru yazı tipi kullanımı adına nelere dikkat etmelisiniz!

Tasarıma önem verdiğiniz kadar, web siteniz için doğru yazı tipi kullanımı adına nelere dikkat etmelisiniz konusuda artık günümüzde çok çok önemli. Web sitenizi için doğru yazı tipini kullanmak adına nacizane tavsiyelerim şunlar:

Ortak kanı, insanlar web sitesinde kullanılan yazı tipi ya da kullanım şekli üzerinde fazla düşünmüyorlar.

Web sitelerini oluştururken, doğru yazı tipi kullanımı yerine görsel yaklaşımı daha önemli buluyorlar ama eninde sonunda kullanıcıları amaca götüren başlıklar, metinler dolayısıyla yazı karakterleri. Asıl amacınız; görsel ve metinler arasındaki ilişkiyi dengeli bir şekilde tasarıma yansıtmak olmalı.

Günümüz web tasarımcıları arasında en çok tartışılan konulardan biri, web siteniz ya da aplikasyonunuz için en doğru/okunaklı yazı tipini seçme konusudur.

Benim düşüncem estetik kaygılar ( Web’de en çok kullanılan 10 yazı tipi ) ile ilerlemek yerine genel kabul görmüş doğrular ışığında, güvenli bir web yazı tipi seçerek ilerlenmesi yönündedir.

Metnin kullanım alanı bir yüzeye baskı olmayacağı için, dijital gereksinimlere kulak vererek web uyumlu bir yazı tipini seçmenizi tavsiye ediyorum.

Web yazı tiplerinin görünümünü/okunaklılığını etkileyebilecek farklı başlıklar var. Tarayıcı seçimi, işletim sistemleri, hatalı yazı tip kullanımları gibi konulara dikkat etmeli ve mutlaka cihaz uyumlarını test etmelisiniz.

Tasarladığınız web sayfasında kullandığınız yazı tipi eğer sayfayı açan kullanıcının bilgisayarında/cihazında yüklü değilse, asıl yazı tipinin yüklü olmadığı kullanıcılarda sayfanızın diğer yazı tiplerinden biriyle açılması demek olacaktır. Bu da tasarımınızın büyük oranda farklılaşması/bozulması demek olacaktır.

Yazı formatları

Farklı tarayıcılar, işletim sistemleri, masa üstü bilgisayar, diz üstü ve tüm mobil cihazlar farklı yazı formatlarını desteklemektedir.

TTF, ( TrueType ) yazı tipi biçimi Apple ve Microsoft tarafından PostScript yazı tipi biçimine bir yanıt olarak geliştirilmiştir. TTF, Mac ve Windows işletim sistemlerinde yazı tipleri için en yaygın format olmuştur. Dezavantajlarından biri TTF / OTF yazı tiplerinin sıkıştırılmaması ve bunun sonucunda daha büyük bir dosya boyutuna sahip olmalarıdır.

EOT, mevcut TTF / OTF yazı tiplerinden bir yazı tipi oluşturmak için bir Microsoft aracı kullanır.

OTF, ( OpenType ) yazı tipi TTF’nin evrimidir. Adobe ve Microsoft arasındaki ortak çabanın sonucudur.

WOFF-WOFF2, temel olarak tüm önemli tarayıcılar tarafından desteklenen meta veriler ve sıkıştırma özellikli OTF veya TTF’dir. Web’de yaşamak için yaratılmıştır. Bu, Mozilla Foundation, Microsoft ve Opera Software’in ortak çalışmasının sonucudur. WOFF2, gelecek nesil WOFF’dir. WOFF2 biçimi, orijinal WOFF üzerinde % 30’luk bir sıkıştırma kazancı sunar.

SVG, yazı tipleri SVG’nin font unsuru kullanılarak tanımlanır. SVG görüntüsünde tek bir vektör nesnesiymiş gibi glif anahatlarını standart SVG öğeleri ve öznitelikleri olarak içerir.
iPhone ve iPad kullanıcılarını hedef alıyorsanız, SVG fontları tek seçeneğinizdir.

Doğru yazı formatı nasıl seçilmeli

Tüm tarayıcılarda ve cihazlarda çalışan tek bir yazı tipi formatı, neredeyse yok denecek kadar az. Tutarlı bir kullanıcı deneyimi sunmak için birden fazla yazı tipi biçiminden yararlanmak amaçlı alternatif yazı tiplerini önem sırasını göre önceden belirlemek zorundasınız.

Farklı tarayıcıların yazı tiplerini render ederken verdiği tepkimeler farklı olacaktır. Netlik ve okunaklılık problemlerine hazır olun.

Bazı yazı tipleri dijital ekranlarda gösterilmek üzere optimize edilmişken, bazı yazı tipleri baskı için en iyi sonuçlar vermek üzere tasarlanmışlardır. Seçtiğiniz yazı tipinin web uyumlu olup olmadığını araştırın. Düşük çözünürlüklü ekranlarda, baskı için tasarlanmış yazı tipleri ekranda doğru görünmeyecektir, bu tip yazı karakterlerini kullanmayın.

Güvenli bir yazı tipi seçmeniz adına önerilerim:

1 – Tam başarıya ulaşamasada, internet için standart kabul edilen yazı tipi ailelerinden biri ile ilerleyin. Bugün, web için standart kabul edilen yazı tipleri birçok sistemde önceden yüklü olarak geliyor.

Andale Mono
Arial, Arial Black
Comic Sans MS
Courier New
Georgia, Impact

Times New Roman
Trebuchet MS
Verdana
Webdings gibi.

2 – Eskiden web sitelerine yazı tipi kullanımı zordu. 5 ya da 6 tane web uyumlu yazı tipi varken, artık günümüzde Google Fonts Library sayesinde yüzlerce yazı tipi seçebilme şansımız var.

yazı tipi

Google fonts kütüphanesinden açık kaynaklı ( ücretsiz ) yazı tiplerini rahatlıkla kullanabilirsiniz. Aşağıda göreceğiniz üzere Google Fonts Library çoğu tarayıcı ile uyumlu çalışmaktadır.

https://fonts.google.com

Google Fonts API’sı aşağıdaki tarayıcılarla uyumludur:
Google Chrome: sürüm 4.249.4+
Mozilla Firefox: sürüm: 3.5+
Apple Safari: sürüm 3.1+
Opera: sürüm 10.5+
Microsoft Internet Explorer: sürüm 6+

Doğru bir yazı tipi kullanımı adına önerilerim:

1 – Okunaklılık

Sitenizde kulanmak istediğiniz yazı tipi kolay okunabilmeli. Bakıldığı zaman kolay algılanabiliyor ve dolayısıyla kolay okunabiliyor olması çok önemli. Sitenizi ziyarette bulunanların çok vakitleri olmuyor ve hemen ilgilendikleri konu ile ilgili okumak, bilgi sahibi olmak istiyorlar. Çok küçük ve ince yazı tipleri kullanmayın.

2 – Zemin ilişkisi

Seçtiğiniz yazı tipinin sitenizin zemini ile uyumlu olması gerekir. Yazı tipi nerede kullanılacak ise ona göre haraket etmeniz gerekir. Bazı sayfaların zeminleri ( arka planları ) resimlerden, bazıları dokulardan, bazıları renklerden oluşabilir. Yazı tipinin her bir sayfa özelinde kalınlığının, renginin, harf boşluğunun zemine uygun kullanılması gerekir. Unutmayın ki insan gözü, beyaz ( açık renk ) zemin üzeri koyu yazıları daha rahat okur.

Zemin dokulu ise = Daha kalın
Zemin beyaz ise = Normal ya da nispeten daha ince yazı karakteri tercih edebilirsiniz

3 – Farklı yazı tipleri kullanmayın

Web siteniz içerisinde en fazla 2-3 farklı yazı tipi kullanımına izin verin. Çok farklı yazı tipleri kullanımı algılama ve okunaklılığı zorlayacaktır. Doğru yazı tipi kullanımı adına bir yazı tipi ailesinin içinde bulunan 8 farklı kalınlık seviyesini kullanabilirsiniz. Özetle aynı yazı tipi ailesi içinde kalarak, farklı kalınlıklar ( Dik ya da yatay ) kullanarak farklı ve özgün durabilirsiniz.

4 – Sütun düzeni

Tek bir sütun düzeni kullanın. Tekli sütun düzeni anlatı üzerinde daha fazla kontrol sahibi olmanızı sağlar. Bu sayede okuyucularınıza yukarıdan aşağıya doğru, daha öngörülebilir ve akıcı bir şekilde ilerleyeceklerdir.

5 – Türkçe uyumluluk

Seçeceğiniz yazı tipinin Türkçe karakter desteği olmalıdır. 

6 – Farklı cihazları öngörüp, cihazlara uygun yazı tipi ölçüsü kullanının

Farklı cihazları öngörerek, cihazlara uygun yazı tipi ve harf büyüklükleri seçin. Malum hedef kitleniz cok önemli. Hedef kitle profilinizi cok iyi tanımalısınız. ( Cinsiyet, Yaş, eğitim düzeyi vb. ) Hedef kitlenize ve kullandıkları cihazları önceden öngörüp, onlara uygun yazı tipi ve ölçüsü seçerek ilerlemelisiniz. Sizin zevkinizden ziyade hedeflediğiniz hedef kitlenizin beklentisi ve eğilimi önemli.

7 – Duruş

Müşteri ya da tasarımcılar yazı tipi seçimlerini, göze hoş gelen ya da sadece dönemsel trend diye belli bir yazı tipine karar verip, web sitelerinde onu kullanıyorlar ama aslında doğru yaklaşım bu olmamalıdır.
İzlenmesi gereken doğru yol şu olmalıdır. Öncelikle sitenizde nasıl bir duruş sergilemek istediğiniz ile doğru orantılı, vermek istediğiniz mesaja uygun yazı tipi seçmelisiniz.

Örnek veriyorum kurumsal bir duruş sergileyecek bir site için kullanacağınız yazı tipi ile bebek ürünleri satan ve ağırlıkla annelere seslenecek bir sitenin yazı tipi aynı olmamalıdır.

8 – Doğru harf aralığı

Birbirleri ile öpüşür derecesinde yakın duran harflerin göz tarafından algılanması ve dolayısıyla okunmaları oldukça zordur. Doğru yazı tipi kullanımı adına harf aralığını çok az bile açmak, okutma kolaylığı adına çok büyük kolaylık sağlayacaktır.

9 – Büyüklük

Basit gerçek, mütevazi ekran çözünürlüklerinde yazı karakteri ne kadar büyükse, harfleri tanımlamak için daha fazla piksele yer var demektir dolayısıyla büyük yazı tip kullanımı, web sayfalarınız o kadar iyi görünür.

“ Web siteniz için 16 punto büyüklüğünde kullanılacak bir metin, rahatsız edici sanılabilir ama aslında küçük şeylere nazaran okunması çok daha kolaydır. “

10 – Call to action/Eylem çağrısı için farklı yazı tipi kullanın.

Bir web sitesi için olmazsa olmazlardan biri, kullanıcıları harakete geçirecek “ Call to action ” eylem cümlesi, düğme ya da simgesidir.

Bu alanlar özelinde site ziyaretçilerini amacınıza uygun yönlendirebilmek ya da dikkatlerini çekebilmek için farklı yazı tipi ya da aynı yazı tipi ailesini kullanmaya devam ederek büyük, küçük harf ya da italik/eğik gibi farklı kullanım oyunları yapabilirsiniz.

“ Büyük harf ve küçük harf kullanımındaki değişiklik sonucu site trafiğinin yüzde %3 etkilediğini gösteren a/b testleri mevcut. “

10 – Başlık ve metinler için iki farklı yazı tipi kullanın

Okutma ve bölümlere ayırma adına ( böl ve rahak okut ) iki farklı yazı tipi ile haraket etmenizi tavsiye ediyorum. Ayrışma, dikkat çekme, algılama ve okuma kolaylığı sağlayacaktır. Başlıklar adına büyük yazı tipi kullanabilme hakkınız olduğu için Serifli ve etli bir yazı tipi seçerken, metin akışı için Sans-Serif bir yazı karakteri seçebilirsiniz.

11 – Serif mi ? Sans-Serif mi ?

serif-sans-serif-serdarbozoglu
serif-sans-serif farkı

Web siteniz için okunaklı bir metin akışı için Sans-Serif yazı karakteri seçin! Sans-Serif yazı tipleri özellikle metin akışı için web üzerinde en okunaklı yazı tipleridir.

Sans-Serif yazı karakterleri tırnaksız oluşu ( harf için incelme ve kalınlaşma değerlerinin minimum derecelerde olması ) ve daha dolgun olmaları sayesine ekranda piksel değerlerinin daha büyük bir kısmını alırlar ve okunabilirlik adına web sitelerinde daha doğru sonuçlar verirler.

Modern, çok ince olmayan ve doğru kullanılan bir Sans-Serif yazı karakteri seçimi herzaman okunabilirlik adına en iyi sonucu verecektir.

Sağlıcakla Kalınız…

serdarbozoglu@gmail.com

Kimler Neler Demiş?

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Bildir