Simge Yazı Tipi Nedir? (Ve Nasıl Kullanılır)

Simge yazı tipleri, yaygın bir CSS sorununa popüler bir çözümdür; web simgelerini web sitenizin tasarımına verimli ve hızlı bir şekilde nasıl ekleyeceğinizi öğrenin.

Bir simge yazı tipini seçmeyi ve kullanmayı kolaylaştıran birçok hizmet sayesinde, sıfırdan kendinizinkini oluşturmanız gerekmez. Simge yazı tipleri internetin her yerinde.

Peki bir simge yazı tipi tam olarak nedir? Ve onları nasıl kullanıyorsunuz? Simge yazı tipleri hakkında bilmeniz gereken her şey için bir kılavuz.

Yazı Tiplerini Keşfedin

Simge Yazı Tipi Nedir?

Simge yazı tipleri, harf formları yerine küçük resimler kullanan yazı tipleridir. Tür gibi, her karakter ölçeklenebilir ve CSS kullanılarak değiştirilebilir.

Bir simge yazı tipi kullanmanın ana nedenleri, boyutu, rengi, şekli kolayca değiştirebilmenizdir. Simge yazı tipleri doğaya göre saydamdır, böylece bunları herhangi bir renk veya arka plan türüne koyabilir ve konturlar ekleyebilir veya simgelerin opaklığını değiştirebilirsiniz.

Her şey CSS ile yapılır, böylece tasarımdaki bir simgenin her yeni örneği için benzersiz görüntüler oluşturmanız gerekmez. (Bu, web sitenizi ve kodunuzu hafif tutmak için mükemmeldir.)

Simge yazı tipleri vektör görüntülerdir, yani ölçeklenebilir. Diğer yazı tiplerinde olduğu gibi, bunları istediğiniz kadar büyük veya küçük yapabilirsiniz. Simge yazı tiplerini tek başına sanat öğeleri olarak kullanın veya hatta diğer metin alanlarına dağılın.

Simge yazı tiplerinin en popüler ve en iyi bilinen kitaplığı Font Awesome'dir. 100 milyondan fazla web sitesi için kullanılır ve sağlam bir simge seçenekleri koleksiyonu içerir. Web Fonts + CSS, SVG + JS, Sketch, Adobe Apps, Vue.js, Angular, React ve Ember dahil olmak üzere tüm popüler araçlarla çalışır.

Oldukça iyi bilinen birkaç yazı tipi simge seti de var.

• Flaticon
• Icofont
• Fontello
• IcoMoon

Simge Fontlarını Kullanmanın Artıları ve Eksileri

Öyleyse neden bir simge yazı tipi kullanıyorsunuz - ya da kaçıyorsunuz? İşte bu sanat unsuruyla çalışmanın artıları ve eksileri.

Simge Fontlarını Kullanmanın Artıları

• CSS'nizde uygun sınıflar bulunduğu sürece simgelerin ölçeklendirilmesi kolaydır
• Çok az sorunla büyük ikon kütüphaneleri alabilirsiniz
• Web sitenizi oluşturmak için ne kullandığınızdan bağımsız olarak simge özelliklerini değiştirmek kolaydır
• Web sitesindeki herhangi bir sayfaya simge eklemek kolaydır (sadece simge adını ekleyin)
• Her türlü stilde seçebileceğiniz binlerce simge var
• WordPress kullanıcıları basit bir eklentiyle simge yazı tiplerini ekleyebilir veya yazı tipi dizinini koda yazarak (neredeyse her arabirim)
• Süper özel bir şeye ihtiyacınız varsa kendi simge yazı tipinizi oluşturabilirsiniz

Simge Fontlarını Kullanmanın Eksileri

• Simgeler tek bir renk veya renk gradyanıdır (çoğu durumda); daha fazla premium paket bunu değiştiriyor
• Simge yazı tipi yüklenmezse iyi bir geri dönüş yok
• Tam bir simge setine ihtiyacınız olmayabilir
• Bazı ekran okuyucular simge yazı tipleriyle ne yapılacağını bilmiyor
• İhtiyaçlarınıza uyan bir paket bulamayabilirsiniz

