Web tasarımı, günümüzün web sayfalarının geniş çaplı kullanım alanına girdi. Bu noktadan önce, mühendislerden daha az tasarımcı olduğumuz tartışılabilir.
Ancak, web tasarımında font seçeneklerinden yakaladığımız coşku, şaşırtıcı bir dizi seçeneğe yol açtı; Öyle ki, pek çok tasarımcı, en az direnç yolunu seçiyor ve basit uygulama isteğinin tipografisini dikte etmesine izin veriyor.
Aradığınızı biliyorsanız, tüm seçenekler basit. Bu yazıda, yazı tipi teknolojisi arasında seçim yaparken bilinçli kararlar vermeniz için gereken bilgileri size vereceğiz.
Bu seçenekleri, tüm zamanların klasik yazı biçimi olan Garamond'u sunmanın en iyi yoluna odaklanarak göstereceğiz.
Web fontlarının erdemlerini övünerek, göz önünde bulunduracağımız ilk seçenek hiçbir web sayfası içermez. Yazı tipi istifleme, ilk tercihinizle başlayıp tüm yakalama çözümüyle biten bazı geri dönüşler belirttiğiniz bir CSS tekniğidir.
Çevrimiçi olarak çok sayıda yazı tipi yığın kaynağı var, ancak favorilerimden biri cssfontstack.com, Bir yazı tipi yığını için harika bir başlangıç noktasıdır, ancak daha sık olmamak için bazı uzmanlıkları ayırabilmeniz gerektiğinin farkında olun.
Cssfontstack.com'a göre Garamond, Mac'lerin% 49.91'inde ve Windows makinelerinin% 86.47'sinde sistem yazı tipi olarak mevcuttur. Oldukça iyi, ama yeterince iyi değil. İşte tüm tabanları kapsayan önerilen yazı tipi yığını:
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;Soru şu, bunu nasıl geliştirebiliriz?
Garamond'un çok sayıda versiyonunun mevcut olduğunu biliyoruz, bu yüzden ikinci slottaki bir varyasyonu küçük bir uzlaşma olarak ekleyebiliriz.
İkinci olarak, Baskerville veya Times'ın Garamond için yeterli ikame olduğunu kabul etmiyorum, o yüzden onları bırakalım. Hoefler Text, Garamond'un yerinde iyi çalışır, böylece kalabilir. Serif'i son yakalama olarak eklemeliyiz, ancak çoğu sistem Times'ı varsayılan serif olarak kullandıkça, en üst Gürcistan'da çatlaklardan kaybolan herkes için yer açalım.
Son değiştirilmiş yazı tipi dizgimiz şu şekilde görünüyor:
font-family: Garamond, "Adobe Garamond Pro", "Hoefler Text", Georgia, serif;İzleyicilerin çoğunluğu Garamond'u görecek, birkaç kişi makul bir uzlaşma görecek ve küçük bir azınlık onların varsayılan serif yazı tipini alacaktır.
Yazı tipi istifleme ücretsizdir, en hızlı çözümdür ve seçtiğiniz yazı tipine bağlı olarak çok etkili olabilir; Garamond söz konusu olduğunda, bu 'işi bitti' demek için iyi bir argüman var.
Bununla birlikte, özellikle Garamond gibi bir yazı tipi ile yazı tipi yığınlamada önemli bir sorun var: dolaşımda o kadar çok korsan versiyonu var ki, kullanıcının sistemindeki hangi yazı tipinin “Garamond” olduğunu bilmesi imkansız. Tasarım beklentilerimizle uyumludur, fontun ölçeği tasarımımızdaki versiyondan tamamen farklı olabilir. (Teknik olarak, Arial'in bir kopyasının “Garamond” olarak değiştirilmesini engelleyen hiçbir şey yoktur; bu durumda font dizgimiz bunu kullanır.)
Yazı tipi istifleme bu nedenle mükemmel bir yedeklemedir ve aşağıdaki tüm çözümlerle birlikte kullanım için düşünülmelidir, ancak birincil çözüm olarak ideal olandan daha azdır.
Google Yazı Tipleri Pek çok tasarımcı için aramalarını bitirdikleri noktadır. Toplam 0 $ 'lık toplamda, web sayfalarını CSS kullanarak sitenize kolayca yükleyebilirsiniz.
Tek dezavantajı, teklif edilen yazı tipi sayısının son derece sınırlı olmasıdır. Roboto ve PT Sans gibi yazı karakterleri, popülerliklerini tasarım özelliklerine göre Google Yazı Tipleri üzerindeki ücretsiz kullanılabilirliklerine borçludur.
Şu anda, Google Yazı Tipleri’nde bulunan Garamond’un tek varyasyonu EB Garamond, Garamond yazı kaynağını açmak için bir girişim. Ancak bu versiyondaki kusur, sadece bir ağırlık ve stilin mevcut olması; kalın ya da italik yok. Tasarımcı Georg Duffner cömertçe çalışmalarını devam ettirdi. Bitbucket ama üretim hazır değil.
Google Yazı Tipleri büyük bir bütçe çözümü ve müşterinizden ziyade faturaya dayanabileceğiniz durumlar için idealdir. Yazı tiplerinizi CSS'de belirtmek, olabildiğince basittir.
Google Yazı Tipleri'ndeki büyük kusur, pazarlamasına rağmen çok az seçenek var. Open Sans'ın bir webfont'unu arıyorsanız, doğru yerdesiniz, ancak Garamond gibi bir font istiyorsanız - ki bu hiç de karanlık bir şey değil - bu bir yıkamadır.
Kendini barındırma, web sayfalarına büyük ölçüde karşı konulmaz bir yaklaşımdır. Onun önemli cazibe fontları alt etmek için yeteneği, neredeyse tüm akarsu hizmetleri taklit girişiminde bu kadar cazip bir seçenek.
Sisteminizde Garamond'un bir masaüstü kopyasına sahipseniz, onu açın ve çok sayıda karakter göreceksiniz. Bir yazı tipini alt etmek, daha küçük bir dosya boyutu ve daha hızlı dağıtımıyla sonuçlanan temel olmayan karakterleri silme işlemidir.
Elbette, ihtiyacınız olan karakterler, kurduğunuz siteye bağlı olacaktır: Eğer Dubrovnik'e turist rehberi kurarsanız, muhtemelen Sırp Kiril karakterlerine ihtiyacınız olacaktır; Shakespeare'in toplanan eserlerini yeniden üretiyorsanız, bir @ sembolüne ihtiyacınız yoktur.
Bir yazı tipini alt etmek için yazı tipi düzenleme yazılımına ihtiyacınız olacak. Ücretsiz olarak birçok seçenek mevcut FontForge prim için FontLab Studio. Yazı tipinin bir alt kümesini oluşturmak için, istemediğiniz bir glifi seçip silin ve dosyayı proje klasörünüze kaydedin. (Orijinal yazı tipi dosyanızın üzerine yazmamaya dikkat edin!)
Adobe Garamond Pro için tam .ttf dosyası 606Kb'dir. Temel latin karakterlere ve noktalama işaretlerine kadar sıyırma, onu 56 Kb'ye düşürür. Birkaç ağırlık ve stil arasında çarparak, kullanıcılarınız için indirmelerde birkaç Mb tasarruf edin.
Yüklediğiniz yazı tipi dosyalarının çoğu, OpenType (.otf) 'un bir smatteringiyle TrueType (.ttf) olacaktır. Bunları sunucunuza kaydedebilir ve bunları CSS’de belirtebilirsiniz.
IE (hatta en yeni sürüm) ve bazı mobil tarayıcılar (iOS Safari'nin eski sürümleri dahil) haricinde tüm modern tarayıcılarda .ttf ve .otf dosya formatları desteği yaygındır.
Kapsamınızı artırmak için birkaç ek biçime ihtiyacınız olacak. .eot, IE için çalışır. En tarayıcılar için çalışır ve W3C'nin tercih edilen biçimidir, .svg eski tarayıcılarda çalışır. Bu formatları sizin için .ttf dosyanızdan oluşturacak bir dizi web hizmeti var. Yazı tipi sincap.
Çevrimiçi kullanım için masaüstü yazı tiplerini dönüştürmenin dezavantajı iki yönlüdür: birincisi, bunu yapmak için kesinlikle lisanslı değilsiniz; ve ikinci olarak, masaüstü yazı tipleri neredeyse her zaman baskı için optimize edilmiştir, sadece ekranda iyi işlemezler.
Font dökümhaneleri sonunda web fontları için büyük bir pazar olduğu gerçeğine uyandı. Sonuç olarak, lisanslarını sadece sıkılaştırmakla kalmadı, aynı zamanda ekranlar için geri kataloglarını optimize etmeye çalışıyorlar.
Adanmış web sayfalarını temin eden dökümhaneler, gerekli tüm formatları sağlar, kalite kontrolünden geçirilir ve sunucunuza yüklenmeye hazırdır. Dahası, bir dosyayı alt etmekte hâlâ özgürsünüz ve üçüncü taraf bir sunucunun çalışma zamanına bağlı değilsiniz.
Web fontlarını satın alabileceğiniz sayısız yer var, bu alandaki en önemli iki oyuncu FontShop.com ve MyFonts.com .
Garamond ayinlerine geri döndüğümüzde, MyFonts’un Garamond’un bir çok farklı versiyonuna sahip olduğunu görebiliriz. Biz lisans Adobe Garamond birkaç kiloda, yaklaşık 180.000 $ için 250.000 sayfa görüntülemesiyle sınırlı.
FontShop ayrıca Garamond'un bir dizi webfont versiyonuna da sahiptir. URW Garamond Web Her isteyebileceğimiz her ağırlık ve stili, ayda 500.000 sayfalık cömert bir görünümle sunuyoruz. Dahası, FontShop adanmış subsetter parlak yeni yazı tipi alımlarınızı optimize etmek için. Ne yazık ki tüm bu yazı için bir prim ödersiniz, tam font ailesi için yaklaşık 680 dolar.
Kendini barındırma altkümeyi mümkün kılar. Yazı tipi dağıtımınızın kontrolünde kalmanızı sağlar ve üçüncü taraf sunucularda her türlü bağımlılığı önler.
Dahası, profesyonel bir web sayfası satın alıyorsanız, kalitenin çok yüksek olmasını bekleyebilirsiniz.
Kendini ev sahipliği yapmak, onları kiralamak yerine yazı tiplerimizi “sahiplenmeyi” tercih edenlere de hitap ediyor. Elbette, yasal açıdan çok az sahiplik var, ama bir kerelik ücret, birçok kişi için bir abonelik daha rahat oturuyor.
Kendini ev sahipliği yapmanın tek dezavantajı, önemli bir bedeldir. Sadece yazı tipi için ödeme yapmanız gerekmeyecek, aynı zamanda rakamlarınızı barındırma ve bant genişliği maliyetlerini hesaba katmanız gerekebilir.
Google Yazı Tipleri gibi, webfont hizmetleri de basit CSS ile tarayıcılarımıza yazı tipleri sunar. Google Yazı Tiplerinden farklı olarak, aralarından seçim yapabileceğiniz çok büyük bir aralık var.
Aralarından seçim yapabileceğiniz bir dizi farklı satıcı var ve özellikle de Hoefler & Frere-Jones 'gibi. cloud.typography hizmet. Ancak, birçok küçük satıcıda olduğu gibi, bunların kullanışlılığı tamamen aradığınız yazı tipinin kullanılabilirliğine bağlıdır. Hoefler & Frere-Jones'un en yakın yazı kaynağı Hoefler Text'dir, ancak bir prim ödüyorsak, uzlaşma gerekmemelidir.
Webfont akışındaki en büyük oyuncu Adobe Typekit . Yazı tiplerinin kalitesi çok yüksek, uygulama basit ve en önemlisi seçim yapabileceğiniz devasa bir kataloğa sahip.
Typekit, ayda 50.000 görüntüleme için yılda 24,99 ABD dolarından aylık 1.000.000 görüntüleme için yıllık 99.99 $ 'a kadar bir dizi abonelik sunmaktadır. Ancak, bir Creative Cloud üyesiyseniz, aboneliğinize Portföy Planı dahil edilir; Çoğu web tasarımcıları için Typekit'in ücretsiz bir çözüm olduğu anlamına gelir.
Hızlı arama, Garamond'un da dahil olduğu birkaç versiyonun bulunduğunu gösteriyor. Adobe'nin kendi Typekit'te mevcut. Ayrıca, dosya boyutunu biraz küçültmemize olanak tanıyan çok sınırlı bir alt seviye özelliği de var.
Webfont akış hizmetleri, sitenize eklemek çok kolay olan, mükemmel kalitede fontların büyük bir çeşitliliğini sağlar.
Typekit örneğinde, zaten bir Creative Cloud üyesiseniz, ücretsiz erişim bunu daha da çekici bir seçenek haline getirir. Ancak, eğer üye değilseniz, önemli bir abonelik ödemekle kendinizi Adobe'ye bağlamak arasında bir seçenekle karşı karşıyasınız demektir.
Aktarım hizmetiyle ilgili esas endişem, tamamen bir üçüncü taraf sunucunun performansına bağlı olmanızdır. Sunucuları azalırsa, markanızın önemli bir parçası olur.
Pek çok şeyde olduğu gibi, cevap: projenize bağlıdır. Fakat Garamond testimize dayanarak yapabileceğimiz bazı kararlar var:
Yazı tipi yığınlaması, masrafsız bir yedeklemedir; font dosyaları kaybolduğunda veya akış hizmetlerinin yavaş çalışıp çalışmadığı durumlarda bir marka çözümü sağlar. Garamond'un potansiyel olarak tehlikeli olması gibi bir şey için bile, her zaman her yerde uygulanmalı, ancak buna dayanmalıdır.
Aradığınız yazı tipi Google Fonts üzerinden veya ücretsiz bir Creative Cloud aboneliğiniz varsa ücretsiz olarak yayınlanabilirse, bu iyi bir seçimdir. Bir Creative Cloud aboneliğime sahip olduğum için, bu rotaya cazip gelmekteyim, ancak gerçek altölçümün olmaması endişe kaynağı olurdu.
Bütçeye sahipseniz, profesyonel bir webfontu kendiniz barındırmak en iyi seçimdir. Nispeten mütevazi maliyet - stok fotoğrafçılığına kıyasla - büyük hız artışı alt bölümlerinin sunulmasıyla kolayca haklı çıkar.
Birkaç Kb'yi kaydetmek için JavaScript dosyalarını küçülttüğümüz bir sektörde, tek bir dosyadan yüzlerce kez tıraş yapmak hiç de kolay değil.
Öne çıkan görsel / küçük resim, görüntü indir Shutterstock üzerinden.