Web'deki değişken yazı tiplerine giriş

Yazı tipi dosya boyutlarını önemli ölçüde azaltabilecek yeni bir yazı tipi spesifikasyonu

Dave Crossland

Mustafa Kurtuldu

Roel Nieskens

Thomas Steiner

Bu makalede, değişken yazı tiplerinin ne olduğuna, sundukları avantajlara ve işimizde bunları nasıl kullanabileceğimize değineceğiz. Öncelikle, web'de yazı tiplerinin nasıl çalıştığını ve değişken yazı tiplerinin ne gibi yenilikler getirdiğini 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ı tiplerini kullanabilir miyim? ve Yedek seçenekler başlıklı makalelere bakın.

Giriş

Geliştiriciler, yazı tipi ve yazı karakteri terimlerini çoğu zaman birbirinin yerine kullanır. Ancak aralarında bir fark vardır: Yazı tipi, birçok farklı yazım teknolojisinde bulunabilen temel görsel tasarımdır. Yazı tipi ise bu uygulamalardan biri olup dijital dosya biçimindedir. Diğer bir deyişle, yazı tipi gördüğünüz, yazı ise kullandığınız şeydir.

Sık sık göz ardı edilen bir diğer kavram da stil ile aile arasındaki farktır. Stil, Kalın İtalik gibi tek ve belirli bir yazı tipidir. Aile ise stillerin tamamıdır.

Değişken yazı tipleri kullanılmadan önce her stil ayrı bir yazı tipi dosyası olarak uygulanıyordu. Değişken yazı tipleriyle tüm stiller tek bir dosyada bulunabilir.

Tasarımcı ve geliştiricinin karşılaştığı zorluklar

Tasarımcılar, baskı projesi oluştururken sayfa düzeninin fiziksel boyutu, kullanabilecekleri renk sayısı (kullanılacak baskı makinesinin türüne göre belirlenir) gibi bazı kısıtlamalarla karşılaşır. Ancak istedikleri kadar yazı tipi stili kullanabilirler. Bu da basılı medyanın tipografisinin genellikle zengin ve sofistike olduğu anlamına gelir. Böylece okuma deneyimi gerçekten keyifli olur. En son ne zaman mükemmel bir dergiye göz attığınız düşünün.

Web tasarımcılarının ve geliştiricilerin baskı tasarımcılarından farklı kısıtlamaları vardır. Bunlardan en önemlisi, tasarımlarımızın bant genişliği maliyetleridir. Bu, maliyetli oldukları için daha zengin yazım deneyimleri için bir engel 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ı 500 KB veya daha fazla yazı tipi verisi içerebilir. Bu henüz yazı tiplerinin nasıl oluşturulduğunu, kullanmamız gereken yedek kalıpları veya FOIT ve FOUT gibi istenmeyen yan etkileri ele almadan önce bile yaşandı.

Birçok yazı tipi ailesinde, İnce'den Siyaha kadar çok daha geniş bir stil yelpazesi, dar ve geniş genişlikler, çeşitli stil ayrıntıları ve hatta boyuta özel tasarımlar (büyük veya küçük metin boyutları için optimize edilmiş) sunulur. Her stil (veya stil kombinasyonu) için yeni bir yazı tipi dosyası yüklemeniz gerekeceğinden, birçok web geliştiricisi bu özellikleri kullanmamayı tercih eder ve bu da 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.

Bu işlem, genellikle "Normal" olan merkezi veya "varsayılan" bir stilde (düz metin için en uygun olan en yaygın kalınlık ve genişliğe sahip dikey bir roman tasarımı) başlar. Ardından bu, "eksen" adı verilen sürekli bir aralıktaki diğer stillerle bağlanır. En yaygın eksen, varsayılan stili Kalın bir stile bağlayabilen Ağırlık'tır. Herhangi bir stil, bir eksen üzerinde bulunabilir ve değişken yazı tipinin "örneği" olarak adlandırılır. Bazı örnekler yazı tipi geliştiricisi tarafından adlandırılır. Örneğin, Ağırlık eksen konumu 600 Yarı Kalın olarak adlandırılır.

