Font variabel adalah bentuk font tunggal yang mencakup seluruh family font, yang memungkinkan berbagai variasi gaya tanpa perlu menggunakan file terpisah untuk masing-masing font.

Bagaimana Font Variabel  Berbeda dengan Font Statis?

Biasanya, jenis huruf  seperti Arial, memiliki banyak file font yang terhubung dengannya seperti : Arial Regular, Arial Light, Arial Bold, dll. Bentuk huruf berada pada jenis  desain yang dibuat dalam gaya tertentu; huruf dalam bentuk  individual pada family font itu sendiri.

Masing-masing font ini menggunakan jenis huruf yang sama tetapi berbeda dalam satu atau dua atribut; bold font, misalnya, memiliki bobot (atau ketebalan) yang kapasitasnya lebih tinggi daripada font normal. Karena itu, jenis huruf mungkin memiliki 20, 30, atau lebih banyak file statis yang terkait dengannya.

Font variabel berisi semua varietas (dan banyak lagi) yang diwakili oleh file statis ini, tetapi hanya dalam satu file. Misalnya, jenis huruf Manufaktur termasuk 60 font, tetapi sebaliknya dapat diunduh sebagai satu font variabel:

cr. Envato

Bagaimana Cara Kerja Font Variabel?

Font variabel telah dirancang untuk memiliki satu atau lebih variasi huruf. variasi ini memungkinkan perancang untuk memasukkan nilai apa pun dalam rentang yang diberikan untuk aspek desain tertentu. Terkadang itu adalah tentang skala berat, dan terkadang itu juga adalah pilihan untuk kemiringan font.

Tidak seperti font statis, yang tersedia dalam beberapa opsi pilih, seorang desainer dapat memasukkan angka apa pun yang berlaku pada skala. Ingin berat font tepatnya 553? Tidak masalah.

Ada lima jenis standar dari huruf: berat, lebar, kemiringan, miring, dan ukuran optik, dan perancang juga dapat membuat variasi khusus untuk menentukan nilai lain yang tidak tercakup oleh opsi ini.

Semua variabel font memungkinkan Anda menentukan nilai untuk setidaknya satu dari variasi ini, tetapi sedikit yang menyertakan semuanya. Figuera Variable Font ini memungkinkan Anda memasukkan nilai khusus untuk lebar dan berat:

Font Variabel Figuera

cr.envanto

Manfaat dari Font Variabel

Font variabel menguntungkan desain web dan desain grafis:

Perubahan dalam desain

Menggunakan font variabel dalam desain grafis memungkinkan desainer untuk membuat perubahan cepat menggunakan slider, daripada mengotak-atik file font yang berbeda. Anda dapat menyesuaikan desain Anda lebih cepat dan lebih mudah, akan sangat berguna ketika Anda membuat perubahan secara langsung saat mendiskusikan proyek dengan klien Anda.

Ukuran File yang Lebih Kecil dan Lebih Sedikit Permintaan HTTP

Sebagian besar situs web menggunakan 6-8 variasi font, masing-masing memerlukan permintaan HTTP dan unduhan sekitar 20kB (atau lebih). Menggunakan font variabel mengurangi ini menjadi satu permintaan HTTP dan ukuran unduhan keseluruhan yang lebih kecil. Ini mengurangi waktu pemuatan, meningkatkan pengalaman pengguna.

Desain Tanpa Batas

Font variabel memungkinkan perancang untuk menggunakan berbagai berat dan lebar tanpa memerlukan banyak file. Ini memungkinkan keputusan desain yang lebih baik; Anda dapat menggunakan sebanyak mungkin ukuran, gaya, dan bobot sesuai keinginan tanpa memengaruhi kinerja situs. Desainer dapat mendesain untuk gaya dan keterbacaan tanpa khawatir tentang waktu pemuatan.

Ini Lebih Mudah

Muak harus mengunduh dan menginstal 20 file terpisah setiap kali Anda ingin mencoba font baru? Kami juga! Font variabel just make sense. Jauh lebih mudah untuk menemukan desain yang Anda sukai dengan memindahkan beberapa slider daripada mencoba banyak versi yang berbeda.

Cara Menggunakan Font Variabel sebagai Desainer Grafis

Anda dapat menggunakan font variabel dalam Adobe Photoshop dan Illustrator, tetapi tidak dengan InDesign (belum – Adobe mengatakan mereka sedang mengerjakannya). Versi terbaru menyertakan beberapa contoh variabel font sehingga Anda dapat memulai bahkan jika Anda belum membelinya.

Font variabel yang disertakan adalah Konsep Variabel Acumin, Konsep Minion Variable, Konsep Myriad Variable, Source Sans Variable, Source Serif Variable, dan Variabel Kode Sumber.

Menggunakan font variabel itu mudah:

  • Di Photoshop, pilih font variabel dari menu font normal. Anda akan melihat bilah geser muncul di bagian bawah panel Tipe Layer Properties.
  • Di Illustrator, pilih font variabel Anda dari menu font normal, lalu klik pada simbol T-ganda di panel karakter. Menu pop-up akan muncul ketika slider menyala.

Itu dia! Saatnya untuk mulai bereksperimen.

Cara Menggunakan Font Variabel di Situs Web

Desainer web dapat menggunakan CSS untuk mengontrol font variabel. Saat menggunakan standar axes, desainer dapat menggunakan properti font-style, font-weight, font-stretch, dan font-optical-sizing untuk menyesuaikan teks (variasi lainnya dapat digunakan dengan menggunakan properti pengaturan variasi font).

Properti ini mengubah gaya, berat (atau tebal), peregangan (lebar), dan ukuran optik (memungkinkan peramban untuk mengoptimalkan tampilan dengan ukuran berbeda). Ini memungkinkan fleksibilitas tinggi: font-weight, misalnya, dapat mengambil nilai apa pun antara 1 dan 1000 (termasuk desimal, seperti 550,5).