Simge Fontları Nasıl Kullanılır

Simge yazı tiplerini kullanma talimatları seçtiğiniz sağlayıcıya bağlı olarak biraz değişse de, temel fikir aynıdır.

Genel olarak üç seçeneğiniz vardır (kendiniz biraz daha kodlama yapmayı planlamıyorsanız):

• Her şeyi yükleyen bir eklenti kullanın, böylece yalnızca kullanmak istediğiniz simgeleri çağırmanız gerekir. (Çok kolay!)
• CMS veya web sitesi oluşturucunuzdaki yerleşik yazı tipi simgelerini kullanın. Özel bir siteniz yoksa veya belirli bir yazı tipi simgesine ihtiyacınız varsa / istiyorsanız bu harika çalışır. Çoğu web sitesi kurucusu “kutudan çıkmış” bir şeyle gelir.
• Harici olarak barındırılan bir simge yazı tipine el ile bağlantı kurun. (Eklenti kullanmanın daha karmaşık versiyonu.)

Simge Yazı Tipleri ve SVG'ler

Daha büyük tartışmalar, web sitenize küçük resimler eklemek amacıyla SVG resimlerine karşı bir simge yazı tipi kullanmanız gerekip gerekmediğine (veya isteyip istemediğinize) kayıyor. Her iki seçenek de eşit derecede geçerlidir ve kişisel tercihlerle ilgisi vardır.

Simge yazı tipleri çoğu insanın bulması ve kullanması için genellikle daha kolaydır. SVG simgeleri, daha fazla tasarım denetimine ihtiyaç duyan kullanıcılar tarafından tercih edilir.

Bir SVG (ölçeklenebilir vektör biçimi) dosyası size tasarımda biraz daha esneklik verebilir. (Bir renkle sınırlı değilsiniz). Küçük, ölçeklenebilir dosyalar doğrudan medya dizininize yüklenebilir ve kolayca kullanılabilir. Bu, yalnızca bir avuç simgeye ihtiyacınız varsa ve bir kütüphane ile uğraşmak istemiyorsanız iyi bir seçenektir.

SVG'ler, daha fazla renk ve animasyon ekleme özelliği ile daha esnektir.

Simge yazı tipleri, önbellekte bulundukları için uzun vadede daha hızlı yükleniyor olabilir. Ancak fark oldukça az olabilir.

Simge yazı tiplerini konumlandırma, boyut, satır aralığı ve dikey hizalamalar gibi tipik yazı tipi kurallarına tabi olduklarından biraz zor olabilir. Bu yüzden tek başına bir simge yazı tipi kullanan çoğu kişi, kendi oluşturmaya çalışmak yerine yerleşik bir sağlayıcı seçer.

SVG'ler, ekran okuyucularına harf karakterleri olarak gelebilecek simge fontlarından daha erişilebilir olmasını sağlayan öğeler içerebilir.

Simge yazı tipleri çoğu insanın bulması ve kullanması için genellikle daha kolaydır. Kütüphaneler genellikle mevcuttur ve anlaşılması zor değildir. SVG simgeleri, daha fazla tasarım kontrolü ve özelleştirme seçeneği isteyen kullanıcılar tarafından tercih edilir.

Her iki seçenek de yaygın olarak kullanılır ve çoğu durumda iyi çalışır. Birini seçmek, en rahat olduğunuz şeyle ve tasarım estetiğinizle ve kullanıcı arayüzünüzle eşleşenlerle çok ilgilidir.

Sonuç

Simge yazı tiplerinin bu kadar popüler olmasının bir nedeni, çok yönlü ve kullanımı kolaydır. Çoğu içerik yönetim sistemine çift tıklamayla yüklenebilen ölçeklenebilir bir format sayesinde, neredeyse herkes simgeler yazı tiplerini hızlı bir şekilde kullanmaya başlayabilir.

Bir simge yazı tipinin gerçek yararı, öğenin CSS kullanması ve bağımsız bir görüntü dosyası olmamasıdır. Bu, hızlı ve vektör formatında yüklenen öğeler içeren yalın bir web sitesi oluşturmak için iyidir (daha sonra boyutu değiştirmeniz gerekirse harika).