Web tipografisi tasarım ve css

Eylül 12, 2012
Share Button

İnternet, milyonlarca insanın kullanımındaki dünyanın en yaygın ve en büyük bilgisayarlı iletişim ağıdır. Bu ağdan yararlananların sayısı her geçen gün biraz daha artmakta. Bu global ağın gereklilikleri ile web sitesi ihtiyacı içindeki kurum, kuruluş veya kişiler ilgi çekici, bilgi verici ve görsel yönden etkili sayfalar yaratmak istiyorlarsa, belirli bir tasarım birikimine sahip kişi veya firmalarla çalışmalılardır.

Amacına uygun olarak derlenmiş bir bilgi, doğru düzenlenir, iyi sınıflandırılır ve etkili şekilde sunulursa alıcısı tarafından kolayca algılanır. Düzensiz yerleştirilen yazı ve görüntü ögeleri algılamayı, iletişimi güçleştirir ve yanlış anlaşılmalara neden olur. Yazı ve görüntüler arası görsel denge iyi kurulmalıdır. Renk ve biçimler ve de bunların ağırlıkları sıkıcı değil, ilgi çekici olmalıdır. Göz, bilgi akışına göre zorlanmadan sayfayı takip edebilmelidir. Unutulmamalıdır ki yazı, iletişimsel anlamını kaybettiği an amacından da uzaklaşmış olur.

Bu nedenle web sitenizin tasarımından kodlanmasına Tipografi çok önemlidir. Düzgün tasarlanmış bir site uygun yeterliliğe sahip olmayan font-end developer kodlaması ile amacından sapabilir.  Peki Tipografi  nedir? Tipografi (Etimoloji: Yunanca’da “typos” (form) ve “graphia” (yazmak) sözcüklerinden türemiş olan) typographia sözcüğünün Türkçe halidir. Kavram; forma uygun yazmak demektir.  Tipografi yazı karakterlerinin iki boyutlu bir yüzeye yerleştirilmesi sanatı ve tasarımıdır. Sözcüğün mantık sınırlarını zorlamasını sağlar, dikkati diri tutar, insan ruhunu okşar,heyecan verir. Bu nedenle tasarımcının sloganı; “Basit, etkin ve derin” olmalıdır. Web sayfaları, kolay kullanımı ve algılanırlığı ile “basit” ve “yalın”, verimli ve yararlı bilgileriyle “etkin”, tüm sorulara vereceği yanıtlarla “zengin”, yaratacağı heyecan ve esinlerle de “derin” olmalıdır. 

İnternet üzerinde okunaksız yazı örneklerine sıkça rastlanmaktadır. Özellikle temel tasarım prensiplerini bilmeyenlerin hazırladığı web sayfalarında daha sık rastladığımız okunma sorununu yaratan bazı etkenler vardır. Bunlar: yazı karakteri seçimi, font sayısı, puntosu, serifli, serifsiz, bold ya da italik olması, BÜYÜK/küçük harf (majüskül/minüskül) olması, bloklama biçimi, harf ve zemin rengi, zemin dokusu, satır uzunluğu ve boşluklardır.

Sözcükler, yazıldığı harf karakterine göre anlam kazanırlar, etkili veya etkisiz görünürler. Algılamanın kolay ya da zor olması, kavramların somutlaştığı bu harf gruplarının yapısına bağlıdır. Her yazı karakterinin bir kimliği vardır. Bu kimlik mesajın iyi anlaşılmasını sağladığı gibi, yanlış yorumlara da neden olabilir. Narin, kaba, kadınsı, erkeksi, çağdaş, klasik, resmi, gayriresmi, laubali veya oryantal yazı karakterleri vardır. Örneğin Times’ın, İngiliz asaletini, ağırbaşlılığını yansıttığı söylenebilir.

Web sayfasında yazı ve görüntüyü gösteren boşluktur. Fazla boşluk, dinlendirir, rahat algılama sağlar. Az boşluk ise karışıklık ve karmaşa yaratır, algılamayı güçleştirir. Yazı alanına çok yaklaşmış görüntü ögeleri, hem yazının hem kendinin algılanmasını zorlaştırır. Okuyucunun dikkatini dağıtır. Yazı ile görüntü arasında en az 4 mm. boşluk olması gerekir. Yazı ve resim alanları ile kenar boşlukları önceden saptanmalıdır. Resimlerin, metni ikiye bölmesi zorunluysa, tümceyi degil, paragrafı bölmesi tercih edilmelidir.

Bu nedenle aşağıda tasarımın stillerini oluştururken kullanılan css terimlerinden bazılarına değindik.

Metin genişliği

Okunabilir sayfalar yaparken kullanıcıya sunulan metinlerin genişlikleri önemlidir. Tek kolonlu yapı kullanan sayfalarda kolon genişliği 52-78 karakter(boşluklar dâhil) içerecek şekilde ayarlanması tipografi  bakımdan uygun görülmüştür. İki kolon bir yapı düşünülüyor ise her bir kolonun 40-50 karakter içermesi daha uygundur.

Yazı Tipi ( font )
Tipografi yazı tipi seçimi ile başlar. Serifli mi, serifsiz mi, kaligrafik veya Gothic mi? Bu nedenle web sitenizin tasarımına ve web sitenizin içeriğine göre font seçmelisiniz. Body’ ye tanımlayacağınız font ailesi ile diğer css elemanlarıyla aksini belirtmediğiniz sürece tüm sayfalarınızın font ailesini tanımlamış olursunuz .

