10 Web Tipografi Kuralları Her Tasarımcı Bilmeli
Birisi tasarladığınız bir web sitesini ziyaret ettiğinde, renkler, görüntüler veya sesler hakkında fazla bir şey ummamaları, hemen metne bakıyor olmalarıdır.
Bir web sitesine yerleştirdiğiniz kaç tane çan ve ıslık olursa olsun , herkes siteyi ziyaret etmek için ne yapıyorsa onu başarmak için metne güveniyor .
Tek başına bu tipografi yapmalı, yazı düzenleme sanatı, herhangi bir web tasarımcısı için bir öncelik.
Bu makalede, bir sonraki web projenizi tasarlarken akılda tutulması gereken 10 kolay kurala bir göz atacağız.
1. Metinden kendiniz okuyun
Gibi bir tasarım ile JonesingFor Metnin büyük bir kavrayışına sahip olmayan bir tasarımcı, bu siteyi gerçekten çalıştıran tipografiyi bir araya getirme çabasında olurdu. Kendi tipografi ile uğraşırken, muhtemelen bir sitenin yazılarını yazmaktan endişe etmenize gerek yok - ama okumak zorundasınız!
Bazı web tasarımcıları, sadece bir metin dosyasının kopyalanıp yapıştırılmasının, metin görevlerinin toplamını oluşturduğunu düşünmektedir. Ancak metnin okunması, metnin bir web sitesine nasıl entegre edilebileceğine dair en az temel bir fikir sunarak, bir web sitesinin tasarımı ve tasarımı arasındaki bağlantıyı kesmekten kaçınmaktadır.
Tipografinizi bir başka çentiğe daha da vurabilirsin, eğer tasarımda yer aldığında metni okuyabiliyorsan. Harflerin çevresindeki boşluğa dikkat edin . Garip görünen alışılmadık büyüklükte alanlarınız var mı? Biraz dikkatli bir tipografi bu sorunları ortadan kaldırabilir. Ayrıca kolayca okuyabileceğiniz, garip satır sonları ve benzer sorunları çok uzun olabilecek çizgiler hakkında da fikir edinebilirsiniz.
2. Lorem ipsum mümkün olan en kısa sürede dökün
Tasarlamış olabileceğini düşünüyor musun? Jesus Rodriguez Velasco'nun web sitesi gerçek metin olmadan Site yazılı kelimeye ve çok özel kelimelere büyük ölçüde bağımlıdır. Gövde metni bile bir damlalık ve Lorem ipsum ile mümkün olmayan başka bir ayarlamayla dikkat çekiyordu.
Web sitenizin metni aslında Lorem ipsum değilse, kukla metin gerçek şeye benzememektedir . Bu, metne ya da onu çevreleyen tasarıma yapabileceğiniz herhangi bir ince ayarın, gerçek şeyi elde edene kadar beklemesi gerektiği anlamına gelir. Süreç içinde mümkün olan en kısa sürede müşterinizden metin istemek (ve almak), genel tasarımınızı ve tipografinizi eşleştirmenizi sağlar.
3. Açık bir hiyerarşi göster
Geldiğinde Rik Cat Industries , hemen okumaya başlaman gereken yeri biliyorsun. Sayfanın en üstünde birkaç bağlantı olmasına rağmen, Rik'a hoş geldiniz önce gözünüze çarpar. Net bir hiyerarşi oluşturmak için tipografi kullanmak çok daha büyük .
Her sitenin iyi gelişmiş bir hiyerarşiye ihtiyacı vardır: okumaya başlamaya ne kadar başlayacaklarına ve nasıl ilerleyeceğine dair göstergeler. Tipografiniz o hiyerarşiyi sağlayabilir - tıpkı Rik'un yaptığı gibi - hiyerarşik düzeninizi önceden bildiğiniz sürece. Boyut ve yazı tiplerini düşünerek, bir metin parçasını, tasarımdaki farklı yerleşimin sağlayamayacağı şekilde bir başlık olarak vurgulayabilirsiniz.
Tasarımınızın hiyerarşisi, tabi ki kullandığınız tipografinin ötesine geçiyor, ama kullanıcılar neredeyse her zaman metinle başladığından, tasarımcıların da aynısını yapmaları mantıklı.
4. Makro ve mikro tipografiye dikkat edin
Ön sayfalar için tamamen tipografiye güvenmek, Crowley Webb ve Associate’ın Web sitesi akılda iki faktörle tasarlanmıştır: makro ve mikro tipografi .
Makro tipografi , türünüzün genel yapısı, metniniz ve tasarımınız bağlamında nasıl göründüğü, metninizi kendi başına bir blok olarak gördüğünüzde.
Mikro tipografi , kelimelerin okunmasının kolay olup olmadığını belirleyen konularla ilgili ayrıntılarla ilgilidir. Bir metin bloğunu bir araya getirme konusunda mikro tipografi mutlak bir gerekliliktir: eğer okunaklı değilse, ilerlemenin bir anlamı yoktur. Crowley Webb ve Associates, bu soruyu dikkatli bir şekilde yazarak ve sitenin vurgulayacağı sözlerle sınırlandırarak ele aldılar.
Ancak makro-tipografi, metninizi aralıklı olarak daha iyi bir hale getirme fırsatı sunar: bu, çekici ve tüm tasarımınızın bir parçası gibi görünmesini sağlama şansıdır . Bu sitedeki yazı ve renk seçimi, geçerli bir bütünü oluşturur. Tipografinin her iki yüzünü görmezden gelmek zararlıdır.
5. tip renklerle ilgilenin
Arka planda metin kaybetmek çok kolay olurdu ArtofElan Özellikle tasarımcı tarafından kullanılan koyu kırmızı renkli parlak kırmızı. Bir web tasarımcısı renkli bir yazıyla çalışırken, bakım kesinlikle gereklidir, kırmızı kombinasyonda kırmızı, hatta kırmızı kombinasyonda sarı görülebilir . Sonuçta, herkesin metinlerinin arka plan renginden sadece bir gölge gibi göründüğü ve okumaya çalıştıkları zaman göz yorgunluğuna yol açtığı bir web sitesini ziyaret etti.
Bu durum için en kolay düzeltme, türünüzün renginin arka planınızın renginden önemli ölçüde farklı olduğundan emin olmaktır . Siyah-beyaz çok iyi çalışıyor çünkü elde edebileceğiniz kadar farklı, ama iyi işleyen bazı renk kombinasyonları var: Açık pembe üzerinde koyu mavi bir çizgi boyunca bir şey işin üstesinden gelecektir. Tersine çevrilmiş metin oldukça zor… Koyu mavi bir arka plan üzerinde açık pembe metinlerle çalışırken, bu konuda bir şikayette bulunma olasılığınız daha yüksektir.
6. CSS'niz hakkında ciddi olun
CSS'niz sağlamsa, web sitenizin sayfaları arasında kesintisiz olarak, farklı sürümlerinde olduğu gibi hareket edebilirsiniz. Hutchouse.com Etkileyici bazı efektler oluşturmak için farklı stil sayfalarına güvenin. Her şeyi Hutchhouse'a kadar götürmezseniz bile, CSS sayfalar arasında yazı tipi ve boyutlarını değiştirmek gibi amatör tipografi sorunlarını ortadan kaldırmaya yardımcı olabilir.
CSS, bir web sitesinin tamamı boyunca tipografiniz arasında kolay tutarlılık sağlayabilir . Yazım şekliyle tutarlı olursanız, bu tutarlılığı kırmak, küçük bir miktar bile, gerçekten göze çarpan bir vurgu yapmak istediğiniz her şeyi yapabilir, tıpkı bir ızgarayı kurmak ve daha sonra kırmak etkili bir tasarım yapabilir. Web tipografisinde, yazı tiplerinizi tutarlı tutmak, basit bir CSS meselesi olabilir.
7. Ortalanmış metni hendekle
Ortalanmış metne bir alternatif seçmek, bir web sitesi tasarımının okunmasını kolaylaştırabilir DesignCanChange.org . Ortalanmış metnin, özellikle de böyle bir sayfada yapılması, sorunlu bir sayfa oluşturacaktır: Her iki tarafta merkezleme pürüzlü kenarlar oluşturmak çok daha zor hale gelir ve mükemmel bir şekilde ortalanmış metnin geri kalanını bozmak için birçok fırsat vardır. tasarımlarınız farklı ekranlarda.
Bazı çevrelerde, ortalanmış tip, bir web sitesi tasarımında Comic Sans'ı kullanmanın sadece bir adım ötesindedir. Bir başlık için düşünebilirsiniz, ancak genel olarak, metninizi sola hizalamak, sağdan sola okumadıkça okuyucularınızı çok daha rahat hale getirecektir .
Akıllı teklifler ve diğer sembollerle 8. anlaşma
Luigi Ottani’nin site tırnak işaretlerine ve diğer sembollere ne kadar dikkat göstereceğinizi gösterir: site bu sembolleri görüntülediğinde tam bir sorun eksikliği. Birçok web sitesi, bir tarayıcının görüntülenemediği sembollerle noktalanır. Bir web tasarımcısının çalıştığı metnin büyük bir kısmının muhtemelen Microsoft Word ya da başka bir kelime işlemci yazılımı parçası yazılmasının, yazarın çok fazla dikkat göstermeden metin üzerinde her türlü küçük değişikliğe yol açtığı gerçeğinin bir mirasıdır.
En kötü değişikliklerden biri de akıllı alıntıdır: Kıvırcık tırnak işaretleri Word otomatik olarak düz tırnak işaretleri yerine geçer . Başka bir sorun alanı, başka bir dilde yazılmış bir metinle çalıştığınız zaman gelir: aksanlar ve üşümeler , Word'ün yardımseverliği kadar sorun yaratabilir. Bu tür değişikliklerle birlikte metni yalnızca kopyalayıp yapıştırırsanız, muhtemelen en azından bazı web tarayıcıları için geri dönüp daha sonra düzeltmeniz gerekir.
Bunun yerine, tasarım sürecine erken başlayın; böylece metninizi tasarımınıza daha iyi uyacak şekilde odaklanabilirsiniz . Bu süslü sembolleri ve son tasarımda akıllı teklifleri göstermek istiyorsanız, HTML öğelerinizi çıkarın.
9. Metninizi büyütmek için plan yapın
Metnin boyutunu artırdığınızda Veerle Pieters Web sitesi, seçtiği font boyutunu kullandığınızdan çok da güzel değil. Ancak, hala her şeyi okuyabilir, bağlantıları ve benzerlerini bulabilir, çok az sayıda web sitesinde doğru olan bir şey olabilir.
Bunun nedeni, kısmen, çoğu tasarımcı, metni 10 punto veya daha küçük bir font halinde yerleştirdiğinden emin olabilir. Çoğu insan bu yazı tiplerini rahatça okuyor, ancak Baby Boomers, web tarama yapan popülasyonun büyük bir bölümünü oluşturuyor ve bu web sörfçülerinin çoğu, tarayıcılarını olabildiğince büyük gösterecek şekilde ayarlayacak . Metniniz ve tasarımınız bu gerçeğe uyum sağlamalıdır.
Ayrıca, tarayıcı boyutunun önemli ölçüde değişebileceği gerçeğini de dikkate alarak, dikkatli değilseniz, beklenmedik konumlara metinleri taşıyabilirsiniz . Boyutu büyütmek bir sorun yaratırsa, eski demografinin bir sonraki web sitesine acele etmesine neden olur. Sonsuza kadar yana kaydırmak, benzer bir sonuca sahip olacaktır.
10. sans serif için bir tercih gösterin
Bakarsanız Bir Apart Apart Web sitesi, hemen hemen her büyük metin bloğu, bir sans serif yazı tipinde ayarlanır ve okunması daha kolay hale gelir. Başlıklar ve diğer küçük metin blokları, seri beslenen yazı tiplerinde düzenlenir ve bu ikisi arasında bir denge oluşturur.
Bir ekrana metin koymaya geldiğinde, sans serif fontları , özellikle bilgisayar ekranında görüntülemek üzere tasarlanan Verdana gibi bir yazı tipi seçtiyseniz hemen hemen her zaman en iyi seçimdir. Serifed yazı tipleri, kötü görüntülenme, bulanıklaşma ve hatta pikselli olma şansları daha yüksektir.
Elbette, seriflerden tamamen kaçınmak mümkün değil. Ancak, özellikle büyük metin blokları için, serif içermeyen bir yazı tipinin kullanılması, ziyaretçilerin bir sitenin metnini kolayca okuyabilecekleri ekstra bir garanti seviyesi sunabilir. Bir projeye yazı tipi seçerken, önce sans serif seçeneklerine göz atın .
Son bir yorum
Tipografi kolayca gözden kaçırılır ve bir tasarımcı bunu dikkate alsa bile, az bir geri dönüş ile zaman-yoğun bir etkinlik olarak yazmak kolaydır. Ancak tasarımınızın merkezinde yer alacak olan metinle birkaç dakika harcadığınızda, herhangi bir web tasarımcısının bir sayfadan tasarımın geri kalanını destekleyen bir öğeye katabildiği bir şeyden dönüştürülebilir.
Perşembe Bram tarafından WDD için özel olarak yazılmıştır.
Bu kuralları ve başkalarını takip ediyor musunuz? Lütfen aşağıdaki görüşlerinizi paylaşın…