Yazı tipi dosya boyutlarını önemli ölçüde azaltabilecek yeni bir yazı tipi spesifikasyonu
Bu makalede, değişken yazı tiplerinin ne olduğuna, sağladıkları avantajlara ve bunları işimizde nasıl kullanabileceğimize bakacağız. Öncelikle yazı tipinin web'de nasıl çalıştığını ve çeşitli yazı tiplerinin getirdiği yenilikleri inceleyelim.
Tarayıcı uyumluluğu
Mayıs 2020 itibarıyla, değişken yazı tipleri çoğu tarayıcıda desteklenmektedir. Değişken yazı tipleri kullanabilir miyim? ve Yedekler bölümlerine bakın.
Giriş
Yazı tipi ve yazı tipi terimleri geliştiriciler tarafından sıklıkla birbirinin yerine kullanılır. Ancak bir fark var: Yazı tipi, birçok farklı dizgi teknolojisinde kullanılabilen bir görsel tasarımdır. Dijital dosya biçimindeki yazı tipi de bu uygulamalardan biridir. Diğer bir deyişle, yazı tipi gördüğünüz şeydir ve yazı tipini kullandığınıztır.
Genellikle gözden kaçan bir diğer kavram ise tarz ile aile arasındaki ayrımdır. Stil, Kalın İtalik gibi tek ve belirli bir yazı karakteridir ve aile, tüm stillerden oluşur.
Değişken yazı tiplerinden önce her stil ayrı bir yazı tipi dosyası olarak uygulanıyordu. Değişken yazı tipleriyle tüm stiller tek bir dosyada tutulabilir.
Tasarımcı ve geliştiricinin karşılaştığı zorluklar
Tasarımcı, bir baskı projesi oluştururken sayfa düzeninin fiziksel boyutu, kullanabileceği renk sayısı (kullanılacak baskı makinesinin türüne göre belirlenir) gibi bazı kısıtlamalarla karşılaşır. Ancak, istedikleri sayıda yazı tipi stili kullanabilirler. Bu, basılı medyanın tipografisinin genellikle zengin ve sofistike olduğu, yani okuma deneyiminin gerçekten zevkli olduğu anlamına gelir. En son güzel bir dergiye göz atmaktan hoşlandığınızı düşünün.
Web tasarımcıları ve geliştiricilerin baskı tasarımcılarından farklı kısıtlamalara sahiptir ve önemli bir tanesi tasarımlarımızın ilişkili bant genişliği maliyetleridir. Bu, daha zengin tipografik deneyimlerin bir maliyeti olduğu için önemli bir nokta olmuştur. Geleneksel web yazı tiplerinde, tasarımlarımızda kullanılan her stil, kullanıcıların ayrı bir yazı tipi dosyası indirmesini gerektirir. Bu da gecikmeyi ve sayfa oluşturma süresini artırır. Yalnızca Normal ve Kalın stiller ile bunların italik karşılıklarını dahil etmek en az 500 KB yazı tipi verisi sağlayabilir. Yazı tiplerinin nasıl oluşturulduğunu, kullanmamız gereken yedek kalıpları veya FOIT ve FOUT gibi istenmeyen yan etkileri daha ele almadık.
Pek çok yazı tipi ailesi; İnceden Siyaha kadar çok daha çeşitli stiller, dar ve geniş genişlikler, biçimsel çeşitli ayrıntılar, hatta boyuta özgü tasarımlar (büyük veya küçük metin boyutları için optimize edilmiş) sunar. Her stil (veya stil kombinasyonları) için yeni bir yazı tipi dosyası yüklemeniz gerekeceğinden, birçok web geliştiricisi bu özellikleri kullanmamayı tercih eder ve bu nedenle kullanıcılarının okuma deneyimini azaltır.
Değişken yazı tipinin anatomisi
Değişken yazı tipleri, stilleri tek bir dosyada paketleyerek bu zorlukların üstesinden gelir.
Bunun için orta veya "varsayılan" stille başlar. Genellikle "Normal", yani düz metin için en uygun, en tipik ağırlığa ve genişliğe sahip dik Roma tipi tasarımdır. Ardından, bu şekil "eksen" adı verilen sürekli bir aralıktaki diğer stillere bağlanır. En yaygın eksen, varsayılan stili Kalın stile bağlayabilen Ağırlık'tır. Tek tek stiller, bir eksen boyunca yerleştirilebilir ve bunlara değişken yazı tipinin "örneği" adı verilir. Bazı örnekler, yazı tipi geliştiricisi tarafından adlandırılır. Örneğin, Ağırlık ekseni konumu 600, SemiBold olarak adlandırılır.
Değişken yazı tipi olan Roboto Flex'in Ağırlık ekseni için üç stil vardır. Normal stil ortadadır. Eksenin karşı ucunda biri daha hafif, diğeri daha ağır olmak üzere iki stil vardır. Bunlar arasından 900 örnek arasından seçim yapabilirsiniz:
Yazı tipi geliştiricisi bir dizi farklı eksen sunabilir. Hepsi aynı varsayılan stilleri paylaştığından bunları birleştirebilirsiniz. Roboto'nun Genişlik ekseninde üç stili vardır: Normal, eksenin merkezindedir ve her iki ucunda ise daha dar ve geniş olmak üzere iki stil bulunur. Bunlar, Normal stilin tüm genişliklerini sağlar ve her ağırlık için tüm genişlikleri sağlamak için Ağırlık ekseniyle birleştirilir.
Bu, binlerce stil olduğu anlamına gelir! Bu çok fazla bir miktar gibi görünebilir, ancak bu tür stillerin çeşitliliği, okuma deneyiminin kalitesini önemli ölçüde artırabilir. Performans cezası yoksa web geliştiricileri istedikleri kadar birkaç stil kullanabilirler. Bu kendi tasarımlarına bağlıdır.
İtalik
İtaliklerin değişken yazı tiplerinde kullanılma şekli, iki farklı yaklaşım olduğu için ilginçtir. Helvetica veya Roboto gibi yazı tiplerinde interpolasyon uyumlu konturlar bulunur. Bu sayede Romen ve İtalik stil arasında interpolasyon uygulanabilir ve Roma'dan İtalik'e geçmek için Eğim ekseni kullanılabilir.
Diğer yazı tiplerinde (Garamond, Baskerville veya Bodoni gibi) interpolasyon uyumlu olmayan Roma ve İtalik glif konturları bulunur. Örneğin, genellikle Latin alfabesinde küçük harfli "n" harfini tanımlayan konturlar, İtalik küçük harf "n" tanımlamak için kullanılan konturlarla eşleşmez. İtalik eksen, bir kontur diğeriyle interpolasyon yapmak yerine Latin alfabesinden İtalik konturlara geçiş yapar.
İtalik biçime geçildikten sonra, karakter kümesinin aynı olması gerektiği gibi, kullanıcının kullanabileceği eksenler Romalı için bu eksenler ile aynı olmalıdır.
Bir glif değiştirme özelliği tek tek glifler için de görülebilir ve değişken yazı tipine sahip tasarım alanının herhangi bir yerinde kullanılabilir. Örneğin, iki dikey çubuklu bir dolar işareti tasarımı, daha büyük nokta boyutlarında en iyi sonucu verirken, daha küçük nokta boyutlarında yalnızca bir çubuk içeren bir tasarım daha iyi sonuç verir. Glifi oluşturmak için daha az pikselimiz olduğunda, iki çubuklu bir tasarım okunaksız hale gelebilir. Bununla mücadele etmek için, italik eksende olduğu gibi, Optik Boyut ekseni üzerinde tür tasarımcısının belirlediği bir noktada bir glifin bir başka glifle değiştirilmesi yapılabilir.
Özetle, konturların izin verdiği durumlarda, tip tasarımcıları çok boyutlu bir tasarım alanında çeşitli stiller arasında interpolasyon yapan yazı tipleri oluşturabilir. Bu şekilde tipografiniz üzerinde ayrıntılı kontrole sahip olursunuz ve büyük bir güç elde edersiniz.
Eksen tanımları
Yazı tipinin bilinen, tahmin edilebilir özelliklerini kontrol eden beş kayıtlı eksen vardır: ağırlık, genişlik, optik boyut, eğim ve italik. Ayrıca, bir yazı tipi özel eksenler içerebilir. Bunlar, tasarımcının istediği yazı tipinin tüm tasarım özelliklerini kontrol edebilir: Seriflerin boyutu, aralık uzunluğu, üst çıkıntıların yüksekliği veya i üzerindeki noktanın boyutu.
Eksenler aynı özelliği kontrol edebilse de farklı değerler kullanabilir. Örneğin, Oswald ve Hepta Slab değişken yazı tiplerinde yalnızca bir eksen mevcuttur: Ağırlık ama aralıklar farklıdır: Oswald değişken olacak şekilde yükseltilmeden önceki aralıkla aynı aralığa sahiptir (200'den 700'e). Ancak Hepta Slab'in 1 ile 900'e kadar çıkan aşırı bir saç çizgisi ağırlığı vardır.
Kayıtlı beş eksen, değerlerini CSS'de ayarlamak için kullanılan 4 karakterlik küçük harfli etiketleri vardır:
| Eksen adları ve CSS değerleri | |
|---|---|
| Ağırlık |
wght
|
| Genişlik |
wdth
|
| Eğik gülümseme |
slnt
|
| Optik Boyut |
opsz
|
| İtalik |
ital
|
Yazı tipi geliştiricisi, hangi eksenlerin değişken yazı tipinde kullanılabileceğini ve hangi değerlere sahip olabileceklerini tanımladığından, her bir yazı tipinin neler sunduğunu öğrenmek çok önemlidir. Bu bilgiyi, yazı tipinin belgelerinde sağlanmalıdır. Alternatif olarak, yazı tipini Wakamai Fondue gibi bir araçla inceleyebilirsiniz.
Kullanım alanları ve avantajlar
Eksen değerlerini belirlemek kişisel zevke ve tipografik en iyi uygulamaları uygulamaya bağlıdır. Her yeni teknolojinin hatalı kullanımı olası bir tehlikedir. Ayrıca, fazla sanatsal veya araştırmacı olan ayarlar da gerçek metnin okunaklılığını azaltabilir. Başlıklar söz konusu olduğunda, mükemmel sanatsal tasarımlar oluşturmak için farklı eksenleri incelemek heyecan verici olsa da gövde metni için bu durum, metni okunaksız hale getirebilir.
Heyecan verici ifade
Yukarıda, Mandy Michael'ın Decovar yazı tipinin keşfi, sanatsal ifadenin mükemmel bir örneğini göstermektedir.
Yukarıdaki örneğin çalışan örneğini ve kaynak kodunu burada görebilirsiniz.
Animasyonlar
Ayrıca, değişken yazı tipleriyle karakterler canlandırmayı da keşfedebilirsiniz. Yukarıda, Zycon yazı karakteriyle kullanılan farklı eksenlere bir örnek verilmiştir. Axis Praactic'teki canlı animasyon örneğine bakın.
Anicons, dünyanın ilk animasyonlu renkli simge yazı tipidir ve Materyal Tasarım Simgeleri'ne dayanır. Anicons, son teknoloji ürünü iki yazı tipi teknolojisini birleştiren bir denemedir: değişken yazı tipleri ve renkli yazı tipleri.
Fitness
Roboto Flex ve Amstelvar, bir dizi "Parametrik Eksen" sunar. Bu eksenlerde harfler, biçimin 4 temel yönüne ayrılır: siyah veya pozitif şekiller, beyaz ya da negatif şekiller ve x ile y boyutları. Ana renklerin, ayarlama yapmak için diğer herhangi bir renkle karıştırılabilmesi gibi, bu 4 özellik de diğer eksenlerde ince ayar yapmak için kullanılabilir.
Amstelvar'daki XTRA ekseni, yukarıda gösterildiği gibi bin gösterim başına "beyaz" değerini ayarlamanıza olanak tanır. Zıt yönlerde küçük XTRA parçaları kullanıldığında kelimelerin genişlikleri eşitlenir.
CSS'deki değişken yazı tipleri
Değişken yazı tipi dosyaları yükleniyor
Değişken yazı tipleri, geleneksel statik web yazı tipleriyle aynı @font-face mekanizmasıyla, ancak iki yeni geliştirmeyle yüklenir:
@font-face {
font-family: 'Roboto Flex';
src: url('RobotoFlex-VF.woff2') format('woff2-variations');
src: url('RobotoFlex-VF.woff2') format('woff2') tech('variations');
font-weight: 100 1000;
font-stretch: 25% 151%;
}
1. Kaynak Biçimleri: Değişken yazı tiplerini desteklemiyorsa tarayıcının yazı tipini indirmesini istemeyiz. Bu yüzden format ve tech açıklamalarını
gelecek söz dizimine
(format('woff2') tech('variations')) bir kez ekleriz. Kullanımdan kaldırılan ancak tarayıcı söz diziminde (format('woff2-variations')) desteklenen bir kez kullanılır. Tarayıcı değişken yazı tiplerini ve gelecek söz dizimini destekliyorsa ilk bildirimi kullanır. Değişken yazı tiplerini ve geçerli söz dizimini destekliyorsa ikinci bildirimi kullanır. İkisi de aynı yazı tipi dosyasını işaret eder.
2. Stil Aralıkları: font-weight ve font-stretch için iki değer sağladığımızı fark edeceksiniz. Tarayıcıya bu yazı tipinin hangi belirli ağırlığı (örneğin font-weight: 500;) sağladığını belirtmek yerine artık yazı tipi tarafından desteklenen ağırlıklar aralığını belirliyoruz. Roboto Flex'te Ağırlık ekseni 100 ile 1.000 arasındadır ve CSS, eksen aralığını doğrudan font-weight stili özelliğiyle eşler. Aralık @font-face içinde belirtildiğinde, bu aralığın dışındaki tüm değerler en yakın geçerli değerle "sınırlandırılır". Genişlik ekseni aralığı, font-stretch özelliğiyle aynı şekilde eşlenir.
Google Fonts API'yi kullanıyorsanız bu işin üstesinden gelebilirsiniz. CSS uygun kaynak biçimlerini ve aralıklarını içermenin yanı sıra Google Fonts, değişken yazı tiplerinin desteklenmediği durumlarda statik yedek yazı tipleri de gönderir.
Ağırlıkları ve genişlikleri kullanma
Şu anda CSS'den güvenilir şekilde ayarlayabileceğiniz eksenler, wght ekseni ile font-weight ve wdth ekseni ile font-stretch arasıdır.
Normalde font-weight anahtar kelime (light, bold) veya 100 ile 900 arasında 100'lük adımlarla sayısal bir değer olarak ayarlanır. Değişken yazı tipleriyle, yazı tipinin Genişlik aralığında herhangi bir değer ayarlayabilirsiniz:
.kinda-light {
font-weight: 125;
}
.super-heavy {
font-weight: 1000;
}
Benzer bir şekilde, font-stretch değerini anahtar kelimelerle (condensed, ultra-expanded) veya yüzde değerleriyle ayarlayabiliriz:
.kinda-narrow {
font-stretch: 33.3%;
}
.super-wide {
font-stretch: 151%;
}
İtalik ve eğik yazı kullanma
ital ekseni, hem normal hem de italik stil içeren yazı tipleri için tasarlanmıştır. Eksen bir açma/kapatma anahtarı olmalıdır: 0 değeri kapalı ve normal stili, 1 değeri ise italik yazı tipini gösterecektir. Diğer eksenlerden farklı olarak
geçiş yoktur. 0.5 değeri size "yarı italik" sağlamaz.
slnt ekseni, yeni bir stil olmaması, sadece normal stilin eğimi sağlaması açısından italikten farklıdır. Varsayılan olarak değeri 0, yani varsayılan dik harf şekilleridir. Roboto Flex'in eğimi maksimum -10 derecedir. Diğer bir deyişle, harfler 0'dan -10'a giderken sağa doğru eğilir.
Bu eksenleri font-style özelliği aracılığıyla ayarlamak sezgiseldir, ancak Nisan 2020 itibarıyla bunun tam olarak nasıl yapılacağı üzerinde çalışılmaktadır. Şimdilik, bunları özel eksenler olarak değerlendirmeli ve font-variation-settings ile ayarlamalısınız:
i, em, .italic {
/* Should be font-style: italic; */
font-variation-settings: 'ital' 1;
}
.slanted {
/* Should be font-style: oblique 10deg; */
font-variation-settings: 'slnt' 10;
}
Optik boyutları kullanma
Bir yazı tipi çok küçük (12 piksellik bir dipnot) veya çok büyük (80 piksellik bir başlık) oluşturulabilir. Yazı tipleri, harf şekillerini boyutuna daha iyi uyacak şekilde değiştirerek bu boyut değişikliklerine yanıt verebilir. Küçük boyut ince ayrıntılar olmadan daha uygun olabilirken büyük boyut için daha fazla ayrıntı ve ince fırça darbeleri daha iyi olabilir.
Bu eksen için yeni bir CSS özelliği kullanıma sunulmuştur: font-optical-sizing. Varsayılan olarak auto değerine ayarlanmıştır. Bu da tarayıcı, eksen değerini font-size değerine göre ayarlar. Bu, tarayıcının otomatik olarak en iyi optik boyutu seçeceği anlamına gelir. Ancak bu özelliği devre dışı bırakmak istiyorsanız font-optical-sizing değerini none olarak ayarlayabilirsiniz.
Özellikle yazı tipi boyutuyla eşleşmeyen bir optik boyut istiyorsanız opsz ekseni için de özel bir değer ayarlayabilirsiniz. Aşağıdaki CSS, metnin büyük boyutlu olarak ancak 8pt içinde yazdırılmış gibi optik boyutta görüntülenmesine neden olur:
.small-yet-large {
font-size: 100px;
font-variation-settings: 'opsz' 8;
}
Özel eksenleri kullanma
Kayıtlı eksenlerin aksine, özel eksenler mevcut bir CSS mülküne eşlenmez. Bu nedenle, bunları her zaman font-variation-settings aracılığıyla ayarlamanız gerekir.
Özel eksen etiketleri, kayıtlı eksenlerden ayırt edilebilmeleri için her zaman büyük harfle yazılır.
Roboto Flex birkaç özel eksen sunar. Bunların en önemlisi Not (GRAD) eksenidir.
Not ekseni; genişlikleri değiştirmeden yazı tipinin ağırlığını değiştirir, dolayısıyla çizgi sonları değişmez. Bir Not ekseniyle oynayarak, Ağırlık ekseninde genel genişliği etkileyen ve ardından Genişlik eksenindeki genel ağırlığı etkileyen değişikliklerle çok fazla uğraşmak zorunda kalmazsınız.
GRAD, Roboto Flex'te -200 ila 150 aralığında özel bir eksendir.
Bu sorunu font-variation-settings ile çözmemiz gerekiyor:
.grade-light {
font-variation-settings: `GRAD` -200;
}
.grade-normal {
font-variation-settings: `GRAD` 0;
}
.grade-heavy {
font-variation-settings: `GRAD` 150;
}
Google Fonts'taki değişken yazı tipleri
Google Fonts, kataloğunu değişken yazı tipleri ile genişletti ve düzenli olarak yeni yazı tipleri ekledi.
Arayüz şu anda yazı tipinden tekli örnekleri seçmeyi amaçlamaktadır: İstediğiniz varyasyonu seçip "Bu stili seç"i tıkladığınızda CSS'yi ve yazı tiplerini Google Fonts'tan getiren <link> öğesine eklenir.
Kullanılabilir tüm eksenleri veya değer aralıklarını kullanmak için URL'yi Google Fonts API'ye manuel olarak oluşturmanız gerekir. Değişken yazı tiplerine genel bakış, tüm eksenleri ve değerleri listeler.
Google Değişken Yazı Tipleri Bağlantıları aracı, tam değişken yazı tipleri için en son URL'leri de sağlayabilir.
Yazı tipi varyasyonu ayarlarını devralma
Kayıtlı tüm eksenler yakında mevcut CSS mülkleri aracılığıyla desteklenecektir, ancak şimdilik yedek olarak font-variation-settings kullanmanız gerekebilir. Yazı tipinizin özel eksenleri varsa
font-variation-settings kullanmanız da gerekir.
Ancak font-variation-settings ile ilgili şu an biraz zorlandım. Açıkça ayarlamadığınız her mülk otomatik olarak varsayılan değerine sıfırlanır.
Daha önce ayarlanan değerler devralınmaz. Bu, aşağıdakilerin beklendiği gibi çalışmayacağı anlamına gelir:
<span class="slanted grade-light">
I should be slanted and have a light grade
</span>
Tarayıcı, ilk olarak .slanted sınıfından font-variation-settings: 'slnt' 10 öğesini uygular. Ardından, .grade-light sınıfından font-variation-settings: 'GRAD' -200 uygulanır. Ancak bu işlem slnt değerini tekrar varsayılan 0 değerine sıfırlar! Sonuç, eğik değil hafif dereceli metin olacaktır.
Neyse ki, CSS değişkenlerini kullanarak bu sorunu çözebiliriz:
/* Set the default values */
:root {
--slnt: 0;
--GRAD: 0;
}
/* Change value for these elements and their children */
.slanted {
--slnt: 10;
}
.grade-light {
--grad: -200;
}
.grade-normal {
--grad: 0;
}
.grade-heavy {
--grad: 150;
}
/* Apply whatever value is kept in the CSS variables */
.slanted,
.grade-light,
.grade-normal,
.grade-heavy {
font-variation-settings: 'slnt' var(--slnt), 'GRAD' var(--GRAD);
}
CSS değişkenleri basamaklamalı gerçekleştirilir. Bu nedenle, bir öğe (veya üst öğelerinden biri) slnt özelliğini 10 olarak ayarlamışsa GRAD öğesini başka bir değere ayarlasanız bile bu değer korunur. Bu tekniğin ayrıntılı bir açıklaması için Değişken yazı tipi devralmasını düzeltme bölümüne bakın.
CSS değişkenlerine animasyon eklemenin (tasarım gereği) çalışmadığına, dolayısıyla şunun gibi bir şey çalışmadığına dikkat edin:
@keyframes width-animation {
from { --wdth: 25; }
to { --wdth: 151; }
}
Bu animasyonlar doğrudan font-variation-settings üzerinde gerçekleşmelidir.
Performans getirileri
OpenType değişken yazı tipleri, bir tür ailesinin birden fazla varyasyonunu tek bir yazı tipi dosyasında depolamamıza olanak tanır. Monotype, 12 giriş yazı tipini birleştirerek hem İtalik hem de Latin stillerinde üç genişlikte sekiz ağırlık oluşturarak bir deneme çalıştırmıştır. 48 ayrı yazı tipini tek bir değişken yazı tipi dosyasında depolamak, dosya boyutunda% 88 azalma sağladı.
Ancak, Roboto regular gibi tek bir yazı tipi kullanıyorsanız ve başka bir şey yoksa, çok sayıda eksene sahip değişken bir yazı tipine geçiş yapmanız durumunda yazı tipi boyutunda net bir kazanç görmeyebilirsiniz. Her zaman olduğu gibi, kullanım alanınıza bağlıdır.
Öte yandan, ayarlar arasında yazı tipine animasyon eklemek performans sorunlarına neden olabilir. Tarayıcılardaki değişken yazı tipi desteği geliştikçe bu özellik iyileştirilse de, yalnızca ekranda bulunan yazı tiplerine animasyon uygulayarak sorun biraz azaltılabilir. Dinamo tarafından hazırlanan bu kullanışlı snippet, vf-animation sınıfına sahip öğelerdeki animasyonları, ekranda olmadıklarında duraklatır:
var observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
// Pause/Play the animation
if (entry.isIntersecting) entry.target.style.animationPlayState = "running"
else entry.target.style.animationPlayState = "paused"
});
});
var variableTexts = document.querySelectorAll(".vf-animation");
variableTexts.forEach(function(el) { observer.observe(el); });
Yazı tipiniz kullanıcı etkileşimine yanıt veriyorsa giriş etkinliklerini kısıtlamak veya geri döndürmek iyi bir fikirdir. Bu işlem, tarayıcının önceki örneğe göre çok az değişen değişken yazı tipi örneklerini oluşturmasını önler. İnsan gözü bu farkı göremez.
Google Fonts kullanıyorsanız Google'ın yazı tiplerinin barındırıldığı alan olan https://fonts.gstatic.com'ye önceden bağlanmak iyi bir fikirdir. Bu, tarayıcının CSS'de yazı tipleriyle karşılaştığında bunları nereden alacağını erkenden bilmesini sağlar:
<link rel="preconnect" href="https://fonts.gstatic.com" />
Bu ipucu diğer CDN'ler için de geçerlidir: Tarayıcının ağ bağlantısını ne kadar erken kurmasına izin verirseniz yazı tiplerinizi o kadar erken indirebilir.
En Hızlı Google Fonts'ta Google Fonts'un yüklenmesiyle ilgili daha fazla performans ipucunu bulabilirsiniz.
Yedekler ve tarayıcı desteği
Tüm modern tarayıcılar değişken yazı tiplerini destekler. Eski tarayıcıları desteklemeniz gerektiğinde, sitenizi statik yazı tipleriyle oluşturmayı ve aşamalı geliştirme olarak değişken yazı tipleri kullanmayı tercih edebilirsiniz:
/* Set up Roboto for old browsers, only regular + bold */
@supports not (font-variation-settings: normal) {
@font-face {
font-family: Roboto;
src: url('Roboto-Regular.woff2');
font-weight: normal;
}
@font-face {
font-family: Roboto;
src: url('Roboto-Bold.woff2');
font-weight: bold;
}
body {
font-family: Roboto;
}
.super-bold {
font-weight: bold;
}
}
/* Set up Roboto for modern browsers, all weights */
@supports (font-variation-settings: normal) {
@font-face {
font-family: 'Roboto';
src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
url('RobotoFlex-VF.woff2') format('woff2-variations');
font-weight: 100 1000;
font-stretch: 25% 151%;
}
.super-bold {
font-weight: 1000;
}
}
Eski tarayıcılarda, .super-bold sınıfındaki metinler normal kalın yazı tipinde görüntülenir. Çünkü elimizdeki tek kalın yazı tipi budur. Değişken yazı tipleri desteklendiğinde, aslında en ağır ağırlığı olan 1.000'i kullanabiliriz.
@supports kuralı Internet Explorer tarafından desteklenmediğinden
bu tarayıcıda herhangi bir stil gösterilmez. Bu bir sorun oluşturuyorsa alakalı eski tarayıcıları hedeflemek için her zaman eski sürüm saldırılarından birini kullanabilirsiniz.
Google Fonts API'yi kullanıyorsanız ziyaretçinizin tarayıcıları için uygun yazı tiplerinin yüklenmesi size yardımcı olur. Diyelim ki Oswald yazı tipini 200 ile 700 arasında ağırlıklı olarak aşağıdaki gibi istiyorsunuz:
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">
Değişken yazı tiplerini işleyebilen modern tarayıcılar, değişken yazı tipini alır ve 200 ile 700 arasında tüm ağırlığı kullanır. Eski tarayıcılara her ağırlık için ayrı ayrı statik yazı tipleri sunulur. Bu durumda, biri 200 ağırlık için, diğeri 300 ağırlık için vb. olmak üzere 6 yazı tipi dosyası indirirler.
Teşekkürler
Bu makale ancak aşağıdaki kişilerin yardımıyla ulaşılabilirdi:
- Mustafa Kurtuldu, Google'da kullanıcı deneyimi tasarımcısı ve tasarım destekçisi
- Roel Nieskens, kullanıcı deneyimi tasarımcısı/geliştirici ve tipografi uzmanı, Kabisa
- Dave Crossland, Program Yöneticisi, Google Fonts
- David Berlow, Font Bureau'da yazı tasarımcısı ve tipograf
- Laurence Penney, Yunus-praksi.org sitesinin geliştiricisi
- Mandy Michael, variablefonts.dev geliştiricisi
Bruno Martins tarafından Unsplash'ta yayınlanan lokomotif resim.