Responsif sebenarnya dari desain situs web Anda lebih dari sekadar kerangka kerja yang menskalakan ke setiap perangkat, itu juga mengharuskan tipografi menyesuaikan dengan keterbacaan yang optimal juga.
Tipografi responsif akan menyesuaikan sehingga elemen teks juga berubah ukuran dan skala pada situs web. Meskipun itulah jawaban teknisnya, ada juga pendekatan desain yang lebih besar yang sama pentingnya, karena hanya mengubah ukuran elemen teks tidak selalu cukup.
Mari selami praktik terbaik tipografi responsif, beberapa panduan, dan beberapa alat untuk membantu Anda membuat tipe hebat dalam ukuran apa pun.
Primer Tipografi Responsif
Rencana tipografi responsif yang solid akan memastikan bahwa konten Anda dapat dibaca di seluruh perangkat. Ini memastikan bahwa Anda telah mengembangkan seperangkat aturan untuk interaction, ukuran, dan skala yang akan membantu semuanya dirender di seluruh perangkat.
Hal yang baik adalah bahwa untuk sebagian besar situs web, itu hanya dalam dua ukuran: desktop dan seluler. (Penggunaan tablet secara keseluruhan untuk penjelajahan web umum telah menurun drastis dalam beberapa tahun terakhir.)
Font dan skala yang terlihat bagus di layar lebar mungkin tidak ditampilkan dengan baik pada ukuran layar genggam yang berorientasi vertikal.
Sekarang inilah tantangannya. Font dan skala yang terlihat bagus di layar lebar mungkin tidak ditampilkan dengan baik pada ukuran layar genggam yang berorientasi vertikal. Itu dapat menentukan pilihan font Anda dan bagaimana Anda merencanakan situs web. (Jika tidak, Anda mungkin perlu mengganti tipografi antara desktop dan seluler, yang tidak disarankan.)
Saat Anda merencanakan desain, penting untuk memikirkan elemen tipografi sebagai bagian dari keseluruhan kerangka kerja ini sehingga Anda tidak terjebak dengan tantangan tipografi responsif yang aneh nanti. (Font super lebar, misalnya, dapat menghadirkan tantangan keterbacaan yang unik di layar ponsel.)
Pertimbangan desain tipografi responsif meliputi:
- Pemilihan tipografi: Mulailah dengan font yang terlihat bagus dan terbaca dengan baik di layar kecil terlebih dahulu. Kemudian uji di layar yang lebih besar.
- Batasi opsi jenis: Palet yang lebih kecil lebih mudah dikelola dan tidak terlalu berbobot dalam hal waktu pemuatan.
- Pertimbangkan fallback untuk berjaga-jaga: Jika font yang Anda inginkan tidak dapat dimuat (mungkin perangkat tidak menyukainya atau server CDN sedang down), izinkan pilihan alternatif yang sangat umum. (Arial adalah pilihan fallback populer untuk tipografi sans serif.)
- Ukuran dan skala desain berdasarkan konten: Tipografi yang dapat dibaca dapat sangat bergantung pada konten lain seperti pemilihan font. Skala dan ukuran elemen teks seringkali berbeda tergantung pada seberapa banyak teks yang dirender pada satu waktu dan jenis konten di layar.
- Berhati-hatilah dengan ketinggian garis: Sedikit ruang ekstra di antara garis dapat meningkatkan keterbacaan pada perangkat seluler. Ada keseimbangan yang halus antara terlalu banyak dan terlalu sedikit ruang. Untuk ukuran yang lebih kecil, tinggi garis 150% atau 1,5em bisa menjadi tempat yang baik untuk memulai.
- Kategori font: Desainer benar-benar terbuka untuk menggunakan lebih banyak variasi font – serif, eksperimental, dll. – sebagai praktik umum. Ini dapat menghadirkan beberapa tantangan saat kecil atau di layar di mana pengguna mungkin menggunakan mode gelap lebih dominan. Uji pilihan jenis lebih awal untuk memastikan keterbacaan jika Anda mengikuti rute ini.
Ukuran Tipe Responsif Melampaui Piksel
Kebanyakan desainer menghindari bekerja dalam unit numerik absolut dan lebih memilih persentase atau ems dan rems.
Membuat tipe untuk desain responsif membutuhkan banyak pemikiran tentang ukuran dan skala. Setiap desainer mungkin memiliki pendapat yang berbeda tentang jenis unit ukuran apa yang ingin mereka gunakan.
Unit ukuran paling populer meliputi:
- Piksel: Notasi umum untuk ukuran font digital yang mencatat angka absolut
- Poin: Lebih banyak sisa dari cetakan untuk ukuran yang kurang umum secara online
- Ems: Ukuran relatif terhadap ukuran font induk
- Rems: Ukuran yang mewarisi gaya akar
- Persentase: Ukuran berdasarkan persentase perubahan dari gaya induk
Kebanyakan desainer menghindari bekerja dalam unit numerik absolut dan lebih memilih persentase atau ems dan rems. Menggunakan model ini, Anda mulai dengan ukuran dasar (seperti teks isi) dan menyesuaikan ukuran dari sana.
Itu dapat membuat matematika lebih mudah (1rem sekitar 10px) dan memungkinkan penyesuaian skala penuh hanya dengan mengubah ukuran font default.
Seperti apa ini untuk ukuran default?
Teks isi umumnya 16px hingga 18px atau 1,6rem hingga 1,8 rem (14px hingga 16px untuk seluler). Kemudian Anda dapat menggunakan skala yang Anda suka untuk mengukur semuanya sesuai dengan itu.
Jika Anda mengukur teks isi atau ukuran font default lainnya untuk desktop dan seluler, skala akan mengurus sisanya.
Menemukan Skala yang Tepat
Skala tipe menentukan seberapa banyak font yang lebih besar atau lebih kecil berakar di font dasar atau default. Dengan menggunakan metode ini, ukuran dasar Anda adalah 100% jika Anda menyukai persen atau 1em, jika itu adalah unit pilihan Anda.
Kemudian pilih skala dan bagaimana skala itu berkaitan dengan posisi CSS dari H1 hingga H6 dan seterusnya.
Ada beberapa skala tipografi umum yang menciptakan nuansa dan harmoni berbeda yang jauh lebih mudah untuk dihitung secara matematis daripada menetapkan nilai secara acak ke ukuran tipe.
Timbangan Jenis Kontras Tinggi
Bagus untuk layar besar, timbangan ini memiliki banyak variasi antar ukuran. Basis teks H1 dan isi akan menciptakan banyak drama karena perbedaan ukuran.
Skala ini termasuk (angka adalah rasio perubahan):
- Ditambah Keempat, 1,414
- Sempurna Kelima, 1.500
- Rasio Emas, 1,618
Skala Jenis Kontras Sedang
Di sinilah sebagian besar jenis timbangan jatuh dan merupakan area aman untuk sebagian besar ukuran layar. Ini bagus untuk desain dengan banyak konten teks.
Timbangan ini meliputi:
- Kecil Ketiga, 1.200
- Mayor Ketiga, 1.250
- Keempat Sempurna, 1,333
Timbangan Jenis Kontras Rendah
Variabel skala terkecil adalah yang terbaik untuk elemen tipe yang lebih kecil yang digunakan sebagai pengidentifikasi. Anda mungkin melihat jenis skala ini dengan aplikasi berbasis dasbor, daftar e-niaga, atau elemen berbasis kisi.
Timbangan ini meliputi:
- Detik Kecil, 1,067
- Mayor Kedua, 1,125
Ketika datang untuk membuat skala tipografi, ada beberapa sumber daya dan alat hebat yang sudah tersedia jika Anda tidak ingin menghitung sendiri atau ingin melihat variasi ukuran.
Melihat ke Depan untuk Tipografi Intrinsik
Hal berikutnya yang perlu dipikirkan dalam hal tipografi web adalah tipe intrinsik. Awal tahun ini Scott Kellum untuk Trik-CSS menyebutnya sebagai “masa depan gaya teks di web”.
Dalam penjelasan yang paling sederhana, tipografi intrinsik kehilangan gaya teks yang berbeda; alih-alih Anda menentukan gaya berdasarkan proporsi teks ke area tersebut. Alasan untuk ini adalah untuk meningkatkan fleksibilitas dan menulis kode yang lebih sederhana.
Hasilnya adalah teks “menyesuaikan diri” dengan wadah tempat tinggalnya dan tidak terhubung ke viewport. Anda dapat memiliki lebih dari beberapa ukuran prasetel dalam skala yang berlaku untuk keseluruhan desain. Varians menjadi hampir tak terbatas.
Anda dapat mencobanya menggunakan Alat ketik.
Kesimpulan
Desain tipografi dapat menjadi elemen terpenting dari setiap proyek web. Dengan memikirkan bagaimana teks akan dirender dan bagaimana teks akan dibaca pada setiap ukuran, Anda menciptakan pengalaman web yang lebih berharga dan dapat diakses untuk semua.
Ini dimulai dengan dasar yang kuat untuk tipografi dan pemahaman tentang bagaimana menyesuaikan untuk pemirsa situs web tidak peduli bagaimana mereka berinteraction dengan desain.
