Sabit bir fontta her kalınlık ayrı bir dosyadır: normal metin için 400, kalın başlık için 700, ince bir alt başlık için 300. Değişken (variable) font ise bu kalınlıkların hepsini ve aradaki ara değerleri tek bir dosyada taşır. MDN’in tanımıyla değişken fontlar, OpenType biçiminin bir uzantısıdır ve bir yazı tipinin pek çok varyasyonunu, yani kalınlık, genişlik ve stil seçeneklerini, tek dosyada saklar; her varyasyon için ayrı bir @font-face kuralı yazmak gerekmez.
Türkçe bir site açısından soru şu: değişken bir font seçmek Türkçe harfleri etkiler mi, kaç kilobayt kazandırır ya da kaybettirir? 20 Ekim 2026 ölçümümüze dayanarak cevaplayalım.
Türkçe tam değişken aileler
Google Fonts’ta Latin alfabeli 506 aile değişken olarak yayımlanıyor. Bunların 465’i Türkçenin 18 harfinin hepsini çiziyor; oran %92. Bütün Latin alfabeli ailelerde Türkçe tam oranı %69 olduğu için değişken fontlar Türkçe açısından ortalamanın belirgin biçimde üstünde. Bunun olası nedeni, değişken fontların büyük kısmının son yıllarda hazırlanmış ya da yeniden çizilmiş aileler olması. Eski ailelerde Türkçe harf eksikliği gerçekten daha sık: 2013’ten önce eklenen 620 Latin alfabeli ailenin 305’inde en az bir Türkçe harf eksikken, 2020 ve sonrasında eklenen 863 ailede bu sayı 156.
Değişken olmak Türkçe harfler için ayrı bir risk yaratmaz: harf ya fontta vardır ya yoktur, eksenler yalnız var olan harflerin biçimini değiştirir. Bir fontun değişken sürümünde Ğ var da sabit sürümünde yok gibi bir durumla bu ölçümde karşılaşmadık, çünkü Google her aile için tek bir karakter listesi yayımlıyor.
Türkçe tam değişken ailelerin tam listesi ve eksen dağılımı değişken fontlar sayfasında.
Eksenler
Değişken fontun ayarlanabilir her özelliğine eksen denir ve her eksenin dört harfli bir etiketi vardır. MDN beş eksenin kayıtlı (standart) olduğunu yazıyor ve her birinin CSS’teki karşılığını veriyor:
| Eksen | Etiket | CSS’teki karşılığı |
|---|---|---|
| Kalınlık | wght | font-weight (1–1000) |
| Genişlik | wdth | font-stretch |
| İtalik | ital | font-style: italic |
| Eğim | slnt | font-style: oblique |
| Optik boyut | opsz | font-optical-sizing |
Kayıtlı eksenlerin etiketi küçük harfle yazılır. Tasarımcının eklediği özel eksenler büyük harfli olur (örneğin GRAD) ve MDN’e göre bunlar yalnız font-variation-settings ile ayarlanabilir. Etiketler büyük-küçük harfe duyarlıdır.
Türkçe tam 465 değişken ailede eksenlerin dağılımı şöyle: 451 ailede kalınlık (wght), 86 ailede genişlik (wdth), 29 ailede optik boyut (opsz), 23 ailede eğim (slnt) ekseni var. 135 ailenin iki ya da daha fazla ekseni bulunuyor. Özel eksenler arasında en sık görülenler ELSH (gölge, 15 aile) ve CRSV (el yazısı biçimleri, 14 aile).
Kalınlık ekseni olmayan 14 değişken aile de var; bunlar genişlik ya da dekoratif bir eksen taşıyan, tek kalınlıkta çizilmiş aileler.
Optik boyut ne işe yarar?
Optik boyut ekseni, harflerin metin boyutuna göre çizimini ayarlar: küçük puntoda harfler biraz daha açık ve geniş, büyük puntoda daha ince ayrıntılı olur. MDN’e göre font-optical-sizing: auto varsayılan davranıştır, yani eksen varsa tarayıcı onu boyuta göre kendisi kullanır. Roboto Flex (8–144), Fraunces (9–144) ve Inter (14–32) Türkçe tam olup optik boyut ekseni taşıyan ailelerden. Roboto Flex ayrıca 13 eksenle Türkçe tam aileler içinde en çok eksene sahip olanlardan biri.
CSS’te kullanmak
Değişken bir fontu @font-face ile tanımlarken desteklenen kalınlık aralığı yazılır:
@font-face {
font-family: "Fraunces";
src: url("/fonts/fraunces-degisken.woff2");
font-weight: 100 900;
}
h1 { font-weight: 650; }
p { font-weight: 430; }MDN, font-weight aralığının tarayıcıya fontun hangi değerleri desteklediğini bildirdiğini ve aralık dışındaki değerlerin font-weight ile verildiğinde sınıra yuvarlandığını açıklıyor. font-variation-settings ise bu sınırı uygulamaz, ayrıca her yeni bildirim öncekilerin hepsinin yerine geçer. Bu yüzden MDN, standart bir özellik varsa onu kullanmayı, font-variation-settings’i özel eksenlere bırakmayı öneriyor.
Fontsource paketleriyle çalışıyorsanız değişken paket @fontsource-variable/ ile başlar ve CSS’te aile adına “Variable” eklenir. Fontsource’un belgesine göre varsayılan içe aktarma kalınlık eksenini yükler; italik için wght-italic.css, bütün eksenler için full.css gibi ayrı dosyalar vardır ve her değişken font için tek bir içe aktarma kullanılmalıdır. Kurulumun ayrıntısını kendi sunucunuzda barındırma yazımızda anlattık.
Dosya boyutu, ne zaman kazandırır?
Değişken dosya, tek bir sabit ağırlıktan büyüktür. Ayrıntılı sayfası olan fontlarda Türkçe için gereken iki parçayı (temel ve genişletilmiş Latin) ölçtük:
- Kalınlık ekseni olan 111 değişken fontta: ortanca 54,4 KB (bütün kalınlıklar).
- Sabit 89 fontta: ortanca 34,3 KB (yalnız bir ağırlık).
Bu ortanca değerlerle kaba bir hesap yapılabilir: sitede yalnız bir ağırlık kullanıyorsanız sabit dosya daha hafiftir. İki ağırlık kullandığınızda sabit dosyaların toplamı yaklaşık 68,7 KB olur ve değişken dosya öne geçer. Üç ve daha fazla ağırlıkta fark büyür. Gerçek rakam fonttan fonta çok değişir; örneğin Poppins 400 ağırlığının Türkçe iki dosyası yalnız 13,2 KB, Merriweather değişken dosyası ise 168,5 KB. Her fontun kendi sayfasında ölçülmüş boyut yazılı.
web.dev’in font rehberi de aynı yöne işaret ediyor: en hızlı yüklenen font hiç istenmeyen fonttur ve değişken fontlar bir sayfanın ihtiyaç duyduğu font dosyası sayısını azaltabilir.
İtalik ayrı bir dosyadır
Değişken fontlarda italik çoğunlukla ayrı bir dosyadır (ya da ayrı bir ital eksenidir). Sayfada italik kullanıyorsanız onu da hesaba katın. Türkçe tam 1.263 ailenin 287’sinde italik çizim var; olmayanlarda tarayıcı italik istendiğinde harfleri yapay olarak eğer. Yapay eğik ğ ve ş harflerinde breve ve çengel de harfle birlikte eğilir, ama harf biçimi gerçek bir italik gibi değişmez.
Türkçe metinde ara kalınlıklar
Değişken fontun pratikteki en görünür avantajı ara kalınlıklardır. Türkçe metinde noktalı ve çengelli harfler sık geçtiği için (ğ, ş, ç, ı, İ, ö, ü) gövde metni kalınlığı küçük ekranlarda okunurluğu etkiler. 400 ile 500 arasında, örneğin 430 ya da 450 gibi bir değer, sabit fontlarda mümkün değildir. Koyu zemin üzerinde açık renkli metinde biraz daha ince, açık zeminde biraz daha kalın bir değer seçmek de yalnız değişken fontla tek dosyada yapılabilir.
Bunu denemenin kolay yolu, sitemizdeki font sayfalarındaki ağırlık örnekleridir. Değişken bir fontun sayfasında “Güzel yağmur şıpır şıpır” satırı en ince, 400, 700 ve en kalın değerde aynı dosyadan çizilir. Inter sayfasında bu satırı 100’den 900’e kadar görebilirsiniz.