Tipografi Intrinsik adalah Masa Depan Penataan Teks di Web

Cara kami menata teks tidak banyak berubah selama bertahun-tahun. Ada banyak kemajuan untuk membantu membuat segala sesuatunya lebih fleksibel, seperti tata letak, tetapi dalam hal gaya, sebagian besar aspek desain kami yang terbatas, seperti teks, relatif tidak berubah. Ini terutama berlaku untuk gaya teks. Kami menulis kode untuk memberi gaya teks secara eksplisit untuk setiap bagian dari tata letak kami, dan kemudian, untuk membuatnya responsif, kami menulis lebih banyak kode untuk membuatnya berfungsi di setiap breakpoint. Ini berarti bahwa, saat area teks yang berbeda memampatkan dan meluas, hasilnya adalah ketegangan – ketegangan pengalaman yang teraba – tepat sebelum konten rusak. Di tempat-tempat ini, konten menderita karena ukuran atau spasi yang tidak tepat, sementara itu didukung oleh kode yang terlalu rumit dan rapuh.

Tipografi intrinsik menggeser semua ini, membersihkannya dengan memulai dari kode itu sendiri untuk memengaruhi gaya. Alih-alih menulis gaya teks eksplisit, Anda menentukan bagaimana gaya tersebut berubah secara proporsional dengan area teks. Ini memungkinkan Anda menggunakan komponen teks yang lebih fleksibel dalam lebih banyak variasi tata letak. Ini menyederhanakan kode Anda, meningkatkan peluang untuk kemungkinan tata letak baru. Tipografi intrinsik berfungsi sehingga teks menyesuaikan diri dengan area di mana ia dirender. Alih-alih menentukan ukuran dan spasi teks untuk setiap komponen di setiap breakpoint, teks diberikan instruksi untuk merespons area tempatnya ditempatkan. Akibatnya, tipografi intrinsik memungkinkan desain menjadi jauh lebih fleksibel, beradaptasi dengan area tempatnya berada. ditempatkan, dengan kode yang jauh lebih sedikit.

Kekuatan super tipografi di luar clamp()

Hasil penggunaan tipografi intrinsik melampaui apa yang dimungkinkan dengan alat seperti clamp() . Gaya tipografi intrinsik memadukan portabilitas komponen kueri elemen dengan kontrol interpolasi animasi CSS, memungkinkan perubahan mulus nilai apa pun di seluruh lebar penampung. Teknik ini memungkinkan hal-hal yang tidak mungkin dilakukan dengan teknik CSS lainnya, seperti menyesuaikan pengaturan font variabel, warna, dan line-height tanpa unit dengan lancar saat area elemen berubah. Anda juga menghindari perangkap aksesibilitas clamp() dan kunci di mana mengubah ukuran font default browser menggeser tipografi Anda keluar dari keselarasan dengan breakpoint Anda saat menggunakan unit relatif.

Apa bedanya dengan tipografi responsif?

Tipografi responsif mereferensikan viewport untuk mengubah teks. Ini dilakukan melalui kueri media, clamp() , atau CSS Locks . Meskipun teknik ini memungkinkan kontrol granular tipografi di seluruh ukuran layar, teknik ini tidak memiliki kemampuan untuk mengontrol tipografi di berbagai komponen. Artinya, untuk halaman dengan larik area konten dengan ukuran berbeda, gaya judul baru perlu dibuat untuk setiap area ini dengan pendekatan tipografi responsif.

Tipografi intrinsik tidak membutuhkan semua itu. Dengan tipografi intrinsik, satu gaya judul dapat digunakan di semua area konten yang berbeda. Gaya judul terpisah dapat digabungkan menjadi satu judul intrinsik. Ini adalah perbedaan yang mirip dengan kueri elemen versus kueri media: dengan kueri elemen dimungkinkan untuk mengikat semua informasi penskalaan ke sebuah komponen, di mana kueri media gaya selalu mereferensikan viewport.

