Alışılmadık eksenli değişken fontlar
Özel eksenli deneysel ve anlatımcı değişken fontlar: yumuşaklık, zıplama, rahatlık, dönüşüm, dönme, derece ve fazlası.
Push the slider
Değişken font biçimi, bir tasarımın her özelliğinin eksene dönüşmesine izin verir. Beşi kayıtlı ve yaygındır: ağırlık, genişlik, eğim, italik ve optik boyut. Bunların ötesinde bir tasarımcı, yazı tipinin anlamlı biçimde değiştirebileceği her şey için bir eksen icat edebilir ve ona büyük harflerle dört harfli bir etiket verebilir. Bu özgürlük son yıllarda bazı yaratıcı yazılar doğurdu.
Özel eksenler birkaç gruba ayrılır. Parametrik eksenler ince çizgilerin kalınlığı ya da küçük harflerin yüksekliği gibi tek bir ölçülebilir özelliği denetler ve ince tipografik ayar araçlarıdır. Grade, genişliği değiştirmeden metnin ne kadar ağır göründüğünü değiştirir; satırlar yeniden akmaz, bu da koyu mod için işe yarar. Anlatımcı eksenler harflerin kişiliğini değiştirir: daha yumuşak köşeler, rahat bir sallanma, taban çizgisi boyunca bir zıplama, serife benzer açılmalar. Bazı eksenler ise salt kavramdır; harflerin biçimini verilere bağlar ya da uzayda döndürür.
CSS’te her özel eksen, etiketi ve bir sayıyla font-variation-settings ile ayarlanır. Sürekli oldukları için eksenler canlandırılabilir ya da kaydırmaya ve girdiye bağlanabilir. Aşağıdaki notlar her fontun kendi eksenlerini kayıtlarda geçtiği gibi adlandırır.
-
Recursive
Five axes in one file: proportional to monospace, linear to casual, upright to cursive.
-
Fraunces
Softness and Wonky axes alongside weight and optical size.
-
Roboto Flex
13 axes, including parametric controls for stroke thickness and letter heights.
-
Google Sans Flex
Six axes: weight, width, optical size, grade, roundness and slant.
-
Commissioner
Flare and Volume axes grow serif-like endings on a humanist sans.
-
Geologica
Cursive and Sharpness axes beside weight and slant.
-
Shantell Sans
Bounce, Informality and Spacing axes on a marker-style handwriting font.
-
Nunito Sans
Ağırlık, genişlik ve optik boyutun yanında bir küçük harf yüksekliği ekseni.
-
Science Gothic
A custom contrast axis thins the horizontal strokes, beside weight, width and slant.
-
Signika
A Grade axis, from -30 to 0, slightly thins the strokes for light-on-dark text, beside weight.
-
Kumbh Sans
A parametric axis changes the thickness of the thin strokes alone, beside weight.
-
Akshar
Weight and contrast axes in a condensed sans for Latin and Devanagari.
-
AR One Sans
A resolution axis for augmented reality displays that keeps letter widths, so text does not reflow, beside weight.
-
Honk
Morph shifts the blocky letter shapes and Shadow Length extends a shadow behind them; there is no weight axis.
-
Kablammo
A Morph axis makes its doodle-covered capitals shift and dance.
-
Tilt Neon
Two axes rotate its neon-tube letters up to 45 degrees in X and Y.
Ö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.
Alışılmadık eksenli değişken fontlar hakkında sorular
CSS’te özel bir ekseni nasıl kullanırım?
font-variation-settings özelliğini, eksen etiketi tırnak içinde ve bir değerle yazın; örneğin “SOFT” 100. Özel etiketler büyük küçük harfe duyarlıdır ve büyük harfle yazılır.
Değişken font eksenleri canlandırılabilir mi?
Evet. Sürekli sayılar oldukları için eksen değerleri CSS’te geçişle ya da animasyonla değiştirilebilir ve JavaScript ile sürülebilir.
Grade ekseni ne işe yarar?
Harf genişliklerini değiştirmeden metni daha hafif ya da ağır gösterir, böylece düzen kaymaz. Tasarımcılar bunu koyu zeminleri ya da farklı ekranları dengelemek için kullanır.