İçerik
Gömülebilir web fontlarının, özellikle duyarlı web tasarımı çağında, başlangıcından bu yana web'deki tasarım için en büyük gelişmelerden biri olduğu konusunda hemfikir olabiliriz. Bir ekran boyutundan diğerine hareket eden ve değişen pek çok öğe ile harika tipografi ve farklı yazı biçimleri, her cihazda eşit derecede iyi çalışan tek sabitlerden biridir (Opera Mini tarayıcı kullanan cihazlar hariç).
Sadece web yazı tiplerini eklemek hikayenin sadece bir kısmı. Kelimelerin anlamı olabilir, ancak harflerin duyguları vardır. OpenType (OT), Adobe ve Microsoft tarafından geliştirilen bir çapraz platform yazı tipi dosyası formatıdır. Özellikleri, OT özellikli yazı tiplerinin karakter setlerini bitişik harfler, süslemeler, stil alternatifleri ve hatta gerçek karakter aralığı gibi tipografik zevkleri içerecek şekilde genişleterek daha fazla derinlik ve çeşitlilik katar. Tüm bu harika özellikleri keşfederek duygusal kelime dağarcığınızı genişletin; sadece yazı tipini bırakmanız için hiçbir sebep yok.
Bu eğiticinin özel bir ekran video kaydını izleyin:
Tüm bu tipografik güzellikler nelerdir? Yeni başlayanlar için bitişik harfler vardır (standart, isteğe bağlı ve bağlamsal çeşitler dahil). Bunlar, geçmişte çizildiğinde veya kesildiğinde birbirine karışma eğilimi gösteren ff, ffl, fi veya fj gibi karakter kombinasyonlarıdır. Teknik olarak, bu, f'nin "başlığı" küçük harf i veya j'nin "başlığı" ile birleştirildiği zamandır, ancak konuyu tartışırken düz durmanın nasıl zorlaştığını görebilirsiniz.
Kişisel favorilerimden biri, diğerleri arasında Adobe Caslon Pro'da görüldüğü gibi ct ve st için daha az yaygın olan bağdır. Ayrıca Fairbank'ta bulunanlar gibi süslemeler de var (Fonts.com'dan kullanımda gösteriliyor): iyi kullanıldığında gerçekten farklı bir karakter ekleyen hoş swooplar ve süslemeler.
Diğer ortak özellikler arasında, biçimsel alternatifler ve tablo şeklinde şekiller (eşit aralıklı ve mali tablolar için mükemmel), kesirler, eski stil rakamlar (hem büyük hem de küçük harflerle iyi uyacak şekilde yükselen ve altsoylu) ve tabii ki karakter aralığı dahil olmak üzere sayılar için çeşitli seçenekler bulunur. tablolar. (Tarayıcıların ekranda yazı tipi olarak oldukça orta düzeyde bir iş yapma eğiliminde olduğunu her zaman hissettiğimden, bu tek başına giriş ücretine değebilir.)
- Kendi projelerinizde deneyebileceğiniz birçok ipucu ve püf noktası içeren örnek bir sayfa indirin.
Biraz arka plan
Bu karakterler ve özellikler yüzyıllardır var oldu, ancak ancak son zamanlarda web'de kullanılabilir hale geldi. Ligatürler ilk olarak Sümer elyazmalarında ve daha sonraki birçok yazı ve kaligrafi biçiminde görüldü. Hareketli tipin gelişiyle birlikte, bitişik harfler, başka türlü ayrı tip bloklarının izin verdiğinden daha sıkı aralıklara izin vermek için harf aralığını iyileştirmek için kullanıldı. Bu özelliklerin çoğu, fotoğraf ve ardından bilgisayar tabanlı dizginin ortaya çıkmasıyla gözden düştü. Ancak son yıllarda daha iyi yazı tipi biçimleri onları yeniden kullanılabilir hale getirdi ve bunların kullanımı arttı.
OpenType'ın (veya daha doğrusu Açık Yazı Tipi Formatı) ve bunun türevi Web Açık Yazı Tipi Biçiminin (WOFF) gelişiyle, web'de kullanılmak üzere nihayet neredeyse evrensel olarak kullanılabilen bir çift yazı tipi biçimi var. Buradaki önemli nokta, bu formatların her zamankinden daha hassas tipografik kontrol için çok daha geniş bir karakter ve özellik dizisini desteklemesidir. Web ile ilgili her şeyde olduğu gibi, bu özelliklerin kullanımı tüm büyük tarayıcılarda çeşitli düzeylerde desteklenmektedir, ancak şu anda ciddi bir şekilde değerlendirilmeye ve kullanılmaya değecek kadar yaygındır.
Gereken CSS, birkaç yıldır kullanılıyor ve CSS3 tipi modülün bir parçası. Maalesef, WOFF formatı için yeterince geniş destek elde etme süreci yavaş ilerledi, bu nedenle tarayıcı uygulaması ve desteği de yavaş yavaş gelişti. Bununla birlikte, her büyük gönderi tarayıcısının OpenType özelliklerini desteklediğini belirtmek gerekir (Opera Mini hariç). Kullanabilir miyim bölümünde bu desteğin kolayca ne kadar geriye gittiğini kontrol edebilirsiniz.
Neyse ki, destek ve sözdizimi değişiklik gösterse de, Sass gibi araçlar denemeyi daha pratik hale getirmeye yardımcı olabilir ve sözdizimi çalışmazsa veya özellik desteklenmiyorsa, kullanıcı normal metinle sonuçlanır. Tabii ki, her zaman bir püf noktası vardır; OpenType özelliklerinin etkinleştirilmesi dosya boyutunu artırır, ancak dikkatli ve önbelleğe alındığında bunun bir performans katili olması gerekmez.
Ne gereği var?
Tasarım iletişimle ilgilidir ve insanlar, estetiğe dayalı olarak kullanılabilirlik hakkında yargılarda bulunurlar.Bu yüzden tipografik seçimlerimizle nasıl iletişim kurduğumuza dair tüm engelleri kaldırmak bizim görevimizdir. Ayrıca, tek tek harfleri değil, şekil gruplarını tarayarak okuduğumuzu da unutmamalısınız. Böylece akış ne kadar yumuşak olursa ve harf gruplarını kavramak ve onları kelime ve kelime öbeği olarak anlamak ne kadar kolay olursa, kullanıcı iletmeye çalıştığınız mesajı o kadar hızlı kavrayacak ve siz de bunu stille yapıyor olacaksınız.
Detaylar lütfen
Sitenizde OpenType özelliklerinin etkin olduğu bir yazı tipine sahip olduğunuzda, bunları CSS'nizde kullanmak oldukça basittir. Resmi CSS3 sözdizimi şuna benzer:
p {font-feature-settings: "liga" 1, "frac" 1; }
Bu özellikler mevcutsa, bu kod hem standart bitişik harfleri hem de kesirleri etkinleştirir. Sözdizimi varyasyonları nedeniyle, bunları dahil etmenin gerçek daha güvenli yolu şuna daha çok benzeyecektir:
p {-moz-font-feature-settings: "liga = 1", "frac = 1"; -moz-font-özellik-ayarları: "liga" 1, "frac" 1; -webkit-font-özellik-ayarları: "liga" 1, "frac" 1; -ms-font-özellik-ayarları: "liga = 1", "frac = 1"; -o-font-özelliği-ayarları: "liga" 1, "frac" 1; yazı tipi özelliği ayarları: "liga" 1, "frac" 1; }
Evet, Firefox iki kez burada. Bu, Firefox 14 civarında bir yerde bir sözdizimi değişikliğinden kaynaklanmaktadır. İşte hangi özelliklerin var olduğu ve bunlara nasıl başvurulacağının daha eksiksiz bir listesi:
- "c2sc": büyük harflerden küçük büyük harfler
- "calt": bağlamsal alternatifler
- "clig": bağlamsal bitişik harfler
- "dlig": isteğe bağlı bitişik harfler
- "geçmiş": tarihsel karakter alternatifleri
- "hlig": tarihsel bitişik harfler
- "kern": gömülü karakter aralığı tablosunun kullanımını etkinleştirin
- "liga": ortak bitişik harfler
- "nalt": alternatif ek açıklama
- "tuz": üslup alternatifleri
- "smcp": küçük büyük harfler
- "ss01": alternatif biçimsel küme 1
- "ss02": alternatif biçimsel küme 2
- "ss03": alternatif biçimsel küme 3
- "ss04": alternatif biçimsel küme 4
- "ss05": alternatif biçimsel küme 5
- "swsh": süslemeler
- "sıfır": eğik çizgili sıfır
Aşağıdaki seçenekler bir tür koşullu mantık gerektirir (en azından kendi zihninizde), çünkü bir seferde bu çiftlerden yalnızca birini gerçekten etkinleştirebilirsiniz:
- Numara durumu: "lnum": satır numaraları veya "onum": eski stil numaraları
- Sayı aralığı: "pnum": orantılı veya "tnum": tablo (finans gibi sayı satırlarını sıralamak için)
- Kesirler: "frac": normal kesirler veya "afrc": alternatif kesirler
Bunların hepsini hatırlamak istemiyor musunuz? Sass kullanıyorsanız, sizin için bir Mixin'im var. Yukarıdaki listeyi sağlar ve tüm kod yazımını sizin için yapar. Daha kapsamlı bir liste için Adobe'yi deneyin.
Gerekçeli bir yaklaşım
Tasarımınızın her unsuru bir sebepten dolayı orada olmalıdır, ancak bazen iyi bir nedenin sadece daha büyük güzellik için olduğunu hatırlamak önemlidir. Ve bu tamam. OpenType özellikleriyle ilgili güzel olan şey, kendi başlarına normal yazı tipine geri dönmeleridir, bu nedenle tasarımınıza eklemek oldukça güvenlidir ve ekledikleri cila seviyesi oldukça dikkat çekici olabilir. Okunabilirlik, artan piksel yoğunluğu ve ekran kalitesine daha fazla vurgu yaparak, giderek daha fazla kullanıcı çevrimiçi olarak daha uzun içeriği okuyor. Bu, daha iyi tipografiden okunabilirlikteki faydaların hızla artan sadakate, daha fazla algılanabilirliğe ve hatta tek boynuzlu at ve yavru geçit törenlerine dönüşebileceği anlamına gelir (Tamam, belki de sonuncusu bir abartıdır).
Kelimeler: Jason Pamental
Bu makale ilk olarak net derginin 253 sayısında yer aldı..
