Web Sitenizde Fontları ve Yazı Tiplerini Değiştirmek

Web sitenizde yazı fontunu değiştirmek için aşağıdaki adımları takip edin.

CSS kodlarınızda düzenleme yapmadan önce, mevcut kodları kopyalayıp bilgisayarınızda lokal bir metin dosyası içinde yedekleminizi öneririz. CSS kodlarınızı yedeklerseniz, olası bir hata durumunda, eski kodlarınızı sitenize ekleyerek sorunu düzeltebilirsiniz.

Web Sitesinde Font Değiştirme Nasıl Yapılır?

1. Adım Fontu Seçin: https://fonts.google.com adresinden eklemek istediğiniz fontun karşısında bulunan + iconuna tıklayınız

2. Adım Family Selected: Tıkladıktan sonra sayfanın altında açılan Family Selected penceresine tıklayınız.

3. Adım Languages: CUSTOMIZE butonuna tıkladıktan sonra regular, medium, bold seçeneklerinden istediğinizi seçin. Türkçe karakterlerle ilgili sorun yaşamamak için Languages kısmından Latin Extended tıklıyoruz.

4. Adım Embed: EMBED butonuna tıklıyoruz . Tırnak içersinde bulunan adresi kopyalıyoruz. (Mavi Renkteki alan)

5. Adım Less Css Paneli: Sitemizde LESS (CSS) panelinden seçili kısımdaki adresi silip yerine kopyaladığımız adresi yapıştırıyoruz.

6. Adım Kodu Kopyalayın: EMBED kısmından font family kodunu kopyalıyoruz. (Mavi Renkteki alan)

7. Adım Kodu Ekleyin: Sitemizde LESS (CSS) panelinde @fontAilesi kısmına kodumuzu ekliyoruz.

3 Seviyeli Tipografik Hiyerarşi

Üzerine pek düşünmediğiniz halde bütün web sitenizde tipografik hiyerarşiyi kullanıyorsunuz. İnsanların web sitenizde baktığı en önemli elemanlardan biri kesinlikle metin. Metinlerinizin temiz ve okunaklı olması ve kullanıcılarınızı, direkt olarak tasarımın içine çekmesi gerekiyor. Özetle bu tipografi hiyerarşisidir.

Tipografi Hiyerarşisi Nedir?

Aslında tipografi hiyerarşisi, görsel hiyerarşinin bir çeşididir. Bir metinde, en önemli parçaların, dikkat çekecek ve önemini vurgulayacak biçimde sunulmasını sağlar. Tipografik hiyerarşi olmazsa, bir tasarımdaki her metin, her cümle ve her kelime birbiriyle aynı görünür. Her şeyin aynı boyda ve renkte olduğu bir sayfayı okuduğunuzu hayal edebiliyor musunuz? Nereden başlayacaksınız? Neyin daha önemli olduğunu nereden anlayacaksınız?

Tipografik hiyerarşi, elemanlar arasında kontrast oluşturur. Tasarımcılar bunu farklı yazı tipleri, boyutları, kalınlıkları, büyük ve küçük harfler, bold veya italikler ve renkler kullanarak sağlarlar. Bu tasarım araçları metininizin farklı katmanlara ayrılmasını sağlar.

Birincil Seviye

Birincil seviye tipografi, bütün büyük metinleri ifade eder. Başlıklar buna örnek olabilir. Eğer tipografi sanatı ile uğraşmıyorsanız, bunlar tasarımdaki en büyük elemanlardır.

İkincil Seviye

Tipografinin ikinci seviyesi, okuyucuları web sitesinde tutmak için gerekli bilgilerin verildiği parçalardır. Bölüm başlıkları, alt başlıklar, tanıtım kutuları, bilgi görselleri (infografikler) ve diğer küçük bloklar; ikincil seviye tipografiye örnek verilebilir. Bu metin bloklarının tasarımı genellikle, büyük boyutlu olurlar ancak birincil seviye tipografi boyutlarından çok daha küçüklerdir.

Üçüncül (Tersiyer) Seviye

Bu seviyedeki tipografi, tasarımınızın ana metinidir. Genellikle web sitesinin tasarımındaki en küçük boyutlu yazılardır ama potansiyel müşterileriniz için, okunaklı olmaları gerekir. Yazı tipi basit ve boş alanlarla ve genel kullanımla tutarlı olmadır.

Diğer Seviyeler

Tipografide diğer seviyeler, tersiyer seviye içindeki küçük parçalara uygulanan efektlerdir. Efektler, ana metinde vurgulanması gereken yerlere uygulanan, bold, italik, altçizgi ve renk gibi elemanlar olabilir. Bu efektler, tersiyer seviyede kullanılan yazı tipi ve boyutu bozmadan uygulandığında çok daha iyi çalışırlar.

