Evolusi tipografi dengan fon berubah-ubah: pengenalan

Nipis, tebal, dan segala-galanya di antara: FF Meta Variable dari Monotype

Perkataan mempunyai kuasa, dan tipografi adalah suara mereka

Selama berabad-abad, jenisnya ialah bagaimana kita 'mendengar' apa yang kita baca. Ia juga umumnya difahami bahawa tipografi dan tipografi adalah elemen teras penjenamaan, ungkapan, pelbagai suara. Tipografi besar mempengaruhi pemahaman, perasaan, dan makna dalam banyak cara dan merupakan bahagian penting dalam reka bentuk. Malangnya, selama bertahun-tahun selepas kedatangan web, kami tidak dapat menggunakan semua tetapi reka bentuk tipografi paling asas kepada kandungan dalam talian. Dengan keupayaan untuk menggunakan fon sebenar dan ciri OpenType - seperti ligatures, set angka tertentu, pecahan, dan kerning benar - landskap percetakan meningkat dengan pesat. Tetapi realiti melihat kandungan di web menunjukkan bahawa kelajuan adalah aspek reka bentuk yang paling kritikal - jadi kami telah memperdagangkan 'vokal suara' typographic untuk kelajuan halaman. Ini bermakna kurangkan font fon dan mengurangkan kesetiaan dan suara jenama.

Daripada ramai, satu (paradigma: beralih)

Fon berubah ialah font tunggal yang berfungsi sebagai banyak
- John Hudson

Munculnya Variable Fonts mengubah keseluruhan dinamik. Seperti yang dijelaskan oleh John Hudson, font berubah ialah font tunggal yang bertindak sebagai banyak: semua variasi lebar dan berat, slant, dan bahkan huruf miring boleh terkandung dalam fail fon tunggal, sangat berkesan dan mampat. Terlebih lagi: format (yang secara teknikal sebahagian daripada spesifikasi OpenType 1.8) benar-benar extensible. Pereka bentuk mempunyai kawalan penuh terhadap apa paksi yang digunakan, julat mereka, dan juga definisi paksi baru. Pada masa ini, terdapat 5 paksi 'terdaftar' (lebar, berat, slant, miring, dan saiz optik), tetapi pereka boleh mengubah mana-mana paksi yang mereka pilih. Beberapa contoh termasuk ketinggian ascenders dan descenders, gred teks, walaupun bentuk serif. Kemungkinannya hampir tidak terbatas. Dengan menghapuskan penghalang prestasi, kami membuka pintu untuk reka bentuk yang lebih menarik dan dinamik dan keupayaan yang jauh lebih besar untuk menyatakan suara sebenar jenama. Semua ini tetap mengekalkan kesetiaan kepada jenis huruf itu sendiri: hanya paksi yang terdedah oleh pereka jenis yang boleh diubah. Tiada herotan tiruan yang dibenarkan.

Reka bentuk web, dicipta semula

Walaupun teknologi masih matang dan jenis pereka sedang berusaha untuk menjadi lebih fasih dalam cara kerja baru ini, janji untuk reka bentuk di web adalah pecah tanah. Senario biasa adalah untuk mengekang sebarang reka bentuk yang diberikan kepada 3-5 fon yang berbeza untuk mewakili setiap aspek bahasa dan suara reka bentuk tapak - termasuk setiap permutasi untuk salinan dan tajuk badan. Pada pelaksanaannya yang paling mudah, fon pemboleh ubah akan memberikan kita kebebasan untuk menggunakan berat yang berbeza untuk setiap peringkat tajuk - sangat meningkatkan kejelasan dan pembacaannya.

Ampersands dari 100 hingga 900 berat

Satu juga boleh menggunakan lebar aksara sedikit sempit untuk tajuk atau pada paparan data-padat maklumat. Sebenarnya keseluruhan sistem percetakan boleh direka untuk berkadaran: berat dan lebar boleh menjadi pengganda pada tetapan salinan badan standard. Melakukannya akan membolehkan aspek tersebut berskala mudah bersama dengan salinan badan apabila tetapannya berubah mengikut saiz skrin atau keutamaan pengguna. Semua ini dengan peningkatan prestasi yang disertakan kerana permintaan HTTP yang lebih sedikit (fail font kurang) dan penjimatan keseluruhan data untuk dimuat turun (walaupun itu akan berubah mengikut fon dan pemampatan yang digunakan).

