Her Tasarımcının Bilmesi Gereken 10 Web Tipografi Kuralı

Etkileşim yaratacak ve ziyaretçilerinizin dikkatini çekecek birçok unsuru web tasarımınıza dahil edebilirsiniz. Bunlara resimler, videolar ve hatta ses dahildir. Ancak hemen hemen her web sitesinin en önemli kısmı, ziyaretçilerin okudukları bilgilere ulaşmak için okudukları içeriktir.

Bu bilgiyi daha kolay okunabilir, görsel olarak ilgi çekici hale getirmek ve bu metnin bir web sitesinin genel tasarımına eklenmesini istiyorsanız, tipografiyi anlamalısınız. Bu, yazılı kelimeyi hem işlevsel hem de estetik olarak hoş hale getirme sanatı ve becerisidir.

Tipografiyi kendi yararınıza kullanmayı öğrenmek istiyorsanız, her tasarımcının aklında tutması gereken bu 10 kuralı inceleyin.

1. İlk Tasarım Sürecinden Sonra LoremIpsum'u Kullanmayı Durdurun

İçerik kral ise, web tasarım sürecinde neden ciddi bir şekilde dikkate alınmıyor? Web tasarımcıları, sahte içeriği yer tutucu olarak kullanarak içeriği ikincil bir role havale eder. Bu, tasarım önceliklerinin tamamen tükendiğinin büyük bir göstergesidir. Örneğin, çeşitli sayfa mizanpajlarını taklit ettiğinizde, ilk aşamalarda bu çok sorunlu değildir. Ancak, işleri bir kez daralttıktan sonra, nihai tasarımı oluştururken gerçek web içeriğiyle çalışmak önemlidir. Bu, belirli bir web sayfasında söylenenlere, düzen ve görsel öğeler kadar önem verilmesini sağlar.

Buna ek olarak, tasarım ve mizanpaj açısından gerçek metne sahip olmak önemlidir. Bir web sayfasını tamamen tasarlamış durumda olmak istemezsiniz, sadece bunun gerçek içerikle çalışmadığını öğrenmek istersiniz. Bu nedenle, asıl metni içerik yazarı müşterinizden mümkün olan en kısa sürede almanız son derece önemlidir.

2. Metin Sans Serif Yapın

Serif metni kesinlikle çok güzel. Bunlar, baskı için ve başlıklar, başlıklar ve alt başlıklar gibi daha büyük baskı uygulamaları için kullanılacak harika yazı tipleridir. Ne yazık ki, metin blokları gibi daha küçük içerik gösterimleri söz konusu olduğunda ekranda serif'ler iyi ölçeklenmiyor. Daha büyük boyutta güzel görünen serifler, yazı tipi küçüldüğünde metnin okunmasını zorlaştırır. Bu nedenle, büyük metinler için serifleri kaydetmeniz ve okunabilirliğin bir sorun olabileceği durumlarda sans'a güvenmeniz önerilir. Daha da iyisi, sans yazı tiplerinin temiz, zarif, modern görünümünü benimseyin ve serifleri matbaa için saklayın. Bu şekilde, güzel görünen bir yazı tipi kullanmak için okunabilirliğin bozulmasıyla asla uğraşmak zorunda kalmayacaksınız.

3. Akıllı Alıntılar ve Diğer Sembolleri Tasarım Sürecinin Başlarında Düşünün

Muhtemelen, belirli simgelerin düzgün görüntülenmediği bir web sitesini ziyaret ettiniz. Bazen bir soru veya garip görünen karakterler dizisi ile değiştirilirler. Diğer zamanlarda, sadece orada değiller. Bu genellikle akıllı veya "kıvırcık" alıntılarla olur. Bu genellikle, MS Word'de veya başka bir pakette oluşturulan ve daha sonra bir web sayfasına taşınan metnin sonucudur. İşler basitçe istendiği gibi çevrilmiyor. Euro simgesi, çift baytlık karakterler ve yabancı içerikten alınan diğer simgeler için de yaygındır.

Nihai tasarımınızda bu sorunu önlemek için birkaç seçeneğiniz var. İlk olarak, bu sembollerden kurtulmak için içeriğinizi değiştirebilirsiniz. Bu, sembolleri doğal dile çevirmeye istekliyseniz işe yarar. Ayrıca, yalnızca kopyalayıp yapıştırmaya güvenmek yerine, simgelerin düzgün görüntülendiğinden emin olmak için HTML kullanabilirsiniz. Neye karar verirseniz verin, web sayfasını mümkün olan her tarayıcıda test ettiğinizden emin olun. Bir tarayıcıdaki sembollerle ilgili bir sorunu çözebilecek şey, diğerinde hiç etkili olmayabilir.

