Yazı tipi dosya boyutlarını önemli ölçüde azaltabilecek yeni bir yazı tipi spesifikasyonu
Bu makalede, değişken yazı tiplerinin ne olduğuna, sunduğu avantajlara ve bunları işimizde nasıl kullanabileceğimize göz atacağız. Öncelikle, web'de tipografinin 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 genellikle yazı tipi ve yazı karakteri terimlerini 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ı tipleri sayesinde 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 ilişkili 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 için kullanıcıların ayrı bir yazı tipi dosyası indirmesi gerekir. 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, yazı tiplerinin nasıl oluşturulduğu, kullanmamız gereken yedek desenler veya FOIT ve FOUT gibi istenmeyen yan etkilerle ilgilenmeden önce bile geçerlidir.
Birçok yazı tipi ailesi, inceden siyaha kadar farklı kalınlıklar, 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ş) gibi çok daha geniş bir stil yelpazesi sunar. Her stil (veya stil kombinasyonları) için yeni bir yazı tipi dosyası yüklemeniz gerektiğinden, birçok web geliştiricisi bu özellikleri kullanmamayı tercih ederek 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 stille (düz metin için en uygun olan en tipik 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 Kalınlık'tır. Bu eksen, varsayılan stili kalın bir stile bağlayabilir. Herhangi bir stil, bir eksen boyunca yerleştirilebilir ve değişken yazı tipinin "örnek"i olarak adlandırılır. Bazı örnekler yazı tipi geliştiricisi tarafından adlandırılır. Örneğin, Ağırlık ekseni 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 zıt uçlarında biri daha açık, diğeri daha koyu iki stil vardır. Bu örnekler arasından 900 tane seçebilirsiniz:
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ünse de yazı stillerinin çeşitliliği, okuma deneyiminin kalitesini önemli ölçüde artırabilir. Performans cezası yoksa web geliştiricileri istedikleri kadar stil kullanabilir. Bu, tasarımlarına bağlıdır.
İ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ı tipleri, ara değerle uyumlu konturlara sahiptir. Bu nedenle, Roman ve İtalik stilleri arasında ara değer uygulanabilir ve Roman'dan İtalik'e geçmek için Eğik ekseni kullanılabilir.
Garamond, Baskerville veya Bodoni gibi diğer yazı tiplerinde, dikey ve italik glif konturları, enterpolasyonla uyumlu değildir. Ö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, eğik konturlar ile normal konturlar arasında geçiş yapar.
İtalik'e geçiş yapıldıktan sonra, kullanıcının kullanabileceği eksenler, karakter kümesi gibi Roma alfabesindekilerle aynı olmalıdır.
Simge değiştirme özelliği, tekil simgeler için de kullanılabilir ve değişken yazı tipinin tasarım alanındaki herhangi bir yerde 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.
Özet olarak, konturlar izin verdiğinde 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ığı (200 ila 700) korur ancak Hepta Slab, 1'de 900'e kadar uzanan aşırı ince bir kalınlığa sahiptir.
Kayıtlı beş eksenin, CSS'de değerlerini ayarlamak için kullanılan 4 karakterli küçük harf 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, değişken yazı tipinde hangi eksenlerin kullanılabileceğini ve bu eksenlerin hangi değerlere sahip olabileceğini tanımlar. Bu nedenle, her yazı tipinin neler sunduğunu öğrenmek önemlidir. Bu bilgiyi yazı tipinin dokümanlarında bulabilirsiniz. Dilerseniz 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 karakterleri animasyonlu hale getirmeyi de deneyebilirsiniz. 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 mekanizmayla yüklenir ancak iki yeni geliştirmeyle birlikte:
@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. Her ikisi de aynı yazı tipi dosyasını gösterir.
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 bir şekilde ayarlayabileceğiniz eksenler font-weight üzerinden wght ekseni ve font-stretch üzerinden 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. Eksenin bir açma/kapatma düğmesi olması gerekir: 0 değeri kapalıdır ve normal stili gösterir, 1 değeri ise italik stili gösterir. Diğer eksenlerden farklı olarak geçiş yoktur. 0.5 değeri "yarı italik" yazım biçimini 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 eksenleri font-style mülkü aracılığıyla ayarlamak sezgisel bir işlem olsa da Nisan 2020 itibarıyla bu işlemin tam olarak nasıl yapılacağı hâlâ üzerinde çalışılıyor. Bu nedenle, şimdilik bunları özel eksenler 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 boyutu otomatik olarak seçeceği anlamına gelir. Ancak bunu devre dışı bırakmak isterseniz font-optical-sizing değerini none olarak ayarlayabilirsiniz.
Yazı tipi boyutuyla eşleşmeyen optik bir boyut istiyorsanız 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şiklik yapmak zorunda kalmazsınız.
GRAD, Roboto Flex'te -200 ila 150 aralığına sahip özel bir eksen olduğundan.
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, katalogunu değişken yazı tipleriyle genişletti ve düzenli olarak yenilerini ekliyor.
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, Google Fonts'tan CSS ve yazı tiplerini getiren <link> öğesine eklenir.
Mevcut tüm eksenleri veya değer aralıklarını kullanmak için Google Fonts API'nin URL'sini manuel olarak oluşturmanız gerekir. Değişken yazı tiplerine genel bakış bölümünde tüm eksenler ve değerler listelenir.
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 varyantı ayarlarının devralınması
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 dosyasına da ihtiyacınız vardır.
Ancak font-variation-settings ile ilgili küçük bir sorun var. Belirli bir şekilde ayarlamadığınız her özellik otomatik olarak varsayılan değerine sıfırlanır.
Önceden ayarlanmış 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ı bir açıklamasını Değişken yazı tipi devralımını düzeltme başlıklı makalede bulabilirsiniz.
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'te 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 bir deneme çalışması yürüttü. 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, yazı tipini ayarlar arasında animasyonlu olarak değiştirmek performans sorunlarına neden olabilir. Tarayıcılarda değişken yazı tipi desteği daha gelişmiş hale geldiğinde bu durum iyileşecek olsa da yalnızca ekranda bulunan yazı tiplerini animasyonlu hale getirerek sorunu bir nebze azaltabilirsiniz. Dinamo tarafından oluşturulan bu kullanışlı snippet, vf-animation sınıfına sahip öğelerin ekranda olmadığı durumlarda animasyonlarını 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 geçerlidir: Tarayıcının ağ bağlantısı kurmasına ne kadar erken izin verirseniz yazı tiplerinizi o kadar erken indirebilir.
Google Fonts'u yüklemeyle ilgili daha fazla performans ipucunu En Hızlı Google Fonts başlıklı makalede bulabilirsiniz.
Yedek seçenekler 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ı seçebilir ve değişken yazı tiplerini aşamalı iyileştirme olarak kullanabilirsiniz:
/* 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ına sahip metinler normal kalın olarak oluşturulur. Bunun nedeni, kullanabileceğimiz tek kalın yazı tipinin bu olmasıdır. 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 sorunsa alakalı eski tarayıcıları hedeflemek için dilediğiniz zaman eski püf noktalarından birini kullanabilirsiniz.
Google Fonts API'yi kullanıyorsanız ziyaretçilerinizin tarayıcılarına uygun yazı tiplerinin yüklenmesi bu API tarafından yapılır. 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ında 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.