Editörün notu: Bu konuk gönderisi, kod oluşturma sanatını seven bir UX yazılım mühendisi ve web tasarımcısı olan Abbey Fitzgerald tarafından yazılmıştır.

Tipografi, yaptığınız herhangi bir web tasarım çalışmasında temel bir unsurdur. Müşterilerimiz için web siteleri tasarlamakla görevlendirilmemizin nedeni, kullanıcılarına faydalı içerik sağlayan bir deneyim sunabilmeleridir. Sağlam bir tipografik temele sahip olmak, içeriği kullanıcıların etkin bir şekilde tüketebilecekleri şekilde görüntülemeye yardımcı olacaktır. Bir web sitesinde başka pek çok tasarım öğesi olsa da, içerik ana düşüncedir ve tasarımcılar olarak, tipografi seçimimiz ve kullanımımızla projeleri geliştirmek bizim işimiz.

Tipografi Temelleri

Yazı Tipi ve Yazı Tipi

Tipografi tartışmasına fazla girmeden önce, "yazı tipi" ve "yazı tipi" terimlerinin üzerinden geçelim. Bir yazı tipi, tipografik semboller ve karakterler kümesini ifade eder: harfler, sayılar ve web sitemize kelimeler koymamıza izin veren tüm karakterler. Alfabenin tasarımı, temelde o stili oluşturan harflerin şeklidir. Helvetica'dan bahsettiğimizde, bir yazı tipinden bahsediyoruz.

Yazı tipi, genellikle belirli bir boyut ve stile atıfta bulunan, yazı tipi içindeki tam karakter kümesi olarak tanımlanır. Helvetica Bold 10 punto, bir yazı tipine başvurmanın bir yoludur. Yazı tipleri, yazı tipi içindeki tüm karakterleri ve glifleri içeren dosyalara özeldir.

Bu harika tartışma, "yazı tipine karşı yazı tipi", diğer tasarımcılarla harika bir sohbet ortamı sağlıyor. Oradaki tüm yazım yapışkanları için, gerçekten yazı karakterlerinden bahsediyoruz, ancak "web yazı tipleri" en çok sohbette kullanılır.

Yazı Tipi Sınıflandırması

Dünyada mevcut birçok yazı tipiyle karşılaştığınızda, bunların nasıl sınıflandırıldığına aşina olmanız gerekecektir. En yaygın yol, onları teknik stile göre sınıflandırmaktır: serif, sans-serif, yazı, ekran, vb. Yazı biçimleri ayrıca orantılı veya tek aralıklı gibi diğer özelliklere göre de sınıflandırılır. Kaynağa bağlı olarak, çok spesifik olabilirler.

Web-Güvenli Tipografinin Tarihçesi

Web'in ilk günlerinde, çok sınırlayıcı olan web güvenli seçeneklere takılıp kalmıştık. Bir kullanıcının tasarımcı tarafından amaçlanan yazı tipini görebilmesi için, bilgisayarlarında mevcut olması gerekiyordu. Daha eski bir siteden bir stil sayfası açarsanız, muhtemelen Arial, Georgia, Times New Roman, Trebuchet MS ve/veya Verdana'yı bulacaksınız. Bunlar büyük olasılıkla bir kullanıcının makinesinde bulunan yazı tipleriydi, bu nedenle kullanıcıların çoğu web sitesini istendiği gibi görüntüleyebildiği için "web uyumlu" olarak kabul edildiler.

Bir süredir web siteleri tasarlıyorsanız veya uzun süredir internette geziniyorsanız, tipografi seçeneklerinin sınırlı olduğu günleri muhtemelen hatırlıyorsunuzdur. İnternette gezinirken aynı beş yazı tipini tekrar tekrar görmemiz çok uzun zaman önce değildi. Başka hiçbir web güvenliği seçeneği olmadığında işler sıkıcı görünmeye başladı ve bu yazı karakterlerinin web için en uygun olmadığı iddia edilebilir (sonuçta, bunlar baskıdan kaynaklanmıştır). Ancak web geliştikçe daha fazla yazı seçeneği kullanılabilir hale geldi.

Web Yazı Tipleri nedir?

Tipografi çok önemli olduğu için, büyük adımlar atıldığını kutlamanın zamanı geldi. Elimizde o kadar çok yazı tipi var ki, bir zamanlar sınırlı olduğumuz aynı eski web uyumlu yazı tiplerine güvenmek yerine artık kullanıcılarımız için en iyi olanı seçebiliyoruz.
Web yazı tipleri, web uyumlu yazı tipleri gibi kullanıcının sistemine önceden yüklenmez. Kullanıcının makinesinde istenen yazı tipine sahip olduğuna güvenmek zorunda değiliz. Dahil edilen bir kaynaktan gelirler, böylece her kullanıcı tanımlanan yazı tipini görebilir. Bu yazı tipleri, web sayfası oluşturulurken tarayıcı tarafından indirilir ve ardından metne uygulanır.