Basılı Projelerde Hiyerarşi

Eğer yukarıdaki örneklere bakarsanız, farklı tipografik hiyerarşi seviyelerini ve okunaklılığı nasıl değiştirdiğini fark edebilirsiniz.

Fontlarda Hiyerarşi Yaratın

Hiyerarşi yaratmanın farklı yolları mevcut.

• Yazı tipi seçimi: Daha ilginç yazı tipleri genellikle daha büyük oluyorlar ve bunlar basit olanlara göre daha çok dikkat çekiyor. Farklı yazı tipleri kullanacaksanız, yazıların yeterince büyük ve okunaklı olmasına dikkat edin.
• Boyut: Belirtmemize gerek yok tabii ama metin boyutları büyüdükçe okuyucunun dikkatini çekme hızı da artıyor. Metin boyutlarını, metnin önemine göre ayarlamalısınız.
• Kalınlık: Harflerin kalınlığı metni daha büyük veya daha küçük gösterebilir.
• Büyük/küçük harfler: Bir insana tamamı büyük harflerle yazılmış bir e-mail atmanın ona bağırmak gibi olduğunu duymuşsunuzdur. Aynı durum tasarımda da geçerli bu yüzden büyük harf kullanırken dikkatli olmalısınız. Büyük harfler çok daha büyük görünürler ve metinde küçük harfler de olduğu zaman fazla ön planda hissettirirler.
• Bold: Bold kullanmak, metinde belirli bir grubu veya kelimeyi vurgulamak için çok güzel bir yöntem.
• İtalik: İtalik, bold kullanımına göre daha az dramatik olacak şekilde kelimeyi veya grubu vurgulamak için kullanılıyor.
• Renk: Bu yöntem her seviyedeki tipografik hiyerarşide kullanılabilir ancak okunaklılığı etkilememesine dikkat etmelisiniz.
• Yerleşim: Metinlerin sayfa üzerindeki yerleşimleri de hiyerarşiyi etkileyebilir. Okuma biçimimiz genellikle yukarıdan aşağı olacak şekildedir ama bu farklı teknikler kullanarak değiştirilebilir.

Dijital Projelerde Font Hiyerarşisi

Basılı projelerde kullandığınız bütün araçlar dijital projelerde de kullanılabiliyor. Dijital tipografik hiyerarşi için HTML'yi de göz önünde bulundurmalısınız. Bu düşünce şekli, sizin görsel seviyenizin, farklı kullanıcıların ekranlarına yansımasına yardımcı olacaktır.

Çevrimiçi projeleriniz için, başlık, gövde ve bold stilleri gibi temel elemanları kullandığınızdan emin olun. Her biri HTML'de tanımlanabiliyor.

• Title(title): Web kullanıcıları için dosyanın başlığını tanımlar.
• Gövde (body): Bir belgedeki gövde metinini tanımlar.
• Başlıklar (headers, h1-h6): Farklı katmanlardaki başlık türlerini tanımlar. H1 genellikle en büyük ve en önemli başlığı tanımlar ve önem sıralaması h6'ya kadar düşerek devam eder.
• Bold (strong): Daha kalın ve daha önemli metinleri ifade eder.
• İtalik (em): Eğimli metinleri ifade eder, vurgulamak için kullanılır.

Üzerine düşünmediğiniz halde web sitenizde tipografik hiyerarşiyi kullanıyorsunuz. Fakat büyük resimde nasıl tipografilerin genel tasarımınızı geliştireceğini düşünmeniz gerekir.

Vurgulamak için, dikkat çekmek için ve kullanıcıların daha hızlı tepki verebilmeleri için eylem elemanlarında tipografik hiyerarşiyi kullanın. Metininizde farklı fontlar, boyutlar, renkler ve efektler kullanırken okunaklı olup olmadığını sürekli kontrol etmelisiniz.

Web Sitenizi Okunaklı Yapın

Çevrimiçi girişimlerin web sitelerinin bir çoğu çok okunaksız. Bu tip web tasarımı amacının iletişim kurmak olduğunu düşününce, bu çok korkunç bir durum.

Web sitesinde okunaklılığın öneminden daha önce bahsetmiştik. Aslında okunaklılık yakalaması çok kolay bir şey. Yalnızca biraz uğraşmanız ve dikkatinizi vermeniz gerekiyor.

Neden Bu Kadar Çok Sorun Var?