Yazı boyutu (font size)

Web tipografisinde en çok kullanılan özellik yazı boyutudur. Bu değer için kesin px cinsinden yada göreceli % cinsinden değerler atanabilir. Aynı yazı tipi gibi body’ ye tanımlayacağınız font boyutu,ağırlığı ve satır yüksekliği ile diğer css elemanlarıyla aksini belirtmediğiniz sürece tüm sayfalarınızın font tanımlamalarını yapmış olursunuz .

Başlık (header)

Tanımlı başlık büyüklükleri aşağıdaki gibidir. Fakat sizde istediğiniz büyüklüklerde ve renklerde istediğiniz divlere göre ayrı ayrı başlık stilleri tanımlayabilirsiniz.

  • Font size: #0 (12px veya daha büyük)
  • <H1>heading</H1>: #1 (24 px veya daha büyük)
  • <H2>heading</H2>: #2 (18 px)
  • <H3>heading</H3>: #3 (14 px)
  • <H4>heading</H4>: #4 (12 px)
  • <H5>heading</H5>: #5 (10 px)
  • <H6>heading</H6>: #6 (8 px veya daha küçük)

Satır Yüksekliği(line-height) 

Web tipografisinin en önemli özelliklerinden biridir satır yüksekliği tanımı. Metinlerin görünümünde büyük etkisi vardır. Satır yüksekliği için genel kabul yazı boyutunun 1.4-1.6 katı kadar bir mesafedir.

Font Kalınlığı( font-weight)

Seçtiğiniz fontun özelliklerine göre 100’den 900’e değer verebilir veya bold olarak tanımlayabilirsiniz.

Font Stili (font-style)

Görünüm ile dikkat çekilmek istenen yerlerde ve tipografik açıdan gerekli görülen yerlerde yazınıza stil kazandıracaktır.

Yazı Dekorasyonu (text-decoration)

Yazının altı çizili olmasını istediğimizde kullanırız. Web’de genelde altı çizili yazılar link olarak kullanılır ve böyle algılanır.

Renk (color)

Yazıda renk vurguyu artırır. Bu nedenle yazımızı renklendirmek amacıyla hex kodlarıyla tanımlamalar yaparız. Zemin renginize göre fontunuzun renk seçimini yaparsınız. Örneğin koyu zemindeki açık renk yazı, kontrastlık yaratır. Koyu renkli zeminler üzerindeki yazılar açık renkli ve serifsiz fontlardan seçim yapılırsa daha iyi görünür. Okunurluk açısından harf ve zemin arasında en az %70 ton farkının gerekli olduğu da unutulmalıdır. Zemin 100 değer ise harf 30 değerden fazla olmamalıdır. Tersi için de aynı şey geçerlidir. Aynı zamanda renk seçimi yaparken renklerin psikolojik etkisine de dikkat edilmelidir.

Metin hizalama ( text-align )
Metni sağa(right), sola(left), ortaya(center) hizalamak ve iki yana yaslamak(justify) için text-align özelliğini kullanırız. Ayrıca iki yana yasladığımız metinlerimize text-justify komutu ile auto|inter-word|inter-ideograph|inter-cluster|distribute|kashida|trim gibi stiller tanımlayarak oluşabilecek tipografik bozuklukları giderebiliriz. text-align-last ile de justify ataması yaptığımız metinlerin son satırında meydana gelen kelimeler arası fazla boşluk sorununu çözebilirsiniz.

Harf Aralığı(letter-spacing)

Harfler arasındaki boşlukların değerini belirlemenize yarar. Bu sayede tasarımdaki ile birebir örtüşen frond-end kodlamalar yapmanızı sağlar.

Sözcükler Arası Mesafe(word-spacing)
Sözcükleriniz arasındaki değeri px cinsinden tanımlamanıza yarar.

Paragrafın ilk satırını içeriden başlatma (text-indent) 
Paragraflarınızın belirttiğiniz ölçüde içeriden başlamasını sağlar. Birçok dergi, gazete ve yazıda karşılaştığımız gibi.

Son olarak şunu söyleyebiliriz ki  iyi bir web sitesinin birincil gerekliliği iyi tipografiye sahip olmasıdır. Bu nedenle tipigrafik açıdan doğru tasarlanmış bir web sayfasını gelişen teknolojiyi sürekli takip ederek css ile tasarımın örtüştüğü kodlamalar ile doğru bir şekilde ortaya çıkartmalısınız.  Basiti karmaşık hale sokmak hiç de zor değildir. Önemli olan karmaşığı basitleştirmektir. Bu da araştırma ve denemeyi gerektirir. Denemekten ve araştırmaktan asla vazgeçmeyin çünkü yaratıcılığın sonu yoktur.

Kaynaklar : İnternetteki Tipografi Sorunları ve Görsel Kirlenmeye Karşı Öneriler – Doç. Hasip Pektaş
Share Button
 


1 Comment


  1. Güzel bir çalışma ve paylaşım olmuş. Umarım hakettiği ilgiyi görür. Başarılar dilerim.

Leave a Reply

Comment moderation is enabled, no need to resubmit any comments posted.