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.
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.
Ü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.
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 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.
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.
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.
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.
Eğer yukarıdaki örneklere bakarsanız, farklı tipografik hiyerarşi seviyelerini ve okunaklılığı nasıl değiştirdiğini fark edebilirsiniz.
Hiyerarşi yaratmanın farklı yolları mevcut.
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.
Ü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.
Ç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.
Ç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 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.
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.
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.
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;
Okunaklılığı arttırmak başlarda sizi biraz zorlayabilir. Ancak bir kere düzeltmeler yapmaya başladığınızda, siz de farkı göreceksiniz.
interAnaliz Yazılım Ltd. Şti. Tescilli Markasıdır.
©2014 / 2023
Her hakkı saklıdır.