Çoğu tasarımcı okunaklılığa gerektiği kadar önem vermiyor. Bunun sebebi, çok da eski olmayan bir zamana kadar web sitelerinde bu eski tasarım modelleri gayet iyi çalışıyordu. Ancak şu an bu çok mümkün değil.

Web site tasarımlarının eski halinde, header, navigasyon barları, footerlar, linkler ve reklamlar gibi elementlerin düzgün çalışması o web sitesi için yeterliydi. İçerikler de genellikle arka plana atılırdı

Yeni tasarım metodlarında bu elementleri değiştirmek ve düzeltmek çok kolaylaştı. Yani tasarımcılar artık web sitelerinin gerçek amacına odaklanabilirler: İçerik.

Web sitenizi tasarlarken, içeriğe öncelik vermelisiniz. Bu, sona bırakılacak bir iş olmamalı. Düşünce şeklinizi bu şekilde değiştirirseniz, bu yazı sizi okunaklı web siteleri yapmanız için yönlendirebilir.

Font Boyutunuzu Özenle Seçin

Font boyutu bir tasarımın okunaklılığı için çok önemli. Büyük bir font genellikle “bana bakın” izlenimi verir ve bu önemli yazılarınız için çok kullanışlı bir seçim olabilir. Küçük boyutlu fontlarınızı ise, çok önemli bilgiler içermeyen yazılarınız için kullanabilirsiniz.

Font boyutu aynı zamanda bir sayfada bölümleri ayırmak için de kullanılabilir. Örneğin, sayfa başlğı için dev bir manşet, daha sonra normal içerikten biraz daha büyük alt başlıklar. Bir sayfa - veya bütün web siteniz - için en fazla 3 farklı font boyutu kullanmalısınız. Daha fazlasını kullanmak için bahaneleriniz olabilir, ancak bu çok katı ve genel bir kuraldır. Bu kural yalnızca web sayfanızın gövdesi için geçerli, reklamlar vb. ek içerikler için geçerli değil.

Neden Serif Veya Sans Serif Kullanmalısınız?

Serif fontları, yüzlerce yıldır kullanılan, geleneksel bir yazı tipidir. Web sitenizde eski moda ve karmaşık görünebilir.

Bu yazı tipinin çıkıntıları, gözü bir sonraki harfe hazırlayacak şekildedir ama bu yalnızca yüksek çözünürlükte çalışır. Düşük çözünürlüklerde, bu ekler yazınızı daha kirli gösterebilir.

Sans Serif daha okunaklıdır. Bu yüzden gövde yazılarınız için bunu kullanmanız daha iyi olabilir.

Literatürde “çıkıntısız” anlamında gelir. Bu font Serif'e göre daha sade duracaktır. Bu yüzden de düşük çözünürlüklerde daha iyi çalışır.

Bu tip fontların en okunaklı olanları, harfler arasında boşluklar olanlarıdır. Gövde yazılarınızda kullacabileceğiniz bir çok sans serif fontu var. Düşük çözünürlüklerde de maksimum okunaklılık sağlayan, geniş yazı tiplerini tercih edin.

Sadece İhtiyacınız Olan Fontları Kullanın

Fontlar web sitenizin tasarımına bir duruş verir. Onlarca farklı fontu bir arada kullanmak ziyaretçilerinizin kafasını karıştırabilir ve oldukça şizofrenik görünebilir. Bir iki tane font seçin ve yalnızca onları kullanın. Ayrıca bu kadar farklı fontu bir arada kullanmak güzel de durmayacaktır. Bir sayfada 3ten fazla farklı font kullanmamaya çalışın.

Belirli Sözcüklere Dikkat Çekin

Yazı tiplerini değiştirmeden önce belirli kelimeleri veya elemanları vurgulayın. İtalik yapın, kalınlaştırın veya altını çizin ama bu tip elemanları fazla kullanmak da isteğinizin dışına çıkmanıza sebep olabilir ve okuyucuyu rahatsız edebilir. Örneğin bir kısım yazının tamamını italik yapmayın bu yazınızın geneline de zarar verir. Eğer bütün bir bölüme dikkat çekmek istiyorsanız, arka planı farklı renk yapabilirsiniz.

Web Sayfanızın Daha Okunaklı Olması İçin;

• Basit, süslü olmayan kelimeler kullanın. Havalı ve uydurma sözlerden kaçının.
• Kısa cümleler kullanın. Lafı dolandırmayın.
• Olabildiğince aynı dili kullanarak yazın.

Okunaklılığı arttırmak başlarda sizi biraz zorlayabilir. Ancak bir kere düzeltmeler yapmaya başladığınızda, siz de farkı göreceksiniz.

Paylaş Facebook Twitter E-Mail Whatsapp