Değişken yazı tipi Roboto Flex'in Ağırlık ekseni üç stildedir. Normal stil ortadadır ve eksenin karşıt uçlarında biri daha hafif, diğeri daha ağır olmak üzere iki stil vardır. Bunlar arasında 900 örnek arasından seçim yapabilirsiniz:

Yazı tipi geliştirici, farklı eksenler sunabilir. Hepsi aynı varsayılan stilleri paylaştığı için bunları birleştirebilirsiniz. Roboto'nun Genişlik ekseninde üç stili vardır: Normal, eksenin ortasındadır ve her iki uçta da daha dar ve daha geniş 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 üzere Ağırlık ekseniyle birleştirilir.

Bu da binlerce stil olduğu anlamına gelir. Bu, çok fazla gibi görünebilir ancak yazı stillerinin çeşitliliği, okuma deneyiminin kalitesini önemli ölçüde artırabilir. Performans cezası yoksa, web geliştiricileri istedikleri tasarıma göre birkaç stil kullanabilir.

İtalik

İki farklı yaklaşım olduğu için italik yazıların değişken yazı tiplerinde ele alınma şekli ilginçtir. Helvetica veya Roboto gibi yazı tiplerinin interpolasyon uyumlu dış çizgileri vardır. Böylece, Roma ve İtalik stilleri arasında interpolasyon elde edilebilir. Eğik eksen ise Latin alfabesinden İtalik diline geçmek için kullanılabilir.

Diğer yazı tipleri (Garamond, Baskerville veya Bodoni gibi), interpolasyonla uyumlu olmayan Roma ve İtalik glif sınırlarına sahiptir. Örneğin, genellikle Roman küçük harf "n"yi tanımlayan konturlar, italik küçük harf "n"yi tanımlamak için kullanılan konturla eşleşmez. Eğik ekseni, bir konturu diğerine interpolate etmek yerine, Roman konturlar ile eğik konturlar arasında geçiş yapar.

İtalik hale getirildikten sonra, kullanıcının kullanabileceği eksenler, karakter kümesinin aynı olması gerektiği gibi Roma dilindekilerle aynı olmalıdır.

Glif değiştirme özelliği, bağımsız gliflerde de görülebilir ve değişken bir yazı tipinin tasarım alanının herhangi bir yerinde kullanılabilir. Örneğin, iki dikey çubuğa sahip bir dolar işareti tasarımı daha büyük nokta boyutlarında en iyi sonucu verir ancak daha küçük nokta boyutlarında yalnızca bir çubuğa sahip bir tasarım daha iyidir. Simgeyi oluşturmak için daha az piksele sahip olduğumuzda iki çubuklu tasarım okunaksız hale gelebilir. Bu sorunla mücadele etmek için, italik ekseni gibi optik boyut ekseni boyunca yazı tipi tasarımcısı tarafından belirlenen bir noktada bir karakterin başka bir karakterle değiştirilmesi yapılabilir.

Özetlemek gerekirse, konturlar izin veriyorsa yazı tasarımcıları çok boyutlu bir tasarım alanında çeşitli stiller arasında aralıklarla geçiş yapan yazı tipleri oluşturabilir. Bu sayede yazı tipiniz üzerinde ayrıntılı kontrol sahibi olur ve çok fazla güç elde edersiniz.

Eksen tanımları

Yazı tipinin bilinen ve tahmin edilebilir özelliklerini (kalınlık, genişlik, optik boyut, eğiklik ve italik) kontrol eden beş kayıtlı eksen vardır. Yazı tipleri, bunların yanı sıra özel eksenler de içerebilir. Bu değerler, yazı tipi tasarımcısının istediği yazı tipi tasarım özelliklerini kontrol edebilir: seriflerin boyutu, süslemelerin uzunluğu, tırnakların yüksekliği veya i harfindeki 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 (Kalınlık) bulunur ancak aralıklar farklıdır. Oswald, değişken olarak yükseltilmeden önceki aralığa (200 ila 700) sahiptir ancak Hepta Slab, 1'de 900'e kadar uzanan aşırı ince bir kalınlığa sahiptir.