Tetapi sementara kebebasan ini membolehkan kita menjadi lebih ekspresif, beberapa keupayaan yang sangat menarik akan membantu mengubah pengalaman membaca itu sendiri. Halaman ini (dengan baik, halaman demo sebenar itu sendiri) telah ditetapkan dengan versi font pembolehubah baru FF Meta, reka bentuk sans-serif klasik oleh Erik Spiekermann yang pertama dikeluarkan pada tahun 1991. Walaupun hanya satu paksi variasi (berat) keduanya roman dan varian italic, pelbagai suara yang hebat dapat dicapai dengan keuntungan besar dalam prestasi: 18 fail dan lebih 288k digantikan dengan satu fail hanya 84k.

Membaca semula pada skrin

[Meta] perlu melakukan lebih daripada cantik: ia perlu bekerja keras
-Erik Spiekermann

Beberapa cabaran terbesar dalam mencipta pengalaman membaca yang baik terikat pada kekurangan kemahiran dalam perkadaran dan butiran halus. Gabungan ciri dan variasi CSS dan OpenType moden memberikan gabungan yang kuat. Mampu menetapkan ciri seperti ligatures dan hyphenation berdasarkan bahasa, putar hiperasi di atas dan di luar berdasarkan saiz skrin, dan bahkan menyesuaikan lebar watak pada skrin terkecil untuk menyesuaikan lebih banyak aksara setiap baris tanpa mengurangkan saiz fon boleh membuat peningkatan dramatik dalam kelancaran dan keselesaan pengalaman membaca.

Bersedia untuk rapat

Potongan Garamond pada abad ke-18 dipotong dalam ukuran optik. Imej pertama adalah pada saiz 6pt, yang kedua adalah pada 72. Perhatikan perbezaan dalam kontras strok. Ia lebih halus dalam saiz yang lebih besar.

Satu lagi ciri yang biasa di dalam jenis logam tetapi hilang dalam terjemahan ke foto-typesetting dan digital adalah saiz optik (dengan baik, sesetengah pereka masih membuat saiz optik yang berasingan untuk julat yang berbeza, tetapi jarang dan agak terhad). Tidak seperti yang sering dijumpai pada reka bentuk sans-serif, tetapi dalam dekad yang lalu (sebenarnya, selama berabad-abad), ia adalah perkara biasa untuk saiz fizikal yang lebih kecil dari jenis huruf yang akan dipotong dengan sebatan yang lebih berat, mangkuk dan kaunter yang lebih terbuka, dan beberapa kes apertures yang lebih luas untuk mengekalkan kebolehbacaan. Akhbar-akhbar khususnya mendapati ini kritikal untuk memastikan garis-garis tidak hilang atau huruf-huruf tidak mengalami terlalu banyak dari keuntungan tinta.

Ukuran optik telah membuat pulangan dalam font berubah-ubah, dan boleh digunakan secara automatik jika tersedia, atau ditetapkan dengan jelas oleh pereka atau pemaju web. Seperti yang disebutkan, ia tidak seperti ciri kerap dalam tip huruf sans-serif seperti ini, tetapi boleh digunakan untuk kesan yang agak dramatik dalam reka bentuk serif kontras yang lebih tinggi.

Poland dan ketenangan

Dengan faedah-faedah yang telah dibincangkan, kes bagi font berubah-ubah cukup menarik. Tetapi tipografi yang baik bukan semua yang ada untuk reka bentuk yang hebat. Pelbagai paksi seperti lebar dan berat memberikan kita kebebasan yang luar biasa untuk merangkumi lebih banyak reka bentuk editorial di web tanpa perlu memuatkan sejumlah aset fail terlalu tinggi. Dan kerana kita sudah mempunyai beberapa fon pemboleh ubah yang diperlukan di tempat, peluangnya adalah untuk mendedahkan mereka untuk digunakan oleh penerbit kandungan sendiri. Bayangkan peranan untuk pereka di dalam Sistem Pengurusan Kandungan (atau CMS) di mana laman web ini ditempatkan. Pereka itu boleh menggunakan beberapa kawalan mudah yang dibina ke dalam CMS yang membolehkan mereka menyusun tajuk utama atau petikan menarik, membolehkan reka bentuk tahap keseluruhan seperti apa yang kita ada dalam cetak, tanpa perlu menulis kod tersuai setiap kali.

Kita mungkin masih berada di subuh era baru ini, tetapi masa depannya pasti cerah