4. Gelişmiş CSS Becerileri Son Derece Önemlidir

İyi CSS becerileri geliştirdiyseniz, ziyaretçileriniz web sitenizin sayfalarında kesinlikle sorunsuz bir şekilde gezinebilmelidir. Stil sayfalarınızı düzgün bir şekilde oluşturursanız, tipografi söz konusu olduğunda mükemmel sürekliliği korurken aynı sayfanın birden çok versiyonuna bile sahip olabilirsiniz. Tabii ki, çok fazla hile kullanmanıza gerek yok. İyi CSS, yazı tiplerinin ve yazı tipi boyutunun bir sayfadan diğerine değişmesi gibi küçük ama yaygın sorunlardan kaçınmanıza yardımcı olabilir.

Tutarlı tipografi neden böyle bir zorunluluktur? Tutarlı tipografiyi sürdürmek için CSS kullanmak, web sitenize profesyonel ve keskin bir görünüm kazandırır. Ayrıca, her sayfayı tasarlarken tipografi hakkında düşünmenize gerek olmadığı anlamına gelir. Bunun yerine, sadece uygun stil sayfasını kullanırsınız. Belirli bir sayfada, bir etki yaratmak veya bir şeye dikkat çekmek için normları kırıp tipografi ile farklı bir şey yapacağınıza karar verirseniz, CSS kullanımınız sayesinde daha fazla öne çıkacaktır.

5. Hem Mikro hem de Makro Tipografi Önemlidir

Mikro tipografi, tipografinin okunabilirlikle ilgili ayrıntılarıyla ilgilidir. Örneğin, aralık, ölçekleme ve kontrast gibi mikro tipografi ile ilgili bir endişedir. Bir metin bloğunun herhangi bir cihazda veya tarayıcıda okunabilmesini sağlamak için yaptığınız ayarlamaların tümü mikro tipografi ile ilgilidir.

Makro tipografi, tipografi ile ilgili seçimlerinizin genel tasarımınıza nasıl bağlandığıyla ilgilidir. Estetik ile ilgilidir.

İyi tipografi, hem mikro hem de makro tipografiyi dikkate alır. Gerçekten düzgün görünümlü, özel yazı tipi kullanan ve aynı zamanda okunması neredeyse imkansız olan bir web sitesini hiç ziyaret ettiniz mi? Mikro tipografi değil, makro tipografiye dikkat edildiğinde olan budur.

6. İçeriği ve Tasarımı Bilin

Bildiğiniz gibi, iyi bir web sitesinin akışı vardır. Bunun bir kısmı, sayfada bulunan içeriğin okunabilirliğidir. Bunun serifler gibi şeylerden nasıl etkilendiğini zaten tartıştık ve tasarımın sonraki aşamaları söz konusu olduğunda sahte metnin gerçek metnin yerini tutmayacağını tartıştık. Henüz işimiz bitmedi. İçerik gerçekten kraldır. İçerik de dahil olmak üzere nihai tasarım hazır olduğunda, web sayfasını okumanız gerekir.

Tasarımınız bittikten sonra içeriği okuduğunuz zaman boşluk veya satır sonu sorunları olup olmadığını belirleyebilirsiniz. Bunlar içeriği kafa karıştırıcı hale getirebilir, hatta istemeden içeriğin anlamını değiştirebilir. Birkaç tipografi hilesi kullanarak bu sorunları düzeltmek, nihai ürününüzün sizin veya müşterinizin niyetini tam olarak iletmesini sağlayabilir.

7. Hiyerarşinin Önemini Anlayın

Hiyerarşi, web sitenizi ziyaret eden kişilere verdiğiniz yol haritasıdır. Bu hiyerarşiyi oluşturmak için resim, video, renk ve (elbette) tipografi kullanabilirsiniz.

Bu sadece ziyaretçiyi görmelerini istediğiniz ilk şeyden diğerine yönlendirme meselesidir, vb. Tipografi ile, kullanıcıların izlemesini istediğiniz hiyerarşiyi tanımlamaya yardımcı olması için boyutu, yazı tipindeki değişiklikleri ve aralığı kullanabilirsiniz. Aslında, dönüşüm sağlamayan bir sayfanız varsa, yaptığınız herhangi bir değişikliğin ziyaretçileri harekete geçirici mesaj düğmesine yönlendirmeye yardımcı olup olmayacağını görmek için tipografi ile oynamak isteyebilirsiniz.

8. Renk Konusunda Yaratıcı Olurken Dikkatli Olun

