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

Pertimbangkan hal berikut demo dengan font-size merupakan 64px yang konsisten, dan satu-satunya perbedaan di 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 memiliki ukuran akhir yang konsisten.

Postingan ini membahas deskripsi font-face CSS baru yang disebut size-adjust. Contoh ini juga menunjukkan beberapa cara untuk memperbaiki dan menormalkan ukuran font untuk pengalaman pengguna yang lebih lancar, sistem desain yang konsisten, dan lebih dapat diprediksi tata letak laman. Satu kasus penggunaan yang penting adalah mengoptimalkan rendering {i>font<i} web untuk mencegah kumulatif pergeseran tata letak (CLS).

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

1. Perbedaan tinggi dalam hasil.
2. Perubahan konten yang mencolok secara visual.
3. Menggerakkan area target interaktif (menu dropdown melompat-lompat!).

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% ukuran defaultnya.
3. Hanya memengaruhi satu typeface yang diimpor.

Gunakan typeface kustom di atas seperti ini:

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

Memitigasi CLS dengan pertukaran font yang lancar

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

Untuk meningkatkan rendering font, teknik yang bagus adalah penggantian font. Merender pemuatan cepat {i>font<i} sistem untuk menampilkan konten terlebih dahulu, lalu menukarnya dengan {i>font<i} web saat {i>font<i} web selesai dimuat. Hal ini memberi Anda yang terbaik dari keduanya: terlihat sesegera mungkin, dan Anda akan mendapatkan laman dengan gaya yang rapi tanpa mengorbankan waktu pengguna untuk konten. Namun masalahnya, kadang-kadang ketika {i>font<i} web dimuat, {i>font<i} web akan menggeser seluruh halaman karena ditampilkan pada ukuran tinggi kotak yang sedikit berbeda.

Dengan menempatkan size-adjust di aturan @font-face, kode ini akan menetapkan glyph global penyesuaian untuk jenis font. Pengaturan waktu yang benar ini akan menghasilkan visualisasi yang minimal {i>changelog<i}, {i>swap <i}yang mulus. Untuk membuat pertukaran yang lancar, sesuaikan secara manual atau coba kalkulator penyesuaian ukuran ini oleh Malte Ubl.

Di awal postingan ini, perbaikan masalah ukuran font dilakukan dengan 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');
}

Melakukan kalibrasi font

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

Strategi untuk kalibrasi size-adjust:

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

Contoh 1: Target jarak jauh

Pertimbangkan cuplikan berikut yang menyesuaikan font yang tersedia secara lokal agar ukurannya cocok dengan font kustom src jarak jauh. {i>Font<i} khusus jarak jauh adalah target untuk kalibrasi, font merek mungkin:

@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, untuk penggantian yang lancar.

Strategi ini memiliki keuntungan dalam menawarkan hal yang sama kepada desainer {i>font<i} untuk penentuan ukuran dan tipografi. Brand adalah target kalibrasinya. Ini adalah berita baik untuk sistem desain.

Menetapkan jenis huruf merek sebagai target juga merupakan cara kerja kalkulator Malte. Pilih Font Google agar Anda dapat menyesuaikan Arial dengan lancar menukarnya dengannya. Berikut ini contoh CSS Roboto dari kalkulator, dengan Arial dimuat dan diberi nama "Roboto-fallback":

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

Untuk membuat penyesuaian lintas platform sepenuhnya, lihat contoh berikut yang memberikan 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: Target 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 rendering tanpa penyesuaian apa pun, lalu menyesuaikan font yang masuk agar cocok.

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

Jika penskalaan glyph umum tidak cukup penyesuaian untuk desain atau pemuatan Anda berikut ini adalah beberapa opsi tuning yang lebih baik yang bisa digunakan size-adjust. Properti ascent-override, descent-override, dan line-gap-override saat ini diterapkan di Chromium 87+, dan Firefox 89+.

ascent-override

Deskripsi ascent-override menentukan tinggi di atas dasar pengukuran {i>font<i}.

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

Judul merah (tidak disesuaikan) memiliki spasi di atas huruf besar A dan O, sedangkan judul biru telah disesuaikan sehingga tinggi huruf besar-nya pas dengan keseluruhan kotak pembatas.

descent-override

Deskripsi descent-override menentukan tinggi di bawah dasar pengukuran {i>font<i}.

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

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

line-gap-override

Deskripsi line-gap-override menentukan metrik spasi baris untuk font. Ini adalah font-gap baris yang direkomendasikan atau awalan eksternal.

@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 0%, sedangkan judul biru telah disesuaikan naik sebesar 50%, sehingga menciptakan ruang di atas dan di bawah hurufnya.

Menggabungkan semuanya

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

Kesimpulan

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

• Font CSS Level 5 Spesifikasi
• Penyesuaian Ukuran aktif MDN
• Tukar @font-face dengan lancar generator
• Pergeseran Tata Letak Kumulatif (CLS) di web.dev
• Cara Baru Untuk Mengurangi Dampak Pemuatan Font: Deskripsi Font CSS

Foto oleh Kristian Strand di Unsplash