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 di mana 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 deskriptor font-face CSS baru yang disebut size-adjust. Bagian ini juga menunjukkan beberapa cara untuk mengoreksi dan menormalisasi ukuran font guna memberikan pengalaman pengguna yang lebih lancar, sistem desain yang konsisten, dan tata letak halaman yang lebih dapat diprediksi. Salah satu kasus penggunaan penting adalah mengoptimalkan rendering font web untuk mencegah pergeseran tata letak kumulatif (CLS).

Browser Support

  • Chrome: 92.
  • Edge: 92.
  • Firefox: 92.
  • Safari: 17.

Source

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

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

Cara menyesuaikan skala 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 memperbesar setiap glif hingga 150% dari ukuran defaultnya.
  3. Hanya memengaruhi satu typeface yang diimpor.

Gunakan typeface kustom di atas seperti ini:

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

Mengurangi CLS dengan penggantian font yang lancar

Pada GIF berikut, lihat contoh di sebelah kiri dan bagaimana pergeseran terjadi 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. Merender font sistem yang dimuat dengan cepat untuk menampilkan konten terlebih dahulu, lalu menukarnya dengan font web saat font web selesai dimuat. Hal ini memberikan Anda yang terbaik dari kedua hal tersebut: konten terlihat sesegera mungkin, dan Anda mendapatkan halaman yang ditata dengan baik tanpa mengorbankan waktu pengguna untuk konten. Namun, masalahnya adalah terkadang saat font web dimuat, font tersebut menggeser seluruh halaman karena ditampilkan dengan ukuran tinggi kotak yang sedikit berbeda.

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

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

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

Di awal postingan ini, masalah ukuran font diperbaiki dengan metode 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:
    Menyesuaikan font lokal ke font yang didownload.
  2. Target lokal:
    Menyesuaikan font yang didownload ke arah 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. 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 menyesuaikan untuk mengantisipasi font kustom yang dimuat, untuk penggantian yang lancar.

Strategi ini memiliki keunggulan karena menawarkan font yang sama kepada desainer dan developer untuk penentuan 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 Font Google dan font tersebut akan menghitung cara menyesuaikan Arial agar dapat ditukar dengan lancar. Berikut adalah 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 menyediakan 2 font pengganti 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 dalam merender 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 umum glyph tidak cukup untuk menyesuaikan desain atau strategi pemuatan Anda, berikut beberapa opsi penyesuaian yang lebih baik yang berfungsi bersama dengan size-adjust. Properti ascent-override, descent-override, dan line-gap-override saat ini diterapkan di Chromium 87+ dan Firefox 89+.

gunting di atas dan meniup kata yang diganti, yang menunjukkan area yang dapat dipangkas oleh fitur

ascent-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: not supported.

Source

Deskriptor 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 (tidak disesuaikan) memiliki ruang di atas huruf kapital A dan O, sedangkan judul biru telah disesuaikan sehingga tinggi huruf kapitalnya pas dengan keseluruhan kotak pembatas.

descent-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: not supported.

Source

Deskriptor 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 berada tepat di garis dasar.

line-gap-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: not supported.

Source

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

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

Judul merah (tanpa penyesuaian) tidak memiliki line-gap-override, pada dasarnya berada di 0%, sedangkan judul biru telah disesuaikan hingga 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.

Kesimpulan

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

Foto oleh Kristian Strand di Unsplash