Sehingga Mei 2018, 3 daripada 4 pelayar web utama telah menyokong fon berubah-ubah, sebagai tambahan kepada kedua-dua platform mudah alih dominan (semak sokongan pada caniuse.com). Dengan itu, kami bersedia untuk menyalakan web hari ini.

Berikut adalah halaman penuh pada CodePen. Lihatlah keseluruhannya bersama-sama, dan lihatlah CSS yang memacunya. Ini termasuk sistem tipografi skala yang saya buat berdasarkan beberapa idea yang saya pelajari dari Jen Simmons dan Tim Brown, menggunakan unit viewport, sifat tersuai CSS (alias pembolehubah), dan banyak pengiraan. Anda boleh melihatnya secara langsung pada CodePen atau sebenarnya menyemaknya tertanam di bawah.

Beberapa pemikiran tentang jenis huruf dan projek

Saya sentiasa menjadi peminat karya Erik Spiekermann, dan saya fikir kronologi dan sejarah Meta, Officina, dan Fira sangat menarik, dan sebahagian besar daripada fabrik reka bentuk digital untuk saya sepanjang 25 tahun yang lalu. Kemungkinan untuk mengambil tipografi dengan jenis sejarah dan impak dalam dunia reka bentuk dan bekerja dengannya dalam konteks teknologi baru adalah sangat menarik. Saya amat menghargai dapat bekerja dengan kedua-dua berat dan miring sebagai sebahagian daripada fail yang sama: ia mempamerkan nilai format font berubah-ubah dengan sangat baik.

Saya memutuskan untuk tidak memulakan merancang halaman sehingga saya menulis artikel itu sendiri. Saya ingin menulis pengenalan yang baik yang bertujuan untuk pereka dan pemilik jenama untuk memperkenalkan mereka kepada faedah fon pembolehubah dalam istilah yang akan bergema dengan kebimbangan mereka: bahasa reka bentuk dan ekspresi jenama. Sebaik sahaja saya merasakan saya mempunyai draf yang baik, saya menambah sedikit lebih spesifik untuk typeface itu sendiri dan tempatnya dalam kamus leksikon kami. Ini memberi saya beberapa idea tentang bagaimana mempamerkan jenis huruf dan sejarah.

Dalam pemikiran tentang penetapan huruf asas, saya pergi untuk skala: Saya mahu bermain dengan berat dan saiz yang melampau dengan cara yang anda tidak melihat sesering di web kerana kebanyakan reka bentuk yang lebih dikekang dalam berat yang digunakan. Dalam kes ini saya telah menggunakan pelbagai berat dari 100 hingga 900 dalam roman dan italik. Sebaik sahaja saya mula mendapat susun atur yang saya suka, saya menyedari bahawa bukannya membuat grafik untuk menggambarkan keupayaan, ia lebih menarik untuk membuat ilustrasi daripada jenis: petikan tarik dan sedikit 'font' gaya font 'infographic'.

Sentuhan terakhir ampersand atas atas sebenarnya diilhami oleh halaman spesimen jenis di laman FontFont: ada sampler glyph yang menunjukkan semua bobot ampersand berlapis di atas satu sama lain. Saya pada mulanya mempunyai mereka semua disusun dengan cara yang sama, dengan menghidupkan dalam gelung - tetapi itu sedikit banyak untuk sesetengah pelayar masih melaksanakan fon pemboleh ubah dan animasi keyframe. Apabila saya memukul susun atur tumpang tindih dengan pilihan mainan / jeda saya suka cara mereka kelihatan tersebar (terutamanya di telefon bimbit). Jadi saya membalikkannya dan memulainya secara statik, dan kemudian memainkan animasi sekali dan kembali ke susun atur / layered.

Semua dalam semua saya sangat gembira dengan kandungan dan reka bentuk, dan seperti bagaimana ia bergerak dan berkembang dalam saiz skrin yang berbeza juga. Saya harap ia berfungsi sebagai inspirasi dan arahan untuk orang lain juga.

[Monotype baru-baru ini membabitkan saya untuk menulis dan merancang halaman demonstrasi untuk menampilkan pembebasan font pembolehubah baru dari reka bentuk Erik Spiekermann klasik FF Meta. Ini adalah teks halaman dan beberapa visual. Halaman langsung penuh dihoskan pada CodePen dan tertanam di atas. Ia terbuka kepada semua, jadi jangan ragu untuk membuat salinan dan bermain dengannya sendiri. Anda boleh melihat pengenalan mereka dengan teknologi juga.]

Kandungan asal yang disiarkan di blog saya