Serangkaian entri yang diskalakan secara proporsional dengan penampung tempat mereka dirender. Font dalam demo ini Jelas oleh OHno Type Co.

Anatomi gaya intrinsik

Jika kita mengambil gaya judul intrinsik di atas dan mengeluarkan semua variasi di dalamnya, akan terlihat seperti berikut:

Ekstrapolasi gaya intrinsik sepanjang sumbu Z. Karena lebar area teks berubah, penampang yang berbeda dari ekstrapolasi ini digunakan sebagai gaya.

Dalam area halaman yang lebih luas, teks diatur menjadi lebih besar, lebih berani, dan lebih luas. Di area halaman yang lebih kecil, teksnya lebih kecil, lebih terang, dan lebih sempit. Area tempat judul dirender diukur, lalu potongan yang sesuai diambil dari gaya judul intrinsik ini untuk digunakan untuk judul tertentu tersebut.

Anda mungkin memperhatikan beberapa hal tentang bentuk gaya judul yang diekstrusi ini. Teks berubah dari lebih kecil menjadi lebih besar, tetapi bentuknya sendiri memiliki kurva. Kontrol atas bagaimana skala teks dari satu titik ke titik lainnya sangat berguna karena layar menjadi lebih kecil untuk memastikan keterbacaan yang optimal. Di bawah ini Anda dapat melihat kumpulan gaya yang sama diterapkan ke dua kolom teks, satu dengan bentuk melengkung dan satu dengan bentuk linier. Dalam contoh intrinsik melengkung, teks jauh lebih terbaca di lebih banyak tempat, dibandingkan dengan contoh yang menggunakan interpolasi linier, di mana teks menjadi terlalu kecil terlalu cepat.

Dua panel teks yang memiliki gaya awal dan akhir yang sama. Namun di sebelah kanan, gaya diinterpolasi menggunakan kurva B├ęzier untuk mengoptimalkan keterbacaan di semua ukuran.

Dengan menggabungkan kemampuan untuk menginterpolasi gaya teks di seluruh ukuran dan area tata letak serta membentuk bagaimana pengaturan tersebut diinterpolasi, tipografi intrinsik memberi desainer kontrol yang belum pernah terjadi sebelumnya atas bagaimana teks ditampilkan pada layar atau ukuran komponen apa pun.

Mengetik secara intrinsik

Typetura mengembangkan alat untuk menambahkan fungsionalitas penyusunan huruf intrinsik ke CSS (Saya pencipta.) Alat ini memungkinkan gaya tipografi yang diperlukan untuk ditulis, menyuntikkan fleksibilitas di mana sebelumnya tidak ada. Gaya intrinsik disimpan dalam bingkai utama CSS dan diubah berdasarkan lebar elemen induk. Ini memungkinkan interpolasi dari setiap properti yang dapat dianimasikan di seluruh lebar elemen. Untuk merujuk kembali ke contoh kueri elemen kami, pikirkan kueri elemen interpolasi.

Untuk menyiapkan bingkai utama Anda, 0% sama dengan lebar penampung 0px , dan bingkai utama 100% adalah lebar penampung maksimum yang akan dicakup gaya Anda. Nilai ini adalah 1600px secara default. Penampung dapat didefinisikan dengan menambahkan kelas typetura ke sebuah elemen, dengan elemen root sebagai penampung default. Elemen turunan akan diberi gaya berdasarkan lebar konteks induk, kecuali konteks baru ditentukan.

 @keyframes headline { 0% { font-size: 1rem; } 100% { font-size: 4rem; } }

Untuk melampirkan gaya ini ke elemen Anda, gunakan properti kustom --tt-key . Sekarang Anda bisa melihat gaya intrinsik pertama Anda.

 @keyframes headline { 0% { font-size: 1rem; line-height: 1.1; } 100% { font-size: 4rem; line-height: 1; } } .headline { --tt-key: headline; }

