Evolusi tipografi dengan fonta variabel: pengantar

Tipis, tebal, dan semuanya di antaranya: FF Meta Variable from Monotype

Kata-kata memiliki kekuatan, dan tipografi adalah suaranya

Selama berabad-abad, ketik adalah bagaimana kita 'mendengar' apa yang kita baca. Secara umum juga dipahami bahwa tipografi dan tipografi adalah elemen inti dari branding, ekspresi, jangkauan vokal. Tipografi yang hebat memengaruhi pemahaman, suasana hati, dan makna dalam banyak cara dan merupakan bagian penting dari desain. Sayangnya, selama bertahun-tahun setelah munculnya web, kami tidak dapat menerapkan semua kecuali desain tipografi yang paling dasar untuk konten online. Dengan kemampuan untuk menggunakan font nyata dan fitur OpenType - seperti ligatur, set angka spesifik, fraksi, dan kerning sejati - lanskap tipografi meningkat pesat. Tetapi kenyataan melihat konten di web menentukan bahwa kecepatan adalah aspek desain yang paling kritis - jadi kami telah memperdagangkan tipografi 'jangkauan vokal' untuk kecepatan halaman. Itu berarti lebih sedikit bobot font dan mengurangi kesetiaan dan suara merek.

Dari banyak, satu (paradigma: bergeser)

Font variabel adalah font tunggal yang bertindak sebanyak mungkin
- John Hudson

Munculnya Font Variabel mengubah seluruh dinamis. Seperti yang dijelaskan oleh John Hudson, fonta variabel adalah fonta tunggal yang bertindak sebagai banyak: semua variasi lebar dan berat, miring, dan bahkan huruf miring dapat dimuat dalam file font tunggal, sangat efisien dan kompresibel. Terlebih lagi: format (yang secara teknis merupakan bagian dari spesifikasi OpenType 1.8) sepenuhnya dapat diperluas. Perancang tipe memiliki kendali penuh atas sumbu apa yang digunakan, jangkauannya, dan bahkan definisi sumbu baru. Saat ini terdapat 5 sumbu 'terdaftar' (lebar, berat, miring, miring, dan ukuran optik), tetapi perancang dapat memvariasikan sumbu apa pun yang mereka pilih. Beberapa contoh termasuk ketinggian ascenders dan descenders, tingkat teks, bahkan bentuk serif. Kemungkinannya hampir tak terbatas. Dengan menghilangkan penghalang kinerja, kami membuka pintu untuk desain yang lebih menarik dan dinamis dan kemampuan yang jauh lebih besar untuk mengekspresikan suara merek yang sebenarnya. Semua ini sambil mempertahankan kesetiaan pada jenis huruf itu sendiri: hanya sumbu yang diekspos oleh perancang tipe yang dapat bervariasi. Tidak ada distorsi buatan yang diizinkan.

Desain web, diciptakan kembali

Sementara teknologinya masih matang dan perancang tipe bekerja untuk menjadi lebih fasih dalam cara kerja yang baru ini, janji untuk desain di web sangat menggetarkan. Skenario khasnya adalah membatasi desain apa pun yang diberikan pada 3-5 font yang berbeda untuk mewakili setiap aspek bahasa dan suara desain situs - termasuk setiap permutasi untuk salinan dan judul tubuh. Pada implementasinya yang paling sederhana, fonta variabel akan memberi kita kebebasan untuk menggunakan bobot yang berbeda untuk setiap tingkat heading - sangat meningkatkan kejelasan dan keterbacaannya.

Ampersand dari 100 hingga 900 bobot

Seseorang juga dapat menggunakan lebar karakter yang sedikit lebih sempit untuk judul atau pada tampilan informasi yang padat data. Bahkan seluruh sistem tipografi dapat dirancang agar proporsional: berat dan lebar dapat menjadi pengganda pada pengaturan penyalinan bak standar. Melakukan hal itu akan memungkinkan aspek-aspek tersebut untuk skala dengan mudah bersama dengan salinan tubuh jika pengaturannya berubah berdasarkan ukuran layar atau preferensi pengguna. Semua ini dengan peningkatan kinerja yang menyertainya karena lebih sedikit permintaan HTTP (lebih sedikit file font) dan penghematan data secara keseluruhan untuk diunduh (meskipun itu akan bervariasi berdasarkan font dan kompresi yang digunakan).

Tetapi sementara kebebasan ini memungkinkan kita untuk lebih ekspresif, beberapa kemampuan yang sangat menarik akan membantu mengubah pengalaman membaca itu sendiri. Halaman ini (yah, halaman demo itu sendiri) telah diatur dengan versi font variabel baru dari FF Meta, desain sans-serif klasik oleh Erik Spiekermann pertama kali dirilis pada tahun 1991. Bahkan dengan hanya satu sumbu variasi (berat) dari keduanya varian roman dan italic, rentang suara yang luar biasa dapat dicapai dengan peningkatan kinerja yang luar biasa: 18 file dan lebih dari 288k diganti dengan satu file hanya 84k.

Membaca kembali di layar

[Meta] harus melakukan lebih dari sekadar terlihat cantik: itu harus bekerja sangat keras
—Erik Spiekermann

Beberapa tantangan terbesar dalam menciptakan pengalaman membaca yang baik terkait dengan kurangnya kemahiran dalam proporsi dan detail yang bagus. Kombinasi dari fitur dan variasi CSS modern dan OpenType menghadirkan kombinasi yang kuat. Mampu mengatur fitur seperti pengikat dan tanda hubung berdasarkan bahasa, nyalakan dan matikan tanda hubung berdasarkan ukuran layar, dan bahkan sesuaikan lebar karakter pada layar terkecil agar sesuai dengan lebih banyak karakter per baris tanpa mengurangi ukuran font dapat membuat peningkatan dramatis dalam kelancaran dan kenyamanan pengalaman membaca.

Siap untuk close-up

Potongan Garamond abad ke-18 dalam ukuran optik. Gambar pertama adalah pada ukuran 6pt, yang kedua adalah pada 72. Perhatikan perbedaan kontras stroke. Itu jauh lebih halus dalam ukuran yang lebih besar.

Fitur lain yang umum dalam jenis logam tetapi hilang dalam terjemahan ke pengaturan foto dan digital adalah ukuran optik (well, beberapa desainer masih membuat ukuran optik terpisah untuk rentang yang berbeda, tetapi jarang dan agak terbatas). Tidak seperti yang sering ditemukan pada desain sans-serif, tetapi dalam beberapa dekade terakhir (pada kenyataannya, selama berabad-abad), itu cukup umum untuk ukuran font yang secara fisik lebih kecil untuk dipotong dengan sapuan yang sedikit lebih berat, lebih banyak mangkuk dan penghitung terbuka, dan pada beberapa kasus bahkan lubang yang lebih luas untuk menjaga keterbacaan. Surat kabar khususnya menemukan ini penting untuk memastikan garis tidak hilang atau surat tidak terlalu menderita dari penambahan tinta.

Ukuran optik telah menghasilkan font font yang bervariasi, dan dapat secara otomatis diterapkan jika tersedia, atau ditetapkan secara eksplisit oleh perancang atau pengembang web. Seperti yang disebutkan, ini bukan fitur yang sering terjadi pada tipografi sans-serif seperti ini, tetapi dapat digunakan untuk efek yang cukup dramatis dalam desain serif kontras tinggi.

Polandia dan ketenangan

Dengan manfaat yang telah dibahas, kasus font font cukup menarik. Tetapi tipografi yang baik bukan segalanya untuk desain yang bagus. Kisaran sumbu seperti lebar dan berat memberi kita kebebasan luar biasa untuk merangkul lebih banyak desain editorial di web tanpa harus memuat sejumlah besar aset file. Dan karena kami sudah memiliki beberapa fonta variabel yang diperlukan, peluangnya adalah mengeksposnya untuk digunakan oleh penerbit konten sendiri. Bayangkan sebuah peran bagi para perancang di dalam Sistem Manajemen Konten (atau CMS) tempat situs web tersebut berada. Perancang itu dapat menggunakan beberapa kontrol sederhana yang ada di dalam CMS yang memungkinkan mereka untuk mengeset tajuk berita utama atau kutipan menarik, memungkinkan tingkat desain yang sama sekali baru seperti yang kita cetak, tanpa harus menulis kode khusus setiap waktu.

Kita mungkin masih berada di awal era baru ini, tetapi masa depan pasti cerah

Pada Mei 2018, 3 dari 4 browser web utama sudah mendukung font variabel, selain kedua platform seluler yang dominan (lihat dukungan di caniuse.com). Dengan mengingat hal itu, kami siap untuk mulai menerangi web hari ini.

Inilah halaman lengkap tentang CodePen. Lihatlah semuanya bersama-sama, dan intip CSS yang mendorongnya. Ini termasuk sistem tipografi penskalaan yang saya buat berdasarkan beberapa ide yang saya pelajari dari Jen Simmons dan Tim Brown, menggunakan unit viewport, properti khusus CSS (alias variabel), dan banyak perhitungan. Anda dapat melihatnya langsung di CodePen atau benar-benar melihatnya tertanam di bawah ini.

Beberapa pemikiran tentang jenis huruf dan proyek

Saya selalu menjadi penggemar karya Erik Spiekermann, dan saya pikir kronologi dan sejarah Meta, Officina, dan Fira benar-benar menarik, dan sangat banyak bagian dari bahan desain digital untuk saya selama 25 tahun terakhir. Kesempatan untuk mengambil jenis huruf dengan sejarah semacam itu dan dampaknya di dunia desain dan bekerja dengannya dalam konteks teknologi baru benar-benar menarik. Saya terutama menghargai bisa bekerja dengan baik berat dan huruf miring sebagai bagian dari file yang sama: itu menunjukkan nilai format font variabel dengan sangat baik.

Saya memutuskan untuk tidak mulai mendesain halaman sampai saya menulis artikel itu sendiri. Saya ingin menulis pengantar yang baik yang ditujukan untuk desainer dan pemilik merek untuk memperkenalkan mereka pada manfaat font variabel dalam hal yang akan beresonansi dengan masalah mereka: bahasa desain dan ekspresi merek. Setelah saya merasa memiliki konsep yang bagus, saya menambahkan sedikit lebih spesifik pada jenis huruf itu sendiri dan tempatnya di leksikon desain kami. Ini memberi saya beberapa ide tentang bagaimana menampilkan jenis huruf dan sejarah.

Dalam memikirkan pengaturan huruf dasar, saya melakukan skala: Saya ingin bermain dengan berat dan ukuran yang ekstrem dengan cara yang tidak sering Anda lihat di web karena sebagian besar desain lebih dibatasi pada bobot yang digunakan. Dalam hal ini saya telah menggunakan seluruh rentang bobot mulai dari 100 hingga 900 dalam roman dan italic. Begitu saya mulai mendapatkan tata letak yang saya sukai, terpikir oleh saya bahwa alih-alih membuat grafik untuk menggambarkan kemampuan, akan lebih menarik untuk membuat ilustrasi dari jenis: menarik kutipan dan sedikit data font gaya 'infografis'.

Sentuhan terakhir dari ampersand di bagian atas sebenarnya diilhami oleh halaman spesimen jenis di situs FontFont: ada sampler mesin terbang yang menunjukkan semua bobot dari ampers dan dilapisi di atas satu sama lain. Saya awalnya memiliki mereka semua ditumpuk dengan cara yang sama, dengan animasi dalam satu lingkaran - tapi itu agak banyak untuk beberapa browser yang masih menerapkan font variabel dan animasi keyframe. Ketika saya menekan tata letak yang tumpang tindih dengan opsi play / pause saya menyukai cara mereka terlihat menyebar (terutama di ponsel). Jadi saya membalikkannya dan memulainya statis, dan kemudian memainkan animasi sekali dan kembali ke tata letak spread / layered.

Semua dalam semua, saya sangat senang dengan konten dan desain, dan suka bagaimana itu bergerak dan berkembang di berbagai ukuran layar juga. Saya berharap ini berfungsi sebagai inspirasi dan instruksi untuk orang lain juga.

[Monotype baru-baru ini mengajak saya untuk menulis dan merancang halaman demonstrasi untuk menampilkan rilis font variabel baru dari desain Erik Spiekermann klasik FF Meta. Ini adalah teks dari halaman itu dan beberapa visual. Halaman live lengkap dihosting di CodePen dan disematkan di atas. Ini terbuka untuk semua orang, jadi silakan membuat salinan dan memainkannya sendiri. Anda dapat melihat pengantar mereka untuk teknologi juga.]

Konten asli yang diposting di blog saya