Penyesuaian ukuran CSS untuk @font-face

Saat font web dimuat, kini Anda dapat menyesuaikan skalanya, untuk menormalkan 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 penjelasan tampilan font CSS baru yang disebut size-adjust. Tutorial ini juga menunjukkan beberapa cara untuk memperbaiki dan menormalisasi ukuran font untuk pengalaman pengguna yang lebih lancar, sistem desain yang konsisten, dan tata letak halaman yang lebih dapat diprediksi. Satu kasus penggunaan yang penting adalah mengoptimalkan rendering font web untuk mencegah Cumulative layout shift (CLS).

Dukungan Browser

  • 92
  • 92
  • 92
  • 17

Sumber

Berikut adalah demo interaktif untuk ruang masalah. Coba ubah jenis huruf dengan menu {i>dropdown<i} dan amati:

  1. Perbedaan tinggi dalam hasil.
  2. Perubahan konten yang mengagetkan secara visual.
  3. Memindahkan area target interaktif (menu {i>dropdown<i} akan melompat-lompat!).

Cara menskalakan font dengan size-adjust

Pengantar {i>syntax<i}:

@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 jenis huruf yang diimpor.

Gunakan typeface kustom di atas seperti ini:

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

Mengurangi CLS dengan pertukaran font yang lancar

Pada gif berikut, lihat contoh di sebelah kiri dan bagaimana terjadinya pergeseran saat font diubah. Ini hanyalah contoh kecil dengan elemen judul tunggal dan masalah ini sangat terlihat.

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

Untuk meningkatkan rendering font, teknik yang bagus adalah pertukaran font. Lakukan rendering font sistem yang dimuat dengan cepat untuk menampilkan konten terlebih dahulu, lalu tukar dengan font web saat font web selesai dimuat. Dengan begitu, Anda akan mendapatkan yang terbaik dari keduanya: konten akan terlihat sesegera mungkin, dan Anda mendapatkan halaman yang ditata dengan baik tanpa mengorbankan waktu pengguna untuk membuat konten. Namun, masalahnya adalah terkadang saat font web dimuat, font tersebut menggeser seluruh halaman karena ditampilkan pada ukuran tinggi kotak yang sedikit berbeda.

lebih banyak konten sama dengan lebih banyak potensi pergeseran tata letak saat font diganti

Dengan menempatkan size-adjust dalam aturan @font-face, kode ini akan menetapkan penyesuaian glyph global untuk tampilan font. Pengaturan waktu yang tepat akan menghasilkan perubahan visual yang minimal, pertukaran yang mulus. Untuk membuat pertukaran yang lancar, sesuaikan tangan atau coba kalkulator penyesuaian ukuran dari Malte Ubl.

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

Pada awal postingan ini, perbaikan masalah ukuran font dilakukan melalui uji coba dan error. size-adjust didorong dalam kode sumber hingga header yang sama di Cookie dan Arial merender 64px yang sama seperti Press Start 2P secara alami. Saya meratakan 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');
}

Mengkalibrasi font

Anda sebagai penulis akan 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 cocok dengan yang Anda download.

Strategi untuk kalibrasi size-adjust:

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

Contoh 1: Target jarak jauh

Pertimbangkan cuplikan berikut yang menyesuaikan font yang tersedia secara lokal ke ukuran yang cocok dengan font kustom src jarak jauh. Font kustom jarak jauh merupakan 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, agar pertukaran yang lancar.

Strategi ini memiliki keuntungan yaitu menawarkan font yang sama untuk ukuran dan tipografi kepada desainer dan developer. Merek adalah target kalibrasi. Ini adalah berita bagus untuk sistem desain.

Memiliki jenis huruf merek sebagai target juga merupakan cara kerja kalkulator Malte. Pilih Google Font dan fitur ini akan menghitung cara menyesuaikan Arial agar dapat ditukar dengan lancar. Berikut ini 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");
}

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: Target lokal

Pertimbangkan cuplikan berikut yang menyesuaikan font khusus 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, lalu menyesuaikan font 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 strategi pemuatan Anda, berikut beberapa opsi penyesuaian yang lebih baik yang dapat digunakan bersama dengan size-adjust. Properti ascent-override, descent-override, dan line-gap-override saat ini diterapkan di Chromium 87+, dan Firefox 89+.

gunting di atasnya dan meniup penggantian kata, menunjukkan area yang dapat dipangkas oleh fitur

ascent-override

Dukungan Browser

  • 87
  • 87
  • 89
  • x

Sumber

Deskripsi ascent-override menentukan tinggi di atas dasar pengukuran 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 penutup sangat pas dengan kotak pembatas keseluruhan.

descent-override

Dukungan Browser

  • 87
  • 87
  • 89
  • x

Sumber

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

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

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

line-gap-override

Dukungan Browser

  • 87
  • 87
  • 89
  • x

Sumber

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

@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 naik sebesar 50%, sehingga menciptakan ruang di atas dan di bawah huruf yang sesuai.

Penutup

Masing-masing 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 yang menarik untuk menyesuaikan kotak pembatas teks tata letak web Anda untuk meningkatkan pengalaman pertukaran font sehingga menghindari pergeseran tata letak bagi pengguna. Untuk mempelajari lebih lanjut, lihat referensi ini:

Foto oleh Kristian Strand di Unsplash