Artık web yazı tipi yüklenirken ölçeğini ayarlayabilir, yazı tipi boyutlarını normalleştirebilir ve yazı tipleri arasında geçiş yaparken düzen kaymasını önleyebilirsiniz.
font-size öğesinin tutarlı bir 64px olduğu ve bu başlıkların her biri arasındaki tek farkın font-family olduğu aşağıdaki demoyu düşünün. Soldaki örneklerde ayarlama yapılmamıştır ve tutarsız bir son boyuta sahiptir. Sağdaki örneklerde 64px değerinin tutarlı nihai boyut olmasını sağlamak için size-adjust kullanılmıştır.
Bu yayında, size-adjust adlı yeni bir CSS font-face açıklayıcısı incelenmektedir. Ayrıca daha sorunsuz bir kullanıcı deneyimi, tutarlı tasarım sistemleri ve daha tahmin edilebilir sayfa düzeni için yazı tipi boyutlarını düzeltmenin ve normalleştirmenin birkaç yolunu da gösterir. Önemli bir kullanım alanı, kümülatif düzen kaymasını (CLS) önlemek için web yazı tipi oluşturmanın optimize edilmesidir.
Sorunlu alanın etkileşimli demosunu burada bulabilirsiniz. Açılır menüyü kullanarak yazı tipini değiştirmeyi deneyin ve aşağıdakilere dikkat edin:
- Sonuçlardaki yükseklik farkları.
- Görsel olarak rahatsız edici içerik değişimleri.
- Etkileşimli hedef alanları hareket ettirme (açılır menü sürekli hareket ediyor!).
size-adjust ile yazı tipleri nasıl ölçeklendirilir?
Söz dizimine giriş:
@font-face {
font-family: "Adjusted Typeface";
size-adjust: 150%;
src: url(some/path/to/typeface.woff2) format('woff2');
}
Adjusted Typefaceadlı özel bir yazı tipi oluşturur.- Her glifin ölçeğini varsayılan boyutunun% 150'sine çıkarmak için
size-adjustkullanır. - Yalnızca içe aktarılan tek bir yazı tipini etkiler.
Yukarıdaki özel yazı tipini şu şekilde kullanın:
h1 {
font-family: "Adjusted Typeface";
}
Sorunsuz yazı tipi değiştirme özelliğiyle CLS'yi azaltma
Aşağıdaki gif'te, soldaki örnekleri ve yazı tipi değiştiğinde nasıl kayma olduğunu izleyin. Bu, tek bir başlık öğesi içeren küçük bir örnektir ve sorun oldukça belirgindir.
Yazı tipi oluşturmayı iyileştirmek için yazı tipi değiştirme harika bir tekniktir. Önce içeriği göstermek için hızlı yüklenen bir sistem yazı tipi oluşturun, ardından web yazı tipinin yüklenmesi bittiğinde bunu bir web yazı tipiyle değiştirin. Böylece, iki ağın en iyi özelliklerinden yararlanabilirsiniz: İçerik mümkün olan en kısa sürede görünür hale gelir ve kullanıcınızın içeriğe ayırdığı zamandan ödün vermeden güzel tasarımlı bir sayfaya sahip olursunuz. Ancak sorun, bazen web yazı tipi yüklendiğinde biraz farklı bir kutu yüksekliği sunulduğundan tüm sayfanın yerini değiştirmesidir.
@font-face kuralına size-adjust ekleyerek yazı tipi için genel bir glif düzenlemesi ayarlar. Bu doğru zamanlama, minimum düzeyde görsel değişikliğe,
yani sorunsuz bir değişime yol açacaktır. Sorunsuz bir değişim için elinizle ayarlayın veya Malte Ubl'in sunduğu bu boyut ayarlama hesaplayıcısını deneyin.
@font-face snippet'ini geri alın.
Bu yayının başında, yazı tipi boyutu sorununun
deneme yanılma yoluyla düzeltilmesi yer alıyordu. Cookie ve Arial içindeki aynı başlık, Press Start 2P ile aynı 64px öğesini doğal olarak oluşturana kadar kaynak kodda size-adjust otomatik olarak sürüklendi.
İki yazı tipini bir hedef yazı tipi boyutuna hizaladım.
@font-face {
font-family: 'Adjusted Arial';
size-adjust: 86%;
src: local(Arial);
}
@font-face {
font-family: 'Cookie';
size-adjust: 90.25%;
src: url(...woff2) format('woff2');
}
Yazı tipleri kalibre ediliyor
Yazı tipi ölçeğini normalleştirmeye yönelik kalibrasyon hedeflerini yazar olarak siz belirlersiniz. Times, Arial veya bir sistem yazı tipini normalleştirebilir, ardından özel yazı tiplerini eşleşecek şekilde ayarlayabilirsiniz. Bunun yerine, yerel yazı tiplerini indirdiklerinize uyacak şekilde ayarlayabilirsiniz.
size-adjust kalibrasyonu için stratejiler:
- Uzak hedef:
Yerel yazı tiplerini indirilen yazı tiplerine göre ayarlayın. - Yerel hedef:
İndirilen yazı tiplerini yerel hedef yazı tiplerine göre ayarlayın.
1. Örnek: Uzak hedef
Yerel olarak kullanılabilen bir yazı tipini uzak bir src özel yazı tipiyle eşleşecek şekilde ayarlayan aşağıdaki snippet'i inceleyin. Uzak özel yazı tipi, kalibrasyonun hedefidir. Marka yazı tipi şunlardan biri olabilir:
@font-face {
font-family: "Adjusted Regular Arial For Brand";
src: local(Arial);
size-adjust: 90%;
}
@font-face {
font-family: "Rad Brand";
src: url(some/path/to/a.woff2) format('woff2');
}
html {
font-family: "Rad Brand", "Adjusted Regular Arial For Brand";
}
Bu örnekte, yerel yazı tipi Arial, sorunsuz değiştirme için, yüklenen bir özel yazı tipini göz önünde bulundurarak ayarlama yapmaktadır.
Bu strateji, tasarımcılara ve geliştiricilere boyutlandırma ve tipografi için aynı yazı tipini sunma avantajına sahiptir. Marka, kalibrasyon hedefidir. Bu, tasarım sistemleri için çok iyi bir haber.
Malta'nın hesap makinesinin çalışma şekli de marka yazı tipinin hedef olarak belirlenmesidir. Bir Google Yazı Tipi seçtiğinizde, Arial'ın yazı tipiyle sorunsuz bir şekilde değiştirilebilmesi için nasıl ayarlanacağını hesaplar. Aşağıda, hesap makinesinden Roboto CSS'ye bir örnek verilmiştir. Bu örnekte, Arial'ın yüklenmesi ve "Roboto-fallback" adı verilmektedir:
@font-face {
font-family: "Roboto-fallback";
size-adjust: 100.06%;
src: local("Arial");
}
Platformlar arası düzenleme oluşturmak için bir marka yazı tipine göre ayarlanmış 2 yerel yedek yazı tipi sağlayan aşağıdaki örneği inceleyin.
@font-face {
font-family: "Roboto-fallback-1";
size-adjust: 100.06%;
src: local("Arial");
}
@font-face {
font-family: "Roboto-fallback-2";
size-adjust: 99.94%;
src: local("Arimo");
}
@font-face {
font-family: "Roboto Regular";
src: url(some/path/to/roboto.woff2) format('woff2');
}
html {
font-family: "Roboto Regular", "Roboto-fallback-1", "Roboto-fallback-2";
}
2. Örnek: Yerel hedef
Marka özel yazı tipini Arial'a uyacak şekilde ayarlayan aşağıdaki snippet'i inceleyin:
@font-face {
font-family: "Rad Brand - Adjusted For Arial";
src: url(some/path/to/a.woff2) format('woff2');
size-adjust: 110%;
}
html {
font-family: "Rad Brand - Adjusted For Arial", Arial;
}
Bu strateji, herhangi bir düzenleme yapmadan oluşturma ve gelen yazı tiplerini eşleşecek şekilde ayarlama avantajına sahiptir.
ascent-override, descent-override ve line-gap-override ile daha ince ayar
Genel glif ölçeklendirmesi, tasarımınız veya yükleme stratejileriniz için yeterli ayarlama yapmayacaksa size-adjust ile birlikte çalışan bazı ince ayar seçeneklerini aşağıda bulabilirsiniz. ascent-override, descent-override ve line-gap-override özellikleri şu anda Chromium 87 ve sonraki sürümler ile Firefox 89 ve sonraki sürümlerde uygulanmaktadır.
ascent-override
ascent-override tanımlayıcısı, bir yazı tipinin referans çizgisinin üzerindeki yüksekliği tanımlar.
@font-face {
font-family: "Ascent Adjusted Arial Bold";
src: local(Arial Bold);
ascent-override: 71%;
}
Kırmızı başlık (düzeltilmemiş) büyük A ve O harflerinin üzerinde boşluk içerirken mavi başlık, capheight değerinin genel sınırlayıcı kutuya tam olarak sığacağı şekilde ayarlanmıştır.
descent-override
descent-override açıklayıcısı, yazı tipinin referans değerinin altındaki yüksekliği tanımlar.
@font-face {
font-family: "Ascent Adjusted Arial Bold";
src: local(Arial Bold);
descent-override: 0%;
}
Kırmızı başlığın (düzenlenmemiş) D ve O referans değerlerinin altında boşluk vardır. Mavi başlık ise harfleri temel çizgiye oturacak şekilde ayarlanmıştır.
line-gap-override
line-gap-override açıklayıcısı, yazı tipinin çizgi aralığı metriğini tanımlar.
Bu, yazı tipi için önerilen çizgi boşluğu veya dış başlangıcıdır.
@font-face {
font-family: "Line Gap Adjusted Arial";
src: local(Arial);
line-gap-override: 50%;
}
Kırmızı başlıkta (düzenlenmemiş) line-gap-override simgesi yok. Aslında 0% oranında
yer vardır. Mavi başlık %50 oranında artırılarak harflerin üstünde ve altında
alan oluşturulmuştur.
Özet
Bu geçersiz kılmaların her biri, web'in güvenli metin sınırlayıcı kutusundan fazlalıkları kırpmak için ek bir yol sunar. Metin kutusunu hassas sunum için uyarlayabilirsiniz.
Sonuç
@font-face size-adjust CSS özelliği, yazı tipi değiştirme deneyimini iyileştirip kullanıcılarınız için düzen kaymasını önlemek amacıyla web düzenlerinizin metin sınırlayıcı kutusunu özelleştirmenin heyecan verici bir yoludur. Daha fazla bilgi için şu kaynaklara göz atın:
- CSS Yazı Tipleri Düzey 5 Spesifikasyonları
- MDN'de Boyut Ayarı
- Sorunsuz değiştirme @font-face oluşturucu
- web.dev'de Cumulative Layout Shift (CLS)
- Yazı Tipi Yükleme Etkisini Azaltmanın Yeni Yolu: CSS Yazı Tipi Tanımlayıcıları
Fotoğrafçı: Kristian Strand, Unsplash'ta