Tipografi, web sitenizin tasarımının önemli bir yönüdür. Bir yazı tipi stili seçmek kolaydır - çoğu modern site inşaatçıları, bir yazı tipi stilini değiştirmek sadece üç tıklama uzaklıktadır. Ancak, bir web sitesi için *doğru* yazı tipi stilini seçmek asla kolay bir iş değildir. Doğru tipografiye sahip bir web sitesi, profesyonel bir izlenim verir ve ziyaretçilerinin kolayca okumasını sağlar.
Bu yazıda, tipografinin farklı unsurlarını keşfedeceğiz ve web siteniz için doğru tipografiyi seçmeyle ilgili ipuçları paylaşacağız.
Tipografi Nedir?
Tipografi, yazı dilini okunabilir, okunabilir ve görüntülendiğinde çekici kılmak için yazıları düzenleme sanatı ve tekniğidir.
Daha derine inmeden önce aşina olmanız gereken bazı temel tipografi öğeleri şunlardır:
Yazı Tipi ve Yazı Tipi
Yazı tipi, belirli bir karakter kümesinin tasarımıdır. Örneğin – Times New Roman, Arial veya Helvetica, geçmişte karşılaşmış olmanız muhtemel bazı yaygın yazı biçimleridir.
Yazı tipi, örneğin Arial Bold veya Times New Roman Italic gibi bir yazı tipinin özgül ağırlığı, genişliği ve stilidir.
Yazı Boyutu
Bir yazı tipinin boyutu nokta olarak ölçülür. Web tasarımında yazı tipi boyutu piksel (px), ems (em), rems (rem) ve yüzde (%) cinsinden ölçülür. Pikseller (px), yazı tipi boyutunu sabit bir piksel sayısıyla tanımlayan mutlak bir ölçü birimidir. Öte yandan Ems (em), Rems (rem) ve Yüzdeler (%), bir web sayfasındaki farklı öğeleri temel alan göreli ölçü birimleridir. Doğru yazı tipi boyutu, ekran boyutuna ve okuyucular ile ekran arasındaki mesafeye bağlıdır.
Genel olarak masaüstü için – 16px – 20px, mobil için 14px – 18px önerilir. Okumakta olduğunuz bu sitenin yazı tipi boyutu hem masaüstü hem de mobil ekranlar için 18px'dir.
satır Aralığı
Satır aralığı, satır aralığı olarak da bilinen metin satırları arasındaki dikey boşluk miktarıdır.
hiyerarşi
Tipografi hiyerarşisi, bir sayfadaki farklı metin düzeylerinin düzenlenmesini ifade eder. Çoğu web tasarımcısı, içeriği konuya göre bölümlere ayırır ve içerikte gezinmeyi ve sindirmeyi kolaylaştırmak için tipografi hiyerarşisini kullanır.
Örneğin, bu blog gönderisi başlık metniyle (Başlık 1 veya H1 olarak da bilinir) başlar, ardından farklı bölüm başlıkları (H2) ve alt başlıklar (H3, H4, kalın), gövde metni (şu anda okuduğunuz içerik blokları) gelir. ) ve alt metin (alt bilgi bölümünde görünen küçük yazılar).
Farklı seviyelerde başlıklar, alt başlıklar, yazı tipi boyutları, yazı tipi ağırlıkları, renkler ve boşluk kullanarak, kullanıcının dikkatini en önemli bilgilerinize yönlendiren ve içeriği taramayı ve sindirmeyi kolaylaştıran net bir görsel hiyerarşi oluşturabilirsiniz.
Yeni Başlayanlar İçin Tipografi İpuçları
Artık temel bilgileri öğrendiğimize göre, site tasarımınıza uygulayabileceğiniz bazı eyleme geçirilebilir ipuçlarına göz atalım.
1. Web Sitenizin Marka Kişiliğini Yansıtan Yazı Tiplerini Seçin
Farklı yazı tiplerinin farklı kişilikleri vardır. Web sitenizin marka kimliği ve değerleri ile uyumlu olanları seçmek önemlidir. Tipik olarak - bir sans-serif yazı tipi daha modern ve şık olabilirken, bir serif yazı tipi daha geleneksel ve zarif olabilir.
Yeni başlayanlar için genellikle Arial, Helvetica, Roboto, Open Sans, Lato, Montserrat ve hatta Verdana gibi yaygın yazı tipleriyle başlamak en iyisidir. Bu yazı tipi türleri yalnızca çoğu düzen tasarımına kolayca uymaz, aynı zamanda çoğu cihazda ve tarayıcıda yaygın olarak bulunur. bu da onları "web için güvenli" yapar.
Tipografi Örnekleri
Bir yazı tipi seçerken okunabilirlik, okunabilirlik ve ses tonu gibi faktörleri göz önünde bulundurun ve bunun web sitenizin genel stiline ve markasına uygun olduğundan emin olun. Aşağıda, World Wide Web'den alınan bazı gerçek hayattan örnekler verilmiştir.
2. Üçten Fazla Yazı Tipi Kullanmayın
Az ama öz. Çok fazla yazı tipi kullanmak genellikle karmaşık ve kafa karıştırıcı bir tasarıma neden olur. Genel bir kural, en fazla 2-3 farklı yazı tipi kullanmaktır. WHSR'de, sitemizde yalnızca bir yazı tipi kullanırız.
3. Font Eşleştirmeye Dikkat Edin
Yazı tipleri birbiriyle rekabet halinde değil, birbirini tamamlamalıdır. Birlikte iyi çalışan yazı tiplerini bulmak için bir yazı tipi eşleştirme aracı kullanın.
4. Okunabilirliği artırmak için satırlar arasında yeterli boşluk (satır yüksekliği) kullanın
Gövde metni için en az 1.5 satır yüksekliği önerilir ve yazı tipi boyutuna ve türüne göre ayarlanabilir. Doğru miktarda satır yüksekliği, metnin sıkışık veya karışık görünmesini önlemeye yardımcı olabilir; bu da okuyucuların içeriğinizi taramasını ve hızlı bir şekilde fikrini kavramasını çok daha kolaylaştırır.
5. Hareketli metinlerden kaçının
Artık 90'larda yaşamıyoruz. Animasyonlu metinler havalı değil. Ayrıca, dikkat dağıtıcı olabilir ve içeriğinizin okunmasını zorlaştırabilirler. Bunun yerine, önemli bilgilere dikkat çekmek için animasyonu tutumlu ve stratejik bir şekilde kullanın.
Örneğin, harekete geçirici mesaj düğmesini vurgulamak veya sayfadaki gizli içeriği ortaya çıkarmak için animasyonu kullanabilirsiniz.
Animasyon kullanırken genel kural, içeriğin okunabilirliğini veya erişilebilirliğini etkilememesidir.
6. Büyük harf kullanımını en aza indirin
İster gövde metninde ister başlıklarda olsun, tüm büyük harfli cümleleri okumak zor olabilir. Bir noktayı vurgulamanız gerekiyorsa, bunun yerine kalın veya italik yazı tipi stilleri veya zıt renkli arka planlar kullanmayı düşünün.
7. Tipografinizi farklı cihazlarda ve ekran boyutlarında test edin
Tipografinizi farklı cihazlarda test etmek, kullanıcı deneyimi sorunlarını veya tasarım tutarsızlıklarını belirlemenize yardımcı olur. Web sitenizde gezinmenin ve anlaşılmasının kolay olması için yazı tipi boyutlarının, satır yüksekliklerinin ve diğer tasarım öğelerinin hem küçük hem de büyük ekranlar için uygun şekilde ayarlandığından emin olun.
Farklı yazı tiplerini, boyutları ve düzenleri denemekten korkmayın. Tasarımı kullanıcılarla test edin ve web analitik verilerine (sayfada geçirilen süre, hemen çıkma oranı vb.) ve geri bildirimlerine dayalı olarak yineleyin.
Yararlı Tipografi Araçları ve Kaynakları
Web siteleriniz için tipografi seçmenize yardımcı olabilecek bazı yararlı web siteleri ve araçlar şunlardır:
- Google Fonts: Web sitenize kolayca entegre edilebilecek, web dostu yazı tiplerinden oluşan ücretsiz bir koleksiyon.
- FontPair.co: Her tür tasarım için ücretsiz yazı tipleri ve yazı tipi eşleştirme galerisi.
- Fonts.com: Hem web hem de basılı kullanım için profesyonelce tasarlanmış çok çeşitli yazı tipleri sunan bir web sitesi.
- Yazı tipi sincap: Ticari ve kişisel kullanım için çok çeşitli yüksek kaliteli yazı tipleri sunan ücretsiz bir yazı tipi kaynağı.
- Yazı Tipi Sprint Eşleştiricisi: Yüklenen resimlerden yazı tipi türlerini belirlemeye yardımcı olan ücretsiz bir yazı tipi bulma aracı.
- DaFont: Kişisel ve ticari projeler için kullanılabilecek çok çeşitli ücretsiz yazı tipleri sunan popüler bir web sitesi.
- Yazı Alanı: Kişisel ve ticari kullanım için çok çeşitli yüksek kaliteli yazı tipleri sunan başka bir ücretsiz yazı tipi koleksiyonu.
- fontanello: Bir metnin temel tipografik stillerini sağ tıklayarak görüntülemenizi sağlayan bir tarayıcı uzantısı.
Sarmak
Tipografi bir cruciWeb sitenizin okunabilirliğini, okunabilirliğini ve genel kullanıcı deneyimini büyük ölçüde etkileyebilecek web tasarımının tüm yönleri. Tipografinin temellerini anlayarak daha etkili ve ilgi çekici web siteleri oluşturabilirsiniz.