Kayıtlı beş eksende, CSS'de değerlerini ayarlamak için kullanılan 4 karakterlik küçük harf etiketleri bulunur:

Yazı tipi geliştiricisi, değişken yazı tipinde hangi eksenlerin kullanılabileceğini ve hangi değerleri kullanabileceklerini tanımladığından, her bir yazı tipinin neler sunduğunu öğrenmek önemlidir. Bu bilgi, yazı tipinin dokümanlarında yer alır veya Wakamai Fondue gibi bir araç kullanarak yazı tipini inceleyebilirsiniz.

Kullanım alanları ve avantajlar

Eksen değerlerini ayarlamak kişisel zevke ve yazımla ilgili en iyi uygulamaları uygulamaya bağlıdır. Her yeni teknolojinin tehlikesi, kötüye kullanım olasılığıdır. Ayrıca, aşırı sanatsal veya keşifsel ayarlar, asıl metnin okunabilirliğini de azaltabilir. Başlıklarda, harika sanatsal tasarımlar oluşturmak için farklı eksenleri keşfetmek heyecan vericidir ancak metinlerde bu, metnin okunaksız hale gelmesine neden olabilir.

Heyecan verici ifade

Sanatsal ifadenin mükemmel bir örneğini yukarıda görebilirsiniz. Mandy Michael tarafından Decovar yazı tipinin keşfi bu örnekte gösterilmektedir.

Yukarıdaki örneğin çalışan örneğini ve kaynak kodunu burada görüntüleyebilirsiniz.

Animasyon

Değişken yazı tipleriyle animasyon karakterleri keşfetme imkanı da vardır. Yukarıda, Zycon yazı tipiyle kullanılan farklı eksenler gösterilmektedir. Axis Praxis'teki canlı animasyon örneğine göz atın.

Anicons, Material Design simgelerine dayalı dünyanın ilk animasyonlu renkli simge yazı tipidir. Anicons, iki son teknoloji yazı tipi teknolojisini (değişken yazı tipleri ve renkli yazı tipleri) bir araya getiren bir denemedir.

Finesse

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 veya negatif şekiller ve x ile y boyutları. Birincil renklerin ayarlamak için diğer herhangi bir renkle karıştırılabileceği gibi, bu 4 boyut da diğer eksenleri hassaslaştırmak için kullanılabilir.

Amstelvar'daki XTRA ekseni, yukarıda gösterildiği gibi "beyaz" bin başına değer ayarlamanıza olanak tanır. XTRA'nın küçük parçalarını zıt yönlerde kullanarak kelimelerin genişlikleri eşitlenir.

CSS'de değişken yazı tipleri

Değişken yazı tipi dosyalarını yükleme

Değişken yazı tipleri, geleneksel statik web yazı tipleriyle aynı @font-face mekanizması üzerinden yüklenir, ancak iki yeni iyileştirme yapılmıştır:

@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 desteklemeyen tarayıcıların yazı tipini indirmesini istemeyiz. Bu nedenle, format ve tech açıklamalarını ekleriz: Bir kez gelecekteki söz dizimi (format('woff2') tech('variations')) biçiminde, bir kez de desteği sonlandırılmış ancak tarayıcılar arasında desteklenen söz dizimi (format('woff2-variations')) biçiminde. Tarayıcı, değişken yazı tiplerini ve gelecekteki söz dizimini destekliyorsa ilk beyanı kullanır. Değişken yazı tiplerini ve mevcut söz dizimini destekliyorsa ikinci beyanı kullanır. İkisi de aynı yazı tipi dosyasını işaret ediyor.