Untuk membentuk bagaimana gaya ini berskala, gunakan properti kustom --tt-ease . Properti ini menerima fungsi dan kata kunci pelonggaran CSS. Ini memungkinkan Anda dengan cepat memunculkan ukuran font dasar atau mengurangi penskalaan dan spasi judul. Selain itu, kita dapat membatasi rentang yang dicakup gaya ini --tt-max agar lebih sesuai dengan batasan tata letak Anda dan untuk apa teks tersebut digunakan.

 @keyframes headline { 0% { font-size: 1rem; line-height: 1.1; } 100% { font-size: 4rem; line-height: 1; } } .headline { --tt-key: headline; --tt-max: 600; --tt-ease: ease-in-out; }

Contoh berikut menunjukkan seberapa fleksibel halaman Anda jika semua teks di dalamnya didorong oleh gaya tipografi intrinsik; dari akar dokumen dan lebih tinggi. Teks dapat beralih dengan mulus dari monitor yang melayani ruang konferensi hingga ke ukuran jam tangan – semuanya tanpa kueri media. Gaya teks juga dapat dibagikan dalam modul yang berbeda; misalnya, judul di bagian atas halaman dan berita utama di area klik-berikutnya semuanya didorong oleh gaya yang sama. Meskipun efisiensi segera muncul di semua ukuran situs web, efisiensi tersebut dengan cepat bertambah: semakin besar situs yang Anda miliki, semakin banyak efisiensi ini dibangun.

Demo halaman editorial dalam ukuran layar desktop
Demo halaman editorial dengan ukuran layar tablet kecil
Demo halaman editorial pada ponsel kecil atau ukuran layar jam tangan, dan tidak ada teks yang terpotong

Lihat Pena ini. Di dalamnya, saya telah menambahkan inspektur gaya intrinsik sehingga Anda dapat mengklik setiap judul dan melihat berapa ukuran yang diberikan. Di dalam inspektur Anda juga dapat memanipulasi bentuk gaya intrinsik, dan batas atas. Ini memungkinkan Anda untuk mulai melihat kemungkinan gaya tipografi yang diaktifkan oleh Typetura.

Tipografi Intrinsik adalah masa depan gaya di web

Memanggang aturan desain ini ke dalam konten Anda adalah praktik desain intrinsik, dan memasukkan aturan ini ke dalam teks Anda adalah praktik tipografi intrinsik. Desain web intrinsik , yang diciptakan oleh Jen Simmons , adalah konsep di mana mutasi desain yang umum dimasukkan ke dalam struktur komponen kita. Alih-alih secara eksplisit menyatakan gaya setiap bagian konten, tata letak intrinsik diberikan batasan desain dan konten kami merespons lingkungannya, sebagai lawan dari gaya yang mendefinisikan gaya secara eksplisit. Pendekatan ini menyederhanakan basis kode Anda dan meningkatkan fleksibilitas desain Anda, karena komponen memiliki instruksi yang membantunya merespons lebih dari sekadar area pandang.

Typetura membawa filosofi ini ke dalam gaya teks. Dengan komponen teks menjadi bahan desain paling mendasar kami, bahan yang digunakan kembali di hampir setiap komponen, tipografi intrinsik memiliki keunggulan signifikan dibandingkan metodologi lainnya. Keuntungan ketahanan desain, skalabilitas, dan penyederhanaan kode ada lebih dalam dalam proyek Anda dan memperpanjang masa pakainya. Perkecil ke ukuran jam tangan atau ke ukuran TV, dan jika teks pernah membatasi jangkauan tata letak Anda, sekarang teks tersebut mendukung ambisi Anda.


Postingan Intrinsic Typography adalah Masa Depan Styling Teks di Web muncul pertama kali di CSS-Tricks .

Anda dapat mendukung CSS-Tricks dengan menjadi Supporter MVP .

April 20, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *