Penyesuaian ukuran CSS untuk @font-face

Saat font web dimuat, Anda kini dapat menyesuaikan skalanya, untuk menormalisasi ukuran font dokumen dan mencegah pergeseran tata letak saat beralih antar-font

Adam Argyle

Pertimbangkan demo berikut, dengan font-size adalah 64px yang konsisten, dan satu-satunya perbedaan antara setiap header ini adalah font-family. Contoh di sebelah kiri belum disesuaikan dan memiliki ukuran akhir yang tidak konsisten. Contoh di sebelah kanan menggunakan size-adjust untuk memastikan 64px adalah ukuran akhir yang konsisten.

Dalam contoh ini, alat debug tata letak petak CSS Chrome DevTools digunakan untuk menampilkan tinggi.

Postingan ini membahas deskripsi font-face CSS baru yang disebut size-adjust. Panduan ini juga menunjukkan beberapa cara untuk memperbaiki dan menormalisasi ukuran font demi pengalaman pengguna yang lebih lancar, sistem desain yang konsisten, dan tata letak halaman yang lebih mudah diprediksi. Salah satu kasus penggunaan yang penting adalah mengoptimalkan rendering font web untuk mencegah perubahan tata letak kumulatif (CLS).

Browser Support

• 92
• 92
• 92
• 17

Source

Berikut adalah demo interaktif ruang masalah. Coba ubah typeface dengan dropdown dan amati:

1. Perbedaan tinggi pada hasil.
2. Pergeseran konten yang mengganggu secara visual.
3. Memindahkan area target interaktif (dropdown berpindah-pindah).

Istilah utama: Jenis font vs Typeface: Typeface disebut dengan nama jenisnya ditambah font face-nya. Helvetica Bold mengacu pada typeface tebal tertentu, sedangkan Helvetica mengacu secara umum pada seluruh kelompok yang terdiri dari 8+ typeface (normal, tebal, miring, dll.). Dengan CSS @font-face, Anda akan menangani typeface, meskipun untuk menggunakannya, Anda perlu menulis font-family.

Cara menskalakan font dengan size-adjust

Pengantar sintaksis:

@font-face {
  font-family: "Adjusted Typeface";
  size-adjust: 150%;
  src: url(some/path/to/typeface.woff2) format('woff2');
}

1. Membuat typeface kustom bernama Adjusted Typeface.
2. Menggunakan size-adjust untuk meningkatkan skala setiap glyph hingga 150% dari ukuran defaultnya.
3. Hanya memengaruhi satu typeface yang diimpor.

Gunakan typeface kustom di atas seperti ini:

h1 {
  font-family: "Adjusted Typeface";
}

Peringatan: Jika judul kedua dalam demo di atas tidak lebih besar dari judul pertama, browser Anda tidak mendukung size-adjust.

Mengurangi CLS dengan penukaran font yang lancar

Dalam gif berikut, lihat contoh di sebelah kiri dan bagaimana terjadi pergeseran saat font diubah. Ini hanyalah contoh kecil dengan satu elemen judul dan masalahnya sangat terlihat.

Contoh di sebelah kiri memiliki pergeseran tata letak, sedangkan contoh di sebelah kanan tidak.

Untuk meningkatkan rendering font, teknik yang bagus adalah penggantian font. Render font sistem yang dimuat dengan cepat untuk menampilkan konten terlebih dahulu, lalu ganti dengan font web setelah font web selesai dimuat. Hal ini memberikan Anda unsur terbaik dari kedua sistem tersebut: konten terlihat sesegera mungkin, dan Anda mendapatkan halaman bergaya menarik tanpa mengorbankan waktu pengguna untuk melihat konten. Namun, masalahnya adalah terkadang saat font web dimuat, seluruh halaman akan bergeser karena ditampilkan dengan ukuran tinggi kotak yang sedikit berbeda.

lebih banyak konten berarti lebih banyak potensi pergeseran tata letak saat font diganti

Dengan menempatkan size-adjust dalam aturan @font-face, penyesuaian glyph global akan ditetapkan untuk font face. Menentukan waktu yang tepat akan menghasilkan perubahan visual yang minimal, sehingga transisi berjalan lancar. Untuk membuat pertukaran yang lancar, sesuaikan secara manual atau coba kalkulator penyesuaian ukuran ini oleh Malte Ubl.

Pilih Google Web Font, dapatkan kembali cuplikan @font-face yang telah disesuaikan sebelumnya.

Di awal postingan ini, perbaikan masalah ukuran font dilakukan dengan cara coba-coba. size-adjust didorong dalam kode sumber hingga header yang sama di Cookie dan Arial merender 64px yang sama seperti yang dilakukan Press Start 2P secara alami. Saya menyelaraskan dua font ke ukuran font target.

@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');
}

Mengalibrasi font

Anda sebagai penulis menentukan target kalibrasi untuk menormalisasi skala font. Anda dapat menormalisasi Times, Arial, atau font sistem, lalu menyesuaikan font kustom agar cocok. Atau, Anda dapat menyesuaikan font lokal agar cocok dengan font yang Anda download.

Strategi untuk kalibrasi size-adjust:

1. Target jarak jauh:
   Sesuaikan font lokal dengan font yang didownload.
2. Target lokal:
   Menyesuaikan font yang didownload dengan font target lokal.

Contoh 1: Target jarak jauh

Pertimbangkan cuplikan berikut yang menyesuaikan font yang tersedia secara lokal agar sesuai dengan ukuran font kustom src jarak jauh. Font kustom jarak jauh adalah target untuk kalibrasi, mungkin font merek:

@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";
}

Dalam contoh ini, font lokal Arial disesuaikan untuk mengantisipasi font kustom yang dimuat, agar penggantiannya lancar.

Strategi ini memiliki keunggulan dalam menawarkan font yang sama kepada desainer dan developer untuk ukuran dan tipografi. Merek adalah target kalibrasi. Ini adalah kabar baik untuk sistem desain.

Memiliki typeface merek sebagai target juga merupakan cara kerja kalkulator Malte. Pilih Google Fonts dan font tersebut akan menghitung cara menyesuaikan Arial agar dapat ditukar dengan lancar. Berikut adalah contoh CSS Roboto dari kalkulator, tempat Arial dimuat dan diberi nama "Roboto-fallback":

@font-face {
    font-family: "Roboto-fallback";
    size-adjust: 100.06%;
    src: local("Arial");
}

Peringatan: Urutan font-family sangat penting. Di sinilah urutan dan prioritas ditentukan. Pastikan typeface yang paling Anda inginkan berada di urutan pertama. Selain itu, local(Arial) mungkin tidak tersedia di semua perangkat pengguna Anda, sehingga penting untuk menyediakan beberapa penggantian dalam font-family.

Untuk membuat penyesuaian lintas platform sepenuhnya, lihat contoh berikut yang menyediakan 2 font penggantian lokal yang disesuaikan untuk mengantisipasi font merek.

@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";
}

Contoh 2: Penargetan lokal

Pertimbangkan cuplikan berikut yang menyesuaikan font kustom merek agar cocok dengan Arial:

@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;
}

Strategi ini memiliki keunggulan dalam merender tanpa penyesuaian, lalu menyesuaikan font yang masuk agar cocok.

Penyesuaian yang lebih baik dengan ascent-override, descent-override, dan line-gap-override

Jika penskalaan generik glyph tidak cukup untuk strategi desain atau pemuatan Anda, berikut beberapa opsi penyesuaian yang lebih baik yang berfungsi bersama size-adjust. Properti ascent-override, descent-override, dan line-gap-override saat ini diimplementasikan di Chromium 87+, dan Firefox 89+.

ascent-override

Browser Support

• 87
• 87
• 89
• 

Source

Deskripsi ascent-override menentukan tinggi di atas garis dasar font.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  ascent-override: 71%;
}

Judul merah (belum disesuaikan) memiliki ruang di atas huruf kapital A dan O, sedangkan judul biru telah disesuaikan sehingga tinggi kapitalnya pas dengan keseluruhan kotak pembatas.

descent-override

Browser Support

• 87
• 87
• 89
• 

Source

Deskripsi descent-override menentukan tinggi di bawah garis dasar font.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  descent-override: 0%;
}

Judul merah (tidak disesuaikan) memiliki ruang di bawah garis dasar D dan O, sedangkan judul biru telah disesuaikan sehingga hurufnya pas di garis dasar.

line-gap-override

Browser Support

• 87
• 87
• 89
• 

Source

Deskriptor line-gap-override menentukan metrik jarak baris untuk font. Ini adalah jarak baris atau leading eksternal yang direkomendasikan font.

@font-face {
  font-family: "Line Gap Adjusted Arial";
  src: local(Arial);
  line-gap-override: 50%;
}

Judul merah (tidak disesuaikan) tidak memiliki line-gap-override, pada dasarnya berada di 0%, sedangkan judul biru telah disesuaikan ke atas sebesar 50%, sehingga menciptakan ruang di atas dan di bawah huruf.

Menggabungkan semuanya

Setiap penggantian ini menawarkan cara tambahan untuk memangkas kelebihan dari kotak pembatas teks aman web. Anda dapat menyesuaikan kotak teks untuk presentasi yang akurat.

Peringatan: Jika salah satu demo di atas tidak menunjukkan perbedaan, browser Anda tidak mendukung penggantian.

Kesimpulan

Fitur CSS @font-face size-adjust adalah cara yang menarik untuk menyesuaikan kotak pembatas teks tata letak web Anda guna meningkatkan pengalaman pertukaran font, sehingga menghindari pergeseran tata letak bagi pengguna. Untuk mempelajari lebih lanjut, lihat referensi berikut:

• Spesifikasi CSS Fonts Level 5
• Size Adjust di MDN
• Generator @font-face swap yang lancar
• Cumulative Layout Shift (CLS) di web.dev
• Cara Baru untuk Mengurangi Dampak Pemuatan Font: Deskriptor Font CSS