Yazı tipi rengi ve arka plan rengiyle ilgili sorunlardan dolayı okunabilirlik sorunları yaşamamanızı sağlamanın en kolay yolu, en yüksek kontrastlı renkleri, siyah ve beyazı kullanmaktır. Ne yazık ki, bu oldukça sıkıcı bir tasarım yapabilir.

Renkleri kullanmaktan korkmayın. Aslında işe yaramayacak gibi görünen renk kombinasyonlarını kullanmaktan korkmayın. Bazen, yapmanız gereken tek şey bir veya iki ton daha açık veya daha koyu kullanmaktır. Ardından, tipografiniz okunamazdan mükemmel bir şekilde fark edilebilir ve gerçekten harika bir görünüme dönüşür.

9. Hendek Merkezli Metin

Ortalanmış metinle ilgili sorunlar çoktur. Her şeyden önce, web sayfalarınızın kötü tasarlanmış el ilanlarına benzemesine neden olabilir. Buna ek olarak, neredeyse her zaman garip kenar boşlukları ve eski bir rock albümünden bir şiir veya satır notları olması amaçlanmış gibi görünen metinlerle karşılaşırsınız. Başlıklar için ortalanmış metin kullanmak uygun olsa da, genellikle bundan tamamen kaçınmak en iyisidir. Sola ayarlanmış metne bağlı kalın ve okuyucularınız içeriğinizi okumayı çok daha kolay bulacaktır.

10. Metninizin Büyütülmüş Gibi Göründüğünü Düşünün

İster başparmaklarını ve işaret parmaklarını kullansınlar ister yakınlaştırma düğmesine tıklasınlar, insanlar metninizi büyüteceklerdir. Bazen bunu daha küçük bir ekranı telafi etmek için yaparlar. Diğer zamanlarda, metninizi normal boyutta okumaları zor olduğu için bunu yaparlar.

Herkes metninizi amaçlandığı gibi görüntüleyebilseydi harika olurdu, ancak metinleri görmek için genellikle fazladan yardıma ihtiyaç duyan boomer'lar ile bu mümkün değildir. Büyütülürse bozulan bir yazı tipi kullanmamaya dikkat edin.

Yararlı Araçlar ve Kaynaklar

Tipografi ile daha fazlasını yapmanıza yardımcı olacak birkaç faydalı araç ve kaynak:

• FontFace Ninja : Bu yardımcı program internette bulduğunuz yazı tiplerini tanımlamanıza yardımcı olur. Bu, gerçekten gözünüze çarpan bir yazı tipiyle karşılaştığınızda sahip olmak için harika bir araçtır. Bu Chrome eklentisi, herhangi bir web sitesinde gördüğünüz ticari olarak mevcut tüm yazı tiplerini tanımlamanıza, bulmanıza ve satın almanıza yardımcı olur.
• TypePlate : Bu, web tasarımcıları için mükemmel olan eksiksiz bir tipografi çerçevesidir. TypePlate gömme, blok tırnak, ölçekleme, renkler ve tipografi ile ilgili çeşitli diğer zorlukların üstesinden gelebilir.
• Modüler Ölçek : İdeal font ve font boyutunu belirlemenizi sağlayan ölçektir. Ayrıca başlıklarınızın ve başlıklarınızın yazı tipi boyutu ile metniniz için seçtiğiniz yazı tipi arasında bir denge oluşturmanıza yardımcı olur.
• TIFF : Bu araç, iki farklı yazı tipi oluşturmanıza olanak tanır. Ardından, sizin için iki yazı tipinin her biri arasındaki farkları görüntüler. Hatta bir yazı tipinden diğerine farklı harf ve sayıları karşılaştırmanıza izin verir.
• TypeWolf : İnternetteki en havalı yazı tiplerinden bazılarını ve tipografinin en ilham verici kullanımını bulmak için bu web sitesini kullanın. Bu mükemmel bir ilham kaynağı ve bilgi kaynağıdır.
• Neden Yazı Tipleri Önemlidir, Sarah Hyndman : Bu, yazı tiplerinin önemini ve tipografinin zihin durumunu nasıl etkileyebileceğini araştıran mükemmel bir kitap. Tipografi konusunda tutkulu insanlar için değil, aynı zamanda doğru iş türünü seçmenin önemine ikna etmeye ihtiyaç duyabilecek insanlar için de harika bir kitap.

Çözüm

Umarız bu makale, web tasarımcılarını tipografi üzerine biraz daha düşünmeleri ve tasarımlarında yazı tipini daha etkili ve daha yaratıcı bir şekilde kullanmanın yollarını bulmaları için etkiler.