2. Stil aralıkları: font-weight ve font-stretch için iki değer sağladığımızı fark edeceksiniz. Artık tarayıcıya bu yazı tipinin hangi ağırlığı sağladığını (örneğin, font-weight: 500;) söylemek yerine, yazı tipi tarafından desteklenen ağırlıkların aralığını bildiriyoruz. Roboto Flex için ağırlık ekseni 100 ile 1.000 arasında değişir ve CSS, eksen aralığını doğrudan font-weight stil mülküyle eşler. @font-face parametresinde aralık belirtildiğinde, bu aralık dışındaki tüm değerler en yakın geçerli değere "sabitlenir". Genişlik ekseni aralığı, font-stretch mülküyle aynı şekilde eşlenir.

Google Fonts API'yi kullanıyorsanız tüm bunlar sizin adınıza yapılır. CSS, yalnızca uygun kaynak biçimlerini ve aralıklarını içermekle kalmaz, Google Yazı Tipleri, değişken yazı tipleri desteklenmediği takdirde statik yedek yazı tipleri de gönderir.

Ağırlıkları ve genişlikleri kullanma

Şu anda CSS'den güvenilir şekilde ayarlayabileceğiniz eksenler font-weight-arasındaki wght ekseni ve font-stretch-arasındaki wdth eksenidir.

Geleneksel olarak font-weight değerini bir anahtar kelime (light, bold) veya 100'lük adımlarla 100 ile 900 arasında bir sayısal değer olarak ayarlarsınız. Değişken yazı tipleriyle, yazı tipinin Genişlik aralığındaki herhangi bir değeri ayarlayabilirsiniz:

.kinda-light {
  font-weight: 125;
}

.super-heavy {
  font-weight: 1000;
}

Benzer ş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ım kullanma

ital ekseni, hem normal stil hem de italik stil içeren yazı tipleri için tasarlanmıştır. Eksen, bir açma/kapatma düğmesi olarak tasarlanmıştır: 0 değeri kapalıdır ve normal stili gösterir, 1 değeri italiktir. Diğer eksenlerden farklı olarak geçiş yoktur. 0.5 değeri "yarı italik" yazım stilini vermez.

slnt ekseni, yeni bir stil olmaması ve normal stilin yalnızca eğik olması nedeniyle italik eğiklikten farklıdır. Varsayılan değeri 0'tür. Bu, varsayılan dikey harf şekilleri anlamına gelir. Roboto Flex'in maksimum eğikliği -10 derecedir. Yani 0 ile -10 arasındayken harfler sağa doğru eğilir.

Bu ekseni font-style özelliği aracılığıyla ayarlamak sezgisel olacaktır, ancak Nisan 2020 itibarıyla bunu tam olarak nasıl yapacağınız henüz üzerinde çalışılmaktadır. Şimdilik, bunları özel eksen olarak değerlendirmeli ve font-variation-settings aracılığıyla 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 piksel dipnot) veya çok büyük (80 piksel başlık) olarak oluşturulabilir. Yazı tipleri, boyutuna daha uygun olacak şekilde harf şekillerini değiştirerek bu boyut değişikliklerine yanıt verebilir. Küçük boyutta ince ayrıntılar olmadan daha iyi olabilirken büyük boyutta daha fazla ayrıntı ve daha ince çizgiler kullanılabilir.

Bu eksen için yeni bir CSS özelliği kullanıma sunuldu: font-optical-sizing. Varsayılan olarak auto olarak ayarlanır. Bu, tarayıcının eksen değerini font-size'a göre ayarlamasına neden olur. Bu, tarayıcının en iyi optik boyutunu otomatik olarak seçeceği anlamına gelir. Ancak bu özelliği devre dışı bırakmak isterseniz font-optical-sizing değerini none olarak ayarlayabilirsiniz.

Özellikle yazı tipi boyutuyla eşleşmeyen bir optik boyutu isterseniz opsz ekseni için özel bir değer de ayarlayabilirsiniz. Aşağıdaki CSS, metnin büyük boyutta ancak 8pt'te basılmış gibi optik boyutta gösterilmesine neden olur:

.small-yet-large {
  font-size: 100px;
  font-variation-settings: 'opsz' 8;
}

Özel eksenler kullanma

Kayıtlı eksenlerin aksine, özel eksenler mevcut bir CSS mülküyle eşlenmez. Bu nedenle, bunları her zaman font-variation-settings aracılığıyla ayarlamanız gerekir. Özel eksenlerin etiketleri, kayıtlı eksenlerden ayırt edilmeleri için her zaman büyük harflerle yazılır.

Roboto Flex birkaç özel eksen sunar. Bunların en önemlisi Sınıf (GRAD) eksenidir. Sınıf ekseni, genişlikleri değiştirmeden yazı tipinin kalınlığını değiştirdiği için ilginçtir. Bu sayede satır aralıkları değişmez. Sınıf ekseniyle oynayarak, genel genişliği etkileyen Ağırlık ekseninde ve ardından genel ağırlığı etkileyen Genişlik ekseninde değişiklikler yapmak zorunda kalmazsınız.

GRAD, Roboto Flex'te -200 ila 150 aralığında değişen ö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 tek örnekleri seçmeyi amaçlamaktadır: İstediğiniz varyasyonu seçer, "Bu stili seç"i tıklarsınız ve bu stil, 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 yönelik 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ı tiplerinin en son URL'lerini de sağlayabilir.

Yazı tipi varyasyonu ayarlarını devralma

Kayıtlı tüm eksenler yakında mevcut CSS mülkleri aracılığıyla desteklenecek olsa da şimdilik yedek olarak font-variation-settings değerini kullanmanız gerekebilir. Yazı tipinizde özel eksenler varsa font-variation-settings değeri de gerekir.

font-variation-settings ile ilgili küçük bir yanlışımız var. Belirli bir değere ayarlamadığınız tüm özellikler otomatik olarak varsayılan değerlerine sıfırlanır. Önceden ayarlanan değerler devralınmaz. Bu durumda aşağıdakiler beklendiği gibi çalışmaz:

<span class="slanted grade-light">
    I should be slanted and have a light grade
</span>

Tarayıcı önce .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 cihazını varsayılan 0 değerine sıfırlar. Sonuç, eğik olmayan, açık tonlu bir metindir.

Neyse ki CSS değişkenlerini kullanarak bu sorunun üstesinden gelebiliriz:

/* 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 basamaklıdır. Bu nedenle, bir öğe (veya üst öğelerinden biri) slnt değerini 10 olarak ayarlarsa GRAD değerini başka bir değere ayarlasanız bile bu değeri korur. Bu tekniğin ayrıntılı açıklaması için Değişken yazı tipi devralmayı düzeltme bölümüne bakın.

CSS değişkenlerinin animasyonu (tasarım gereği) çalışmaz. Bu nedenle, aşağıdaki gibi bir yaklaşım işe yaramaz:

@keyframes width-animation {
   from { --wdth: 25; }
   to   { --wdth: 151; }
}

Bu animasyonların doğrudan font-variation-settings üzerinde gerçekleşmesi gerekir.

Performans getirileri

OpenType değişken yazı tipleri, bir yazı tipi ailesinin birden fazla varyantını tek bir yazı tipi dosyasında depolamamızı sağlar. Monotype, 12 giriş yazı tipini birleştirerek hem italik hem de Roman stillerinde üç genişlik ve sekiz ağırlıkta yazı tipi oluşturmak için bir deneme yaptı. 48 bağımsız yazı tipini tek bir değişken yazı tipi dosyasında depolamak, dosya boyutunda %88 oranında bir azalma sağladı.

Ancak Roboto Normal gibi tek bir yazı tipi kullanıyorsanız ve başka bir yazı tipi yoksa çok eksenli bir değişken yazı tipine geçerseniz yazı tipi boyutunda net bir kazanç elde edemeyebilirsiniz. Her zaman olduğu gibi bu durum kullanım alanınıza bağlıdır.

Öte yandan, ayarlar arasında yazı tipini canlandırmak performans sorunlarına neden olabilir. Tarayıcılarda değişken yazı tipi desteği daha da olgunlaştıkça bu durum iyileşse de yalnızca o anda ekranda olan yazı tiplerini animasyonla çözmekle sorun bir miktar azaltılabilir. Dinamo'nun bu faydalı snippet'i, vf-animation sınıfına sahip öğeler ekranda yokken animasyonları 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 düzenlemek veya geciktirmek iyi bir fikirdir. Bu, değişken yazı tipinin önceki örnekten çok az farklılaştığı ve insan gözünün farkı göremeyeceği örneklerini tarayıcı tarafından oluşturulmasını engeller.

Google Fonts kullanıyorsanız Google yazı tiplerinin barındırıldığı alan olan https://fonts.gstatic.com alanına ön bağlantı oluşturmanız önerilir. Bu sayede tarayıcı, CSS'de karşılaştığında yazı tiplerini nereden alacağını erkenden bilir:

<link rel="preconnect" href="https://fonts.gstatic.com" />

Bu ipucu diğer CDN'ler için de işe yarar: Tarayıcının bir ağ bağlantısı kurmasına ne kadar erken izin verirseniz yazı tiplerinizi o kadar erken indirebilir.

En Hızlı Google Fonts'ta Google Fonts'u yüklemeyle ilgili daha fazla performans ipucu bulabilirsiniz.

Yedekler ve tarayıcı desteği

Tüm modern tarayıcılar değişken yazı tiplerini destekler. Eski tarayıcıları desteklemeniz gerekiyorsa sitenizi statik yazı tipleriyle oluşturmayı ve değişken yazı tiplerini aşamalı iyileştirme olarak kullanmayı seçebilirsiniz:

/* 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;
  }
}

Daha eski tarayıcılarda .super-bold sınıfındaki metinler, elimizdeki tek kalın yazı tipi olduğu için normal kalın harflerle oluşturulur. Değişken yazı tipleri desteklendiğinde 1.000 değerinde en ağır ağırlığı kullanabiliriz.

@supports kuralı Internet Explorer tarafından desteklenmediğinden bu tarayıcıda herhangi bir stil gösterilmez. Bu bir sorun oluşturuyorsa her zaman, alakalı eski tarayıcıları hedeflemek için eski tarz püf noktalarından birini kullanabilirsiniz.

Google Fonts API'yi kullanıyorsanız, ziyaretçinizin tarayıcılarına uygun yazı tiplerinin yüklenmesini sağlar. Oswald yazı tipini 200 ila 700 ağırlık aralığında istediğinizi varsayalım:

<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">

Değişken yazı tiplerini işleyebilecek modern tarayıcılar, değişken yazı tipini alır ve 200 ile 700 arasındaki her ağırlığı kullanabilir. Eski tarayıcılara her ağırlık için ayrı statik yazı tipleri sunulur. Bu durumda, kullanıcı 6 yazı tipi dosyası indirir: biri 200 ağırlık için, biri 300 ağırlık için vb.

Teşekkürler

Bu makalenin hazırlanması, aşağıdaki kişilerin yardımıyla mümkün olmuştur:

• Mustafa Kurtuldu, Google'da kullanıcı deneyimi tasarımcısı ve tasarım savunucusu
• Roel Nieskens, Kabisa'da kullanıcı deneyimi tasarımcısı/geliştirici ve yazım uzmanı
• Dave Crossland, Program Yöneticisi, Google Fonts
• David Berlow, Font Bureau'da yazı tipi tasarımcısı ve tipografi uzmanı
• axis-praxis.org geliştiricisi Laurence Penney
• variablefonts.dev geliştiricisi Mandy Michael

Unsplash'taki Bruno Martins tarafından oluşturulan hero resim.