Web Yazı Tipleri Nasıl Kullanılır?

@font-face kuralı

Yaygın olarak desteklenen bu kural, yazı tiplerini bir sunucudan indirmemize veya onları web sayfalarımızda kullanabilmemiz için barındırmamıza izin verir. Stil sayfamızda @font-face kuralını bildirerek, yazı tipinin adını, yerini ve yazı tipi ağırlığını belirtebiliriz.

Bu örnek, Open Sans Regular'ı nasıl eklediğimizi gösterir. Kaynağın, web sitesi projesine dahil olan bir yazı tipi klasörü olduğunu göreceksiniz.

 [css]

@yazı tipi-yüz {
font-family: 'Normal Olmadan Aç';
src: url("../fonts/OpenSans-Regular-webfont.eot");
yazı tipi ağırlığı: normal;
yazı tipi stili: normal;
}

[/css]

Yukarıdaki bildirim yazı tipini kullanılabilecek şekilde ekler. Bunu gerçekten göstermesini nasıl sağlayabiliriz?

 [css]

.örnek{
yazı tipi ailesi: "Normal Olmadan Aç", Arial, sans-serif;

}

[/css]

Yazı tipinin adının “Open Sans Regular” olarak ayarlandığını görebilirsiniz. Bu, herhangi bir nedenle yazı tipinin yüklenmemesi durumunda yedek yazı tipleriyle birlikte CSS yazı tipi yığınımızda başvurulacak yazı tipi adıdır. Çoğu durumda, yazı tipi gayet iyi yüklenir, ancak her ihtimale karşı yedekleri dahil etmek iyi bir fikirdir.

Çoğu yazı tipinin başka aileleri olduğunu, bazılarının diğerlerinden daha fazla olduğunu unutmayın. Bunları kullanmak için, her birine @font-face kuralı eklediğinizden emin olun.

Biçimler ve Web Yazı Tipleri

İhtiyaç duyacağınız birden fazla format varken, web yazı tiplerine biraz daha derine inelim. Bu yazı tipleri şirket içinde barındırılır ve sunucuda "yazı tipleri" adı verilen bir klasörde saklanır. Son örnekten eklenen birkaç yeni satır olduğunu fark edeceksiniz.

 [css]

@yazı tipi-yüz {
font-family: 'Normal Olmadan Aç';
src: url("../fonts/OpenSans-Regular-webfont.eot");
src: url("../fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"),
url("../fonts/OpenSans-Regular-webfont.woff") format("woff"),
url("../fonts/OpenSans-Regular-webfont.ttf") format("truetype"), url(" ../fonts/OpenSans-Regular-webfont.svg#open_sansregular") format("svg");
yazı tipi ağırlığı: normal;
yazı tipi stili: normal;
}

[/css]

.eot, .woff, .ttf, .truetype ve SVG gibi farklı biçimleri dahil etmemizin bir nedeni var. Farklı tarayıcılar farklı yazı tipi biçimlerini destekler, bu nedenle temellerimizi ele almalı ve çeşitli tarayıcıların ihtiyaç duyabileceği her şeyi sağlamalıyız.

Tarayıcıların listesi ve destekledikleri yazı tipi dosyası türleri aşağıda verilmiştir:

• Internet Explorer – .eot
• Mozilla Firefox – .otf ve .ttf
• Safari ve Opera – .otf, .ttf ve .svg
• Chrome – .ttf ve .svg
• Mobil Safari – .svg

Yazı Tipi Barındırma

Web yazı tiplerini kullanırken, stil sayfasının tasarımınızda işlenebilmesi için yazı tipinin kendisine ihtiyacı vardır. Bu nedenle font dosyalarının bir yerde barındırılması gerekecektir. Yazı tiplerinizi nereye yerleştireceğiniz konusunda iki seçenek vardır. Sizin için yazı tiplerini barındıran bir hizmet kullanabilir veya gerçek yazı tipi dosyalarıyla kendiniz barındırabilirsiniz. Gerçekten projeye bağlı, her birinin kendi avantajı var.

Hangi yaklaşımı benimsediğinize bağlı olarak, bu ister kendi kendine barındırılıyor ister Typekit gibi bir yazı tipi hizmetiyle barındırılıyor olsun, CSS farklı görünecektir. Adı gibi kitler de Typekit ile oluşturulur. Bunlar, kullanacağınız tüm yazı tiplerini içerir. Bu dosyalara başvurmak için HTML belgenizin başına bir Javascript parçacığı ekleyeceksiniz. Bu, doğru @font-face kurallarını yüklemenizi sağlar.

Barındırma Hizmet Sağlayıcıları

Bahsetmek için çok fazla barındırma hizmeti sağlayıcısı var ama TypeKit, Fonts.com, H&Co (Hoefler ve Company) birkaç seçenek. Temel olarak, yazı tipleri sunucularında bulunur ve sahip olduğunuz hesabın türüne göre bunları kullanmakta özgürsünüz.

Bu yaklaşımın bazı avantajları şunlardır:

• Genellikle bu sağlayıcılar, tipografi işinde oldukları için daha geniş bir yüksek kaliteli yazı tipi yelpazesine sahiptir.
• Yazı tiplerinin kullanımı/yüklenmesi kolaydır.
• Tasarım sürecinde yazı tiplerini değiştirmek veya genel bir değişiklik yapmak kolaydır.
• Üçüncü taraf dosyaları oldukları için kullanıcılar tarafından kolayca önbelleğe alınırlar.
• Daha az HTTP isteği daha iyi performans sağlar

Yeni yazı tiplerini sitenize eklemek oldukça kolaydır. Örneğin Fonts.com, premium plan üyelikleriyle üç farklı yayınlama seçeneği sunar. Sunulan bir stil sayfasına ve ayrıca kendi kendine barındırılan bir seçeneğe bağlanan hem javascript (Typekit ile birlikte) hem de javascript olmayan seçenekler vardır. Neyi seçtiğinize bağlı olarak, CSS'niz farklı görünecektir.

Kullanım hususları

Barındırılan yazı tipleriyle daha az, daha çok olabilir. Çok fazla kullanmamak önemlidir, aksi halde performans sorunları olabilir. Aynı yazı tipinin birden fazla ağırlığı ek bir küme olarak kabul edilir, bu nedenle aslında başka bir yazı tipi yüklüyorsunuz. Yalnızca ihtiyacınız olanı dahil etmek iyi bir uygulamadır.

kendi kendine barındırma

Web yazı tiplerini kendi kendine barındırmak oldukça kolaydır. Tek yapmanız gereken yazı tipi dosyasını web sunucunuza eklemek ve bir kullanıcı sitenize geldiğinde otomatik olarak indirilecektir.

Kendi kendine barındırmanın bazı faydaları şunlardır:

• Yazı tipi teslimi için javascript bağımlılığı yok, ihtiyacınız olan tek şey CSS referansları.
• Hızlı yazı tipi oluşturma.
• Yazı tipi barındırma sağlayıcısının çalışma süresine bağımlılık yok.
• Ücretsiz ve satın alınan yazı tipleri ile abonelik ücretleri veya sayfa görüntüleme sınırlamaları olmaz.

Kullanım hususları

Gerekli tüm biçimlere sahip olduğunuzdan emin olmanız önemlidir. Bir format dahil değilse, bir sonraki yedek yazı tipine gider. Kaynak için yazı tipine giden doğru yola sahip olduğunuzdan emin olmak önemlidir. Önceki bir örnekte gördüğümüz gibi, kaynak şuna benzer:

 [kod]

src: url("../fonts/OpenSans-Regular-webfont.eot");

[/kod] 

İyi Web Yazı Tipleri Nerede Bulunur?

Aralarından seçim yapabileceğiniz pek çok web yazı tipi var; tüm bu seçeneklere sahip olduğumuz için çok şanslıyız. Mükemmel yazı tipini bulmak hiç olmadığı kadar kolay.

İşte web yazı tipleri için bazı harika kaynaklar:

• Daktilo
• Google Web Yazı Tipleri
• Hoefler ve Şirketi
• Fonts.com
• Yazı Tipi Sincap

Kendi web yazı tipinizi oluşturun

Şans eseri, mükemmel yazı tipini bulamazsanız, her zaman kendi yazı tipinizi oluşturabilirsiniz. Font Squirrel, herhangi bir fontu gömmek için bir web dosyaları kitine dönüştürecek bir web font oluşturucu sağlar. Bunları barındırmanız gerekeceğini unutmayın. Daha fazlasını öğrenmek için Font Squirrel web yazı tipi oluşturucuya göz atın. Bir uyarı, kendi yazı tipinizi oluştururken, o yazı tipini kullanma haklarına sahip olmanız önemlidir.

Web yazı tipleri, bir sonraki web projenize mükemmel yazı tipini eklemenin harika bir yoludur. Çok çeşitli yazı tipi seçenekleri ve çok sayıda harika kaynakla, artık geleneksel web uyumlu seçeneklere takılıp kalmayacaksınız. Kullanımı kolay ve denemesi eğlenceli olan web yazı tipleri, web sitesi projelerinize kişilik katmanın harika bir yoludur.