Cara Menggunakan Font Variable pada Web

() translation by (you can also view the original English article)

Font variabel dikembangkan sebagai upaya bersama dari empat teknologi terbesar yang terlibat dalam desain jenis Apple, Google, Microsoft, dan Adobe. Seperti namanya, font variabel memungkinkan desainer untuk mendapatkan jumlah variant font tidak terbatas dari file font yang sama. Dengan cara ini menjadi mungkin untuk menyesuaikan jenis huruf ke perangkat yang berbeda, viewport, orientasi, dan solusi desain lainnya.

Mengapa menggunakan Font Variabel?

Font fariabel secara signifikan mengurangi format font ringan saat ini. Font web saat ini tidak flesibel dan tidak memiliki skala yang baik; mereka hanya memberikan kami beberapa gaya tetap dengan nama seperti "Light", "Bold", atau "Extra Bold". Bahkan ada tipografi yang hanya memiliki satu varian berat atau miring. Namun, dengan font yang berbeda, kami memiliki akses ke fleksibilitas bobot tak terbatas, miring, tinggi-x, slab, pembulatan, dan antribut tipografi lainnya.

Lebih baik lagi, font variabel meningkatkam kinerja. Font web seperti yang kita tahu mereka membutuhkan setiap varian font untuk disimpan dalam file terpisah. Misalnya, ini adalah bagaimana folder dari font web Roboto terlihat.

Font variabel menggunakan file font tunggal yang harus dimuat oleh browser satu kali. Setelah itu diimuat dapat melayani semua varian dari hanya satu biner.

Jadi, inilah perbandingan singkat:

Roboto: dua belas file font, dua belas varian.
Font variabel: satu file font, varian tidak terbatas.

Seperti yang sudah Anda bayangkan, opsi tipografi kami tumbuh luar biasa dengan font yang bervariasi.

Format Font Open Type

Jadi apa format file yang digunakan font variabe? Menurut dokumen resmi:

"Font OpenType mungkin memiliki ekstensi .OTF atau .TTF, tergantung pada jenis garis di font dan keinginan pencipta kompatibilitas pada sistem tanpa dukungan Open Type asli."

Agar benar-benar akurat, font variabel diperkenalkan pada versi 1.8 dari spesifikasi file font OpenType. OpenType adalah ekstensi dari format font True Type, oleh karena itu font variabel tersedia baik sebagai file .otf atau.ttf.

Design Axes

Spesifikasi file font OpenType baru dilengkapi dengan teknologi baru yang di sebut OpenType Font Variations yang memungkinkan kita untuk menginterpolasi font bersama berbagi kapak desain - hingga 64.000 menurut Blog Typekit Adobe.

Spesifikasi OpenType 1.8 mendefinisikan lima label sumbu yang terdaftar.

weight <wght>
widht <wdth>
optical size <opsz>
slant <slnt>
Italic <ital>

Selain itu, desainer tipe juga dapat menentukan kapak kustom bersama dengan tag empat karakternya sendiri di tabel "nama" dari file font.

Di bawah ini, Anda dapat melihat ilustrasi hebat tentang cara kerja kapak desain ( dari artikel john Hudson's di Medium.com , dirujuk oleh Typekit sebagai pengumuman non-resmi font variabel). Ini menunjukan font variabel tiga sumbu dengan weight, widht, dan optical size axes.

Design axes of a variable font — John Hudson

Mesin terbang di bagian tengah yang mewakili set garis besar yang disimpan di font, mesin terbang hijau mewakili ekstrim dari tiga sumbu, dan mesin terbang oranye mewakili posisi sudut.

Seluruh kubus mewakili ruang desain yang dapat kita akses jika kita menggunakan font variabe tiga sumbu ini. Ini karena kubus hanya karena font memiliki tiga dimensi (weight, width, optical size) Dengan fewer axes, kita akan bergerak ke bawah menuju rectangle (2-axis) atau garis (1-axis) dan dengan lebih sedikit axes, kita akan bergerak keatas ke multi-dimensional hyperspace

Dan tentu saja, a real-life-3-axis variable font tidak akan selalu menjadi a rectangular cuboid, karena perbedaan axes dalam banyak kasus memiliki the same length.

Named Instances

Font variabel masih memungkinkan perancang untuk mendefinisikan contoh bernama - varian font khusus di antara jumlah opsi yang tidak terbatas. Misalnya, Adobe Variable Font Prototype berisi two axes (weight and control) dan eight named instances ( Extra Light, Light, Regular Semibold, Bold, Black, Black Medium Contrast, Black High Contrast).

Dinamakan hal yang lebih penting jika kita ingin menggunakan variabel font dengan program desain seperti Adobe Illustrator. Di web, kita dapar dengan mudah menghasilkan contoh apa pun (bernama atau tanpa nama) dengan CSS (misalnya di Font Adobe Variabel, contoh bernama Ekstra Cahaya mengambil nilai minimun dari berat dan kontras).

Menambahkan Font Variabel ke Halaman Web

Kita dapat menambahkan font variabel ke situs web menggunakan aturan @font-face di bagian atas file CSS.

Sebagai contoh, kita dapat menambahkan font variabel Avenir Next dengan aturan CSS berikut:

1	@font-face {
2	font-family: "Avenir Next Variable";
3	src: url("AvenirNext_Variable.ttf") format("truetype");
4	}

Anda dapat menemukan lebih banyak font variabel di situs Axis Praxis (juga mempunyai playground untuk font variabel), di halaman GitHub dari berbagai jenis perusahaan desain (misalnya MonoType, Type Network), dan Typekit juga telah mulai menerbitkan versi font variabel dari keluarga Adobe Original yang paling populer.

Catatan: tidak setiap font OpenType yang Anda temukan di web adalah font variabel (hanya diperkenalkan dengan versi 1.8).

Setting Font Variations With CSS

Untuk menemukan variasi font, kita dapat menggunakan properti CSS font-variasi-settings yang di perkenalkan dengan Modul Font CSS Level.4 . Ini adalah properti tingkat rendah yang memungkinkan kita untuk mengontrol font variabel dengan menentukan nilai untuk setiap sumbu.

Contoh 1 : Avenir Next

The Avenir Next variabel font yang berisi dua sumbu desain: weight dan wight-keduanya sumbu terdaftar. Avenir Selanjutnya juga memiliki delapan contoh bernama (Reguler, Medium, Bold, Heavy, Condensed, Medium Condensed, Bold Condensed, Heavy Condensed).

CSS lengkap ( milik variasi font tanpa nama acak) terlihat seperti ini:

body {
    font-family: "Avenir Next Variable";
    color: rgb(0, 0, 0);
    font-size: 148px;
    font-variation-settings: 'wght' 631.164, 'wdth' 88.6799;
}

Kita dapat menggunakan nilai apa pun (bahkan angka float) untuk sumbu antara nilai min dan maks. Dalam kasus Avenir Selanjutnya, kita dapat mengunakan kisaran [400, 900] untuk berat dan kisaran [75, 100] untuk sumbu lebar.

Di mana menemukan kisarannya? File berisi tabel font variation font (fvar) yang menyimpan data yang diperlukan. Namun, untuk mengakses informasi itu, kita perlu melihat isi file font dengan alat seoerti FontView . Terkadang dokumentasi font berisi rentang, tetapi sayangnya tidak selalu terjadi. Kabar visi adalah situs web Axis Praxis yang berisi nilai minimum untuk semua variabel font yang dimilikinya.

Contoh 2 Decovar

Decovar adalah salah satu font variabel yang paling serba guna yang saat ini ada. Anda dapat menemukannya di Axis Praxis , di GitHub , dan juga memiliki demo page di situs web TypeNetwork. Decover berisi satu kapak berat terdaftar (berat) dan empay belas sumbu, dan juga memiliki tujuh belas contoh bersama.

Dari dokumen GitHub Decovar, berikut ini beberpa varian yang bisa kita capai dengan font variabel 15-sumbu:

CSS yang perlu kita gunakan mirip dengan contoh sebelumnya. Di sini, kita harus mendefinisikan semua lima belas sumbu (sebaris, yang dicukur, lempengan bulat, garis, terminal cacing, kerangka sejajar, terminal inline terbuka, terminal inline, cacing, berat, berkobar, bulat, kerangka cacing, lempengan, bercabang).

div {
    font-family: Decovar;
    color: white;
    background-color: rgb(0, 162, 215);
    font-size: 157.12px;
    text-align: left;
    padding-top: 20px;
    font-variation-settings: 'INLN' 285.094, 'TSHR' 346.594, 
        'TRSB' 786.377, 'SSTR' 84.268, 'TWRM' 200, 'SINL' 84.268, 
        'TOIL' 0, 'TINL' 91.983, 'WORM' 0, 'wght' 400, 'TFLR' 0, 
        'TRND' 0, 'SWRM' 0, 'TSLB' 277.155, 'TBIF' 0;
}

Catatan: kita harus menentukan nilai untuk semua sumbu dalam properti font-variation-settings bahkan yang tidak ingin kita gunakan

Dalam kasus Decovar, kita dapat menggunakan 0 sebagai nilai untuk sumbu yang tidak kita minati; ini akan diberikan dengan nilai default. Ini tidak selalu terjadi, karena tergantung pada rentang font yang digunakan untuk sumbu yang berbeda. Decover mudah, karena menggunakan rentang 0-1000 untuk semua sumbu, dan 0 adalah nilai default untuk semua.

Anda dapat menghasilkan deklarasi pengaturan font-variation-settings yang serupa dengan Axis Praxis , Anda tidak perlu menghitung nilai sendiri. CSS di atas menghasilkan varian font berikut:

High-Level CSS Properties

The font-variasi-pengaturan properti adalah tingkat rendah dan sesuai dengan rekomendasi W3C hanya harus digunakan jika metode lain tidak tersedia. Apa sebenarnya artinya ini?

Sesuai dengan spesifikasi CSS 4 , kita akan dapat mengendalikan sumbu terdaftar dengan properti CSS tingkat lebih tinggi di masa depan, yaitu:

Font-weight (will control the wght axis)
Font-stretch (will control the wdth axis)
font-style (will control the slnt and ital axes)
font-optical-sizing (will control the opsz axis)

Tiga properti pertama ada sejak CSS2, namun spesifikasi CSS4 memperluas penggunaanya. Kami akan dapat menggunakannya tidak hanya dengan kata kunci yang telah ditentukan (misalnya normal atau bold untuk font-weight atau angka bulat (misalnya 400 , 600 , 800 , dll.), Tetapi juga dengan semua angka pada skala yang telah ditentukan (misalnya, font-weight akan berkisar antara 1 dan 1000 & font-strech akan berkisar antara 50% dan 200%).

Fitur-fitur ini masih dalam tahap percobaan. Jadi untuk saat ini, hal yang wajar adalah tetap menggunakan font-variation-settings , karena saat ini adalah properti yang paling stabil untuk mengakses sumbu font variabel.

Support

Karena font variabel masih sangat baru, Akses broswer support belum sempurna. Versi terbaru Chrome dan Safari sudah mendukung mereka, tetapi Edge dan Firefox masih tertinggal (belum ada versi di Firefox Nightly dan Firefox Developer Edition). Sejak rilis Oktober 2017, Photoshop dan Illustrator juga mendukung font variabel.

Learn More About Variable Fonts

Kita mengharapkan font variabel untuk membawa perubahan luar biasa ke dunia tipografi web. Karena semakin banyak dukungan, saatnya terjun ke dalam pembelajaran dan bereksperimen. Lihat sumber daya berikut:

Web Typography

The Future of Web Typography: CSS Fonts Level 4

Dennis Gaebel

Announcement vidio of variable fonts at the ATypl confederence in Warsaw in 2016, with five notable speakers.
Typekit Blog's annauncement post by Tim Brown, Head of Typograpy at Adobe, detailing the problems variable fonts can solve and future plans.
Lea Verou has a great online playground on Codepen; it uses the Amstelvar variable font.
Nick Sherman's curated Variable Fonts news on Twitter @variablefonts