Değişken Yazı Tiplerini Kullanmanın 4 Adımları

Sep 12, 2025

Nasıl Yapılır

Variable fonts: The outlines of various weights and style of a single font family in magenta, emblazoned with the words 'Get versatile with variable fonts' in a bold, sans serif font.

(Görüntü Kredi: Gelecek)

Değişken Yazı Tipleri Yazı tipi tasarımcıların, yazı tipinin içindeki tip değişikliklerini tanımlamasını sağlar ve bir font dosyasının birden fazla yazı tipi gibi davranmasını sağlar. Standart yazı tipleri, her biri farklı bir stili, örneğin hafif veya cesur bir ağırlık olan birden fazla ayrı yazı tipi dosyası içeren font ailelerine gruplandırılmıştır. Değişken yazı tipleri, tüm bu bilgileri tek bir yazı tipi dosyasında içerir.

Kaynak SANS Pro'yu örnek olarak kullanarak, yazı tipinin değişken versiyonu, yaklaşık 394kb'dir ve çok çeşitli ağırlıklarda gelir. Bu yazı tipi ağırlıklarını ayrı ayrı standart yazı tipi dosyaları olarak kullanıyor olsaydık, ortalama olarak, her biri 234KB'dir - yaklaşık 1856KB kombine bir dosya boyutuna neden olur. Tabii ki, bu hesaplama tüm yazı tipi ağırlıklarının, yapmadıkları standart bir yazı tipi olarak bireysel olarak bulunduğunu varsaymaktadır. (Yine de, sadece düzenli yazı tiplerini arıyorsanız, yayınımızı inceleyin. En iyi ücretsiz yazı tipleri mevcut.)

Standart bir yazı tipi olarak bulunmayan yazı tiplerini kaldırırsak, birleştirilen dosya boyutu hala değişken yazı tipinin boyutunun yaklaşık üç katıdır ve önemli ölçüde daha az stilledir. Çok sayıda web projesinde ortak olan cesur ve düzenli versiyonları istemediğiniz olsa bile, standart kaynak SANS Pro yazı tipinin iki sürümü, tek bir değişken yazı tipinden daha büyüktür. Bunun gösterdiği şey, değişken yazı tipleriyle, tasarımlarımızı ve yaratıcılığımızdan ödün vermeden bant genişliğinde büyük tasarruf sağlama potansiyeline sahibiz.

A comparison of the filesize of a range of font weights between a standard and a variable font – the standard font family totals 1864kb compared to 394kb for the variable font. — Yazı Tipi Kaynağı Sans Pro'nun standart ve değişken versiyonu arasında bir dizi yazı tipi ağırlığının dosya boyutlarının karşılaştırılması (Resim Kredisi: Mandy Michael)

Değişken Yazı Tipleri, temel değişiklikleri bir eksen boyunca enterpolasyon yaparak çalışır, esasen arada yeni noktalar oluşturur. Bu, çok sayıda stil ve varyasyon sunan eksen boyunca font ağırlıklarını isteğe bağlı noktalarda ayarlayabileceğiniz anlamına gelir. Ayrıca, değişken yazı tiplerinin her bir varyasyon arasında canlandırabileceğimiz, pürüzsüz geçişlerin söyleyebileceğimiz her çeşitlilik arasında canlandırılabildiğimiz için, daha önce hiç başaramadığımız bir şey.

Değişken yazı tiplerini daha da heyecanlı yapan şey, tasarımcıların sadece tek bir eksenle sınırlı olmadığıdır. Değişken yazı tipleri, farklı stilleri temsil eden birçok farklı eksen içerebilir. Bu, yoğunlaştırılmış, italik, optik boyutu veya daha yaratıcı veya özel seçenekler içerebilir.

Yazı tiplerinizi yeni bir web sitesine yerleştirmek ister misiniz? Web Tasarım Kaynakları için elimizden gelenin en iyisini yap Web Sitesi Oluşturucu Toplama ve üst seçim ağ sağlayıcısı Hizmetler. Veya bir depolama yükseltmesi için bunlara göz atın Bulut depolama Seçenekler.

01. Değişken fontlarda eksenleri anlayın

A chart showing a single variable font transforming along two axes: weight and width. It ranges from low weight and narrow in the bottom left corner to high weight and thick at the top right. — Bir değişken yazı tipinin bir ağırlıkta ve genişlik ekseninin enterpolasyonuna bakmak, mevcut olan özelleştirme aralığını ortaya koyuyor (Resim Kredisi: Mandy Michael)

CSS'lerimizdeki değişken yazı tiplerini kullanmak, normalde web'deki yazı tiplerini nasıl kullanacağımıza çok benzer: @ Font-Face . Bununla birlikte, ilk önce değişken bir yazı tipinin içindeki farklı eksen türlerini anlamamız gerekir, çünkü bu, hangi CSS özelliklerinin kullandığımızı belirler.

Değişken bir yazı tipinde iki tür eksen vardır: kayıtlı bir eksen ve özel bir eksen. Kayıtlı bir eksen, standartlaştırmaya değecek kadar yaygın olan bir ekseni ifade eder. Şu anda beş kayıtlı eksen var; Ağırlık, genişlik, eğimli, italik ve optik boyut ve bunlar genellikle font ağırlığı gibi mevcut CSS özelliklerine eşlenir.

Özel eksenler TypeFace tasarımcıları tarafından tanımlanır, herhangi bir çeşitlilik olabilir ve yalnızca CSS'de belirtilebilecek font dosyasında dört harfli bir tanımlayıcı gerektirir.

02. Kayıtlı bir eksen kullanın

A range of variable font weights along an axis from light (200) to black (900). — Ağırlık değişimleri, bir eksen üzerinde, ışıktan (200) Black (900) ile tanımlanır. (Resim Kredisi: Mandy Michael)

Kayıtlı bir eksen söz konusu olduğunda, örneğin font ağırlığı veya yazı tipi tarzı ile ilişkili bir CSS özelliklerini kullandığımızdan emin olmak istiyoruz.

Fontlarımızı kullanarak ayarlayabiliriz. @ Font-Face normalde yaptığımız gibi; Değişim, yazı tipi ağırlığı, yazı tipi streç ve yazı tipi tarzı gibi tanımlayıcılar için varyasyonları nasıl tanımladığımızda. Önceden bir font ağırlığı 200'ün bir fontunu oluştururduk ve bunu fontun ışık versiyonu olarak tanımlayacağız, daha sonra cesur sürüm için başka bir yazı tipi yüz bloğu kurduk ve gerekli olan tüm ağırlıklara kadar dizayn. Değişken yazı tipleriyle, yalnızca tek bir yazı tipi yüz bloğuna ihtiyacımız var. Öyleyse birden fazla örnek kullanmak yerine, yazı tipi ekseninde tanımlanan minimum ve maksimum değerlere karşılık gelen bir dizi değer belirliyoruz.

 @ font-face {
Yazı Tipi-Ailesi: "Kaynak Sans Değişkeni";
SRC: URL ("SOURCE-SANS-VARIABE.WOFF") formatı ("Woff-varyasyonlar");
Yazı Tipi Ağırlığı: 200 700;
}

Bu örnekte, 200 ila 700 arasında bir yazı tipi ağırlığı belirledik. Aralığımız tanımlandıktan sonra, bu aralıktaki herhangi bir sayıyı, örneğin 658, örneğin 658. Ardından, fontun ekseninde tanımlanmış 900 ağırlığına sahip olsa bile, 900'lük bir ağırlık tanımlamaya çalışın. Aralık, CSS'nizde eriştiğinizin neyi tanımlar.

03. Özel eksenleri ayarlayın

Özel bir eksen kullanırken önceden var olan CSS özellikleri olmadığı için, font-varyasyon ayarları adlı yeni bir CSS özelliğini kullanmamız gerekiyor. Bu, ihtiyacımız olan gibi adlandırılmış ve özel eksen olarak tanımlamamızı sağlayacaktır.

 h1 {
Yazı Tipi ailesi: 'Değişken Yazı Tipim';
Yazı tipi varyasyon ayarları: '375,' inli '88;
}

Buradaki örnekte, WGT, Kayıtlı Ağırlık Eksenini belirtir ve Inli, her biri, her biri, her biri, değişim ekseni boyunca bir noktaya karşılık gelen ilişkili bir sayı değerine sahip bir özel ekseni belirtir. Kayıtlı bir ekseni yazı tipi değişim ayarları için bir değer olarak referans verebilirken, bunun yerine eşlenen CSS özelliklerinden yararlanmanız önerilir.

Eski tarayıcılarda destek sağlamak için, CSS özelliği algılamasını kullanarak desteklenmeyen tarayıcılar için geri dönüş yazı tiplerini kullanabiliriz.

 h1 {
  Yazı Tipi ailesi: "Kaynak Sans", Sans-Serif;
  Yazı Tipi Ağırlığı: 700;
}

@supports (font-varyasyon ayarları: normal) {
h1 {
 Yazı Tipi ailesi: "Decovar";
 Yazı tipi değişim ayarları: "inli" 88;
 }
}

Yazı tipi değişim ayarları desteğini kontrol ederek, CSS bloğunun içindeki değişken yazı tipi stillerimizi içerebiliriz, yalnızca değişken fontları destekleyebilecek tartlarda kullanılacak - desteklenmeyen tarayıcılarda kullanılan standart yazı tiplerimizle birlikte kullanılacaktır.

04. Javascript ve değişken yazı tiplerini birleştirin

A range of As rendered in a variety of font weights and sizes, showing the smooth transitions offered by variable fonts. — Değişken Yazı Tipleri, pürüzsüz geçişleri, söyleyin, ince bir ağırlığa kadar incedir; Bu, JavaScript değişkenlerini kullanan pürüzsüz dönüşümler oluşturmanıza olanak sağlar (Resim Kredisi: Mandy Michael)

Daha ince ayarlı kontrol istediğimiz durumlar için JavaScript etkinliklerini kullanabiliriz veya Yalnızca CSS ile erişemeyeceğimiz olaylara dayanan fontları değiştirmek için. Basit bir örnek, Yazı tipi ağırlığımızı Viewport'umuzun boyutuna eşleştirecek - Viewport'un küçüldüğü gibi, yazı tipi ağırlığı ağırlaşır.

Sıvı ölçeğini oluşturmak için, yazı tipi ağırlığı ve viewport boyutunu iki set ve birim set hizalamamız gerekir. Pencere.innerwidth kullanarak mevcut viewport genişliğine erişebilir ve 0-0.99 aralığına dönüştürerek yeni bir yüzde bazlı bir ölçek oluşturabiliriz. Minimum ve maksimum viewport boyutlarını dahil ederek, efektin aralığını kontrol edebiliriz.

 Var ViewScale =
(window.innerwidth - minwindowsize) / (Maxwindowsize - minwindowsize);

Daha sonra Viewport boyutumuza göre yazı tipi ağırlığını belirleriz.

 VAR FontWeightScale = ViewSporScale * (Minfontweight - MaxFontweight) + MaxFontweight;

CSS özel özelliklerini kullanarak, CSS'imizdeki yazı tipi ağırlığını güncellemek için JavaScript değerini kullanabiliriz.

 P.Style.SetProperty ("ağırlık", FontWeightScale);

Bu bir fonksiyona birleştirildiğinde ve yeniden boyutlandırma olay dinleyicisine takıldığında, pencerenin yeni boyutuna göre yazı tipi ağırlığını güncelleyebiliriz.

Bu temel yaklaşımla, tipografimizi her türlü olay ve deneyimlere göre değiştirebiliyoruz. Viewport'un geniş olduğu yerlerde daha fazla ayrıntıya sahip olabiliriz; Buna karşılık, daha küçük ve daha kapalı bir alanda, yazı tipi genişliğini azaltmaya ya da ağırlığı arttırmaya, özetlilik, kullanılabilirlik ve tasarım açısından içeriğimizi ve tipografi daha iyi kontrol edilmesini sağlayabiliriz.

Yapabilirsin Kodu Görüntüle Bunun için codepen için.

Bu makale başlangıçta 318'de yayınlandı. ağ , dünyanın web tasarımcıları ve geliştiricileri için en çok satan dergisi. Net'e abone olun .

Oluşturma CSS'de değişken yazı tipleri hakkında daha fazla bilgi edinin

An image promoting Bianca Berning's talk 'The future of type' at Generate CSS on 26 September. — (Görüntü Kredi: Getty / Bianca Berning / Gelecek)

CSS'teki konuşmasında, 26 Eylül 2019 tarihinde Zengin Mix, Londra'da, Bianca Berning'in, Bianca Berning'in, Fontların geleneksel medyadaki yazılı kelime için yeni fırsatlar ne kadar değişebileceğini keşfedeceksiniz. AR, VR ve karışık gerçeklik gibi deneyimler.

Bunu ve diğer harika müzakereleri yakalamak istiyorsanız, şimdi biletlerinizi aşmaya değer. 15 Ağustos'ta 5:00 UTC'den daha önce sizinkini alıyorsanız, £ 50'den sadece £ 199 + KDV ödeyebilirsiniz. Şimdi biletinizi satın alın K!

İlgili Makaleler:

3 yol teknolojisi türünü değiştiriyor
CSS'de değişken yazı tiplerine başlayın
Tipinizi çevrimiçi olarak değişken yazı tipleri ile dönüştürün

Değişken Yazı Tiplerini Kullanmanın 4 Adımları

01. Değişken fontlarda eksenleri anlayın

02. Kayıtlı bir eksen kullanın

03. Özel eksenleri ayarlayın

04. Javascript ve değişken yazı tiplerini birleştirin

Oluşturma CSS'de değişken yazı tipleri hakkında daha fazla bilgi edinin

Nasıl Yapılır - En Popüler Makaleler

Perspektifi nasıl çizilir

CSS Gridli Moda Esnek Düzenler

13 vr oyun dünyası yapmak için ipuçları

Illustrator grafiklerini etkiler için nasıl hazırlanacağı

Eski ustalar gibi bir portre boya

Realflow'da bir dökme su etkisi oluşturun

Modelleme Kompleksi Geometri: 5 Üst İpuçları

Nakit akışını etkili bir şekilde yönetmenin 5 yolu

Kategoriler