Genişlik eksenli değişken fontlar
Ağırlığın yanı sıra harf genişliğinin de ayarlanabildiği değişken aileler: yazıyı sığdırmak için hafif daraltmadan, dardan genişe tam bir aralığa kadar.
Narrow to wide
Değişken font, bir tasarımı sabit stiller kümesi yerine bir aralık olarak saklar. Çoğu değişken aile bir ağırlık ekseni sunar; daha az sayıda aile, wdth etiketiyle kayıtlı bir genişlik ekseni ekler. Bu eksen harfleri yüksekliklerini ve karakterlerini koruyarak daha dar ya da daha geniş yapar. Değerleri normal genişliğin yüzdesidir: 75 dar bir kesim, 100 normal, 125 geniş bir kesimdir.
Genişlik, yerleşim işlerinde çoğu zaman iki eksenden daha pratik olanıdır. Bir başlığı sütununa tam oturtmanıza, bir gezinme etiketini küçük ekranda sıkıştırıp büyük ekranda gevşetmenize ya da bir tabloyu yalnızca sütunları yer bulamadığında daha dar bir ayara geçirmenize izin verir. CSS'te özellik font-stretch, daha ince denetim için font-variation-settings'tir ve kesme noktalarında değişebilir ya da canlandırılabilir.
Seçmeden önce aralıkları karşılaştırın. Buradaki birkaç aile yalnızca daralır, 100'den 75 civarına; bu yazıyı sığdırmak için yeterlidir. İkisi yalnızca genişler; diğerleri normal genişliğin yarısından ikiye katına gider ve fiilen tek ailede birkaç yazı tipidir. Aşağıdaki notlar her aralığı kayıtlı olduğu gibi belirtir. İyi çizilmiş bir genişlik ekseni, metni yapay biçimde ezmekten farklı olarak harf biçimlerini kendisi ayarlar.
-
Roboto
75'ten 100'e bir genişlik ekseni tasarımı dar bir kesime doğru daraltır; yanında 100'den 900'e ağırlık ve italikler.
-
Open Sans
Genişlik, yazıyı sığdırmak için 100'den 75'e daralır; italikli altı ağırlıklı humanist bir sans'ta.
-
Archivo
62'den 125'e genişlik, çok dardan geniş stile; yanında Thin'den Black'e ağırlık ve italikler.
-
Saira
Kare hatlı bir sans'ta 50'den 125'e genişlik ve 100'den 900'e ağırlık, ayrıca italikler.
-
IBM Plex Sans
Harfleri 75'e kadar daraltan bir genişlik ekseni; yedi ağırlık ve italikler.
-
Inconsolata
Genişlik ekseni 50'den 200'e, yani normal genişliğin yarısından ikiye katına uzanan bir eş aralıklı font; yanında 200'den 900'e ağırlık.
-
Noto Serif
Genişlik ekseni 100'den 62,5'e daralan bir metin serif'i; italikli dokuz ağırlık.
-
Merriweather
87'den 112'ye mütevazı bir genişlik aralığına sahip metin serif'i; yanında ağırlık ve optik boyut eksenleri.
-
Asap
100'den 900'e ağırlık ve 75'ten 125'e genişlik, italikli.
-
Georama
62,5'tan 150'ye, dardan genişe bir genişlik ekseni ve italikli dokuz kalınlık.
-
Zalando Sans
Sade bir grotesk'te 75'ten 125'e genişlik ve 200'den 900'e kalınlık, ayrıca italikler.
-
Science Gothic
Dört eksen: 100–900 kalınlık, 50–200 genişlik, eğim ve kontrast.
-
Advent Pro
Genişlik burada yalnızca 100'den 200'e genişler; yanında 100'den 900'e kalınlık.
-
Mozilla Headline
Bir başlık sans'ında 200'den 700'e kalınlık ve 75'ten 125'e genişlik.
-
Anek Latin
Thin'den ExtraBold'a sekiz dik kalınlıkta 75'ten 125'e genişlik.
-
Pliant
Genişlik yalnızca 100'den 125'e genişler; dokuz kalınlık, italikler, Kiril ve Yunanca.
-
Ubuntu Sans
Menüler, düğmeler ve iletişim kutuları için yapılmış bir sans'ta 100'den 75'e daralan genişlik ekseni; sekiz kalınlık ve italikler.
Örnekler her ailenin temel Latin alt kümesini yükler. Buradaki her aile açık lisans taşır; sayfası koşulları belirtir ve özgün dosyaları sunar.
Genişlik eksenli değişken fontlar hakkında sorular
CSS'te font genişliğini nasıl ayarlarım?
Yüzdeyle font-stretch kullanın, örneğin font-stretch: 85%, ya da font-variation-settings: “wdth” 85. Değer fontun desteklediği aralıkta olmalıdır; dışındaki değerler en yakın uca çekilir.
Genişlik ekseni, metni yatayda ölçeklemekle aynı şey mi?
Hayır. Ölçekleme çizgi kalınlığını ve eğrileri bozar. Genişlik ekseni her genişlik için çizilmiş biçimleri kullanır; böylece dikey ve yatay çizgiler orantılı kalır.
Değişken fontlar tüm tarayıcılarda ve uygulamalarda çalışır mı?
Güncel tarayıcılar ve başlıca tasarım uygulamaları destekler. Eski yazılımlar yalnızca varsayılan stili gösterebilir; bunun önemli olduğu yerde yedek olarak statik dosyalar bulundurun.
Bu değişken fontları ticari olarak kullanabilir miyim?
Evet. Biri dışında hepsi SIL Open Font License altındadır; bu lisans ticari kullanıma, gömmeye ve kendi sunucunuzda barındırmaya izin verir. Ubuntu Sans, ticari kullanıma yine izin veren Ubuntu Font License'ı kullanır. Her font sayfası lisansını belirtir.