Jika Anda tidak menentukan gaya apa pun untuk teks, browser akan menerapkan gaya defaultnya sendiri. Ini disebut stylesheet Agen Pengguna, dan dapat bervariasi dari satu browser ke browser lainnya. Pengguna juga dapat menetapkan preferensi mereka sendiri untuk menampilkan teks.
Jika Anda tidak menentukan panjang baris, browser akan menggabungkan baris teks di tepi layar. Jadi, teks di web bersifat responsif secara default—sesuai dengan area pandang pengguna.
Tetapi hanya karena teks yang pas di layar bukan berarti nyaman dibaca. Tipografi yang baik adalah tentang menyajikan teks dengan cara yang tepat. Tipografi memberikan lebih dari sekadar memilih {i>font<i} yang sesuai untuk digunakan. Anda perlu mempertimbangkan preferensi pengguna, ukuran teks, panjang baris, dan jarak antarbaris teks.
Ukuran teks
Sulit untuk mengetahui berapa ukuran teks di web yang seharusnya.
Jika seseorang menggunakan layar kecil, dapat dipastikan bahwa layarnya akan cukup dekat dengan mata mereka—sepanjang tangan jauhnya.
Tetapi karena layar yang semakin besar dan semakin besar, lebih sulit untuk membuat hubungan tersebut. Layar seukuran laptop mungkin akan cukup dekat dengan pemirsa, tetapi monitor desktop layar lebar berukuran kurang lebih sama dengan layar televisi. Orang-orang duduk jauh dari layar desktop tetapi mereka duduk lebih jauh dari televisi.
Namun, meskipun Anda tidak dapat mengetahui secara pasti seberapa jauh seseorang dari layar, Anda dapat mencoba menggunakan ukuran teks yang diharapkan akan sesuai. Gunakan ukuran teks yang lebih kecil untuk layar yang lebih kecil dan ukuran teks yang lebih besar untuk layar yang lebih besar.
Anda dapat menggunakan kueri media untuk mengubah properti font-size saat ukuran layar menjadi lebih lebar.
@media (min-width: 30em) {
html {
font-size: 125%;
}
}
@media (min-width: 40em) {
html {
font-size: 150%;
}
}
@media (min-width: 50em) {
html {
font-size: 175%;
}
}
@media (min-width: 60em) {
html {
font-size: 200%;
}
}
Menskalakan teks
Beralih antar-ukuran teks tetap pada titik henti sementara tertentu cukup gelisah. Pendekatan yang lebih responsif adalah membiarkan lebar perangkat pengguna memengaruhi ukuran teks.
Unit vw dalam CSS adalah singkatan dari “lebar area pandang”. Menghubungkan ukuran font ke
lebar area pandang berarti teks akan membesar dan mengecil sesuai dengan lebar browser. Hal ini mempersulit prediksi ukuran teks pada lebar tertentu, tetapi Anda tahu bahwa ukuran teks tersebut sesuai untuk lebar browser pengguna.
Pastikan Anda tidak menggunakan vw dalam deklarasi ukuran font.
html {
font-size: 2.5vw;
}
Jika Anda melakukannya, pengguna tidak akan dapat mengubah ukuran teks. Teks dapat diubah ukurannya jika Anda mencampur dalam unit relatif—seperti em, rem, atau ch. Fungsi calc() CSS sangat cocok untuk ini.
html {
font-size: calc(0.75rem + 1.5vw);
}
Biarkan browser menghitungnya. Hal ini menyulitkan untuk memprediksi dengan tepat berapa ukuran teks pada lebar tertentu, tetapi Anda tahu bahwa ukuran teks akan berada dalam rentang yang tepat. Browser pengguna menangani perhitungan ukuran teks yang tepat.
Namun, kini ada kemungkinan bahwa teks akan menjadi terlalu kecil di layar sempit dan terlalu besar di layar lebar.
Menempel teks
Anda mungkin tidak ingin teks Anda menyusut dan bertambah menjadi ekstrem. Anda dapat mengontrol tempat dimulai dan diakhirinya penskalaan menggunakan fungsi clamp() CSS. Tindakan ini "menjepit" penskalaan ke rentang tertentu.
Fungsi clamp() mirip dengan fungsi calc(), tetapi menggunakan tiga nilai. Nilai tengah sama dengan nilai yang Anda teruskan ke calc(). Nilai pembuka menentukan ukuran minimum, dalam hal ini 1rem agar tidak melebihi ukuran font pilihan pengguna. Nilai penutup menentukan ukuran maksimum.
html {
font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}
Sekarang ukuran teks menyusut dan membesar secara proporsional dengan layar pengguna, tetapi ukuran teks tidak akan pernah lebih dari 1rem atau di atas 2rem.
Panjang baris
Web tidak cetak, namun kita dapat belajar dari dunia cetak dan menerapkannya di web.
Dalam buku klasiknya The Elements of Typographic Style, Robert Bringhurst mengatakan ini tentang panjang baris (atau ukuran):
Apa pun dari 45 hingga 75 karakter secara luas dianggap sebagai panjang baris yang memuaskan untuk laman kolom tunggal yang diatur di wajah teks serif dalam ukuran teks. Baris 66 karakter (yang menghitung huruf dan spasi) secara luas dianggap ideal. Untuk pekerjaan banyak kolom, rata-rata yang lebih baik adalah 40 hingga 50 karakter.
Anda tidak dapat menetapkan panjang baris secara langsung di CSS. Tidak ada properti line-length. Namun, Anda dapat mencegah teks menjadi terlalu lebar dengan membatasi lebar penampung. Properti max-inline-size sangat cocok untuk ini.
Jangan tetapkan panjang baris dengan unit tetap seperti px. Pengguna dapat meningkatkan atau menurunkan skala ukuran font dan panjang baris Anda juga akan disesuaikan. Gunakan unit relatif seperti rem atau ch.
article {
max-inline-size: 700px;
}
article {
max-inline-size: 66ch;
}
Penggunaan unit ch untuk lebar akan menyebabkan baris baru digabungkan pada karakter ke-66 pada ukuran font tersebut.
Tinggi baris
Meskipun tidak ada properti line-length di CSS, terdapat properti line-height.
Baris teks yang lebih pendek dapat memiliki nilai line-height yang lebih besar. Namun, jika Anda menggunakan nilai line-height besar untuk baris teks yang panjang, mata pembaca akan kesulitan untuk berpindah dari akhir satu baris ke awal baris berikutnya.
article {
max-inline-size: 66ch;
line-height: 1.65;
}
blockquote {
max-inline-size: 45ch;
line-height: 2;
}
Menggunakan nilai tanpa unit untuk deklarasi line-height. Hal ini memastikan bahwa tinggi baris relatif terhadap font-size.
line-height: 24px;
line-height: 1.5;
Kombinasi dan skala
Ingatlah untuk memprioritaskan hierarki saat Anda membangun antarmuka pengguna untuk kejelasan dan alur halaman yang lebih baik. Cara yang bagus untuk melakukannya adalah dengan skala tipografi yang disertakan ke dalam sistem desain Anda.
Font web
Sebuah jenis huruf seperti suara untuk kata-kata Anda. Untuk waktu yang sangat lama di web, hanya ada sedikit opsi font. Font sistem adalah satu-satunya opsi. Tetapi sekarang Anda dapat memilih font web yang sesuai dengan nuansa konten Anda.
Gunakan @font-face untuk memberi tahu browser tempat menemukan file font web Anda. Gunakan woff2 sebagai format font web Anda. Dukungan ini didukung dengan baik dan memiliki peningkatan kinerja terbaik.
@font-face {
font-family: Roboto;
src: url('/fonts/roboto-regular.woff2') format('woff2');
}
body {
font-family: Roboto, sans-serif;
}
Namun, setiap file font web yang Anda tambahkan berpotensi menurunkan pengalaman pengguna karena akan meningkatkan waktu muat halaman. Ingat, desain bukan hanya tentang bagaimana tampilan piksel akhir. Seberapa cepat piksel tersebut dicat adalah bagian penting dari pengalaman pengguna. Pengalaman yang terasa cepat adalah pengalaman pengguna yang baik.
Pemuatan font
Anda dapat meminta agar browser mulai mendownload file font sesegera mungkin. Tambahkan elemen link ke head dokumen yang mereferensikan file font web Anda. Atribut rel dengan nilai preload akan memberi tahu browser untuk memprioritaskan file tersebut. Atribut as dengan nilai font memberi tahu browser tentang jenis file ini. Atribut type memungkinkan Anda untuk lebih spesifik.
<link href="/fonts/roboto-regular.woff2" type="font/woff2"
rel="preload" as="font" crossorigin>
Anda harus menyertakan atribut crossorigin meskipun menghosting file font sendiri.
Gunakan properti font-display CSS untuk memberi tahu browser cara mengelola peralihan dari font sistem ke font web. Anda dapat memilih untuk tidak menampilkan teks sama sekali hingga font web dimuat. Anda dapat memilih untuk langsung menampilkan font sistem, lalu beralih ke font web setelah font dimuat. Kedua strategi tersebut memiliki kekurangan. Jika Anda menunggu sampai font web didownload sebelum menampilkan teks, pengguna mungkin akan mendapati diri mereka menatap halaman kosong untuk waktu yang sangat lama. Jika Anda menampilkan teks dalam font sistem terlebih dahulu, kemudian beralih ke font web, pengguna mungkin akan mengalami pergeseran konten yang mengagetkan di halaman.
Kompromi yang baik adalah menunggu beberapa saat sebelum menampilkan teks apa pun. Jika font web dimuat sebelum waktu tersebut habis, teks akan ditampilkan menggunakan font web tanpa pergeseran konten. Jika font web masih belum dimuat setelah waktu habis, teks akan ditampilkan menggunakan font sistem sehingga setidaknya pengguna dapat membaca konten.
Gunakan nilai font-display dari swap jika Anda masih ingin font web mengganti font sistem setiap kali font web akhirnya dimuat.
body {
font-family: Roboto, sans-serif;
font-display: swap;
}
Gunakan nilai font-display dari fallback jika Anda ingin tetap menggunakan font sistem setelah teks dirender.
body {
font-family: Roboto, sans-serif;
font-display: fallback;
}
Font variabel
Jika Anda menggunakan banyak ketebalan atau gaya yang berbeda dari jenis huruf yang sama, Anda mungkin akhirnya menggunakan banyak file {i>font<i} yang terpisah—file {i>font<i} terpisah untuk setiap ketebalan atau gaya.
Font variabel mengatasi masalah ini menggunakan satu file. Alih-alih memiliki file terpisah untuk reguler, tebal, ekstra tebal, dan seterusnya, file font variabel bersifat responsif. Objek ini berisi semua informasi yang diperlukan untuk ditampilkan di seluruh spektrum bobot atau gaya.
Ini berarti bahwa satu file font variabel lebih besar dari satu file font biasa, tetapi satu file font variabel mungkin akan lebih kecil daripada beberapa file font biasa. Jika Anda menggunakan banyak bobot yang berbeda, font variabel dapat memberikan peningkatan performa yang besar.
Tipografi yang baik di web bukan hanya tentang pilihan huruf yang Anda buat sebagai seorang desainer. Tipografi responsif juga berkaitan dengan menghormati perangkat dan koneksi jaringan pengguna. Hasil akhirnya adalah desain yang terasa tepat, tidak peduli bagaimana hal itu dilihat.
Setelah Anda menguasai teks responsif, saatnya mempelajari gambar responsif.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang tipografi
Gaya harus ditambahkan agar teks dikemas dalam area pandang.
clamp() berguna untuk tipografi yang lancar karena
calc() yang mudahclamp() untuk tipografi bukanlah alasan yang tepat.clamp() untuk tipografi bukanlah alasan yang tepat.Jenis nilai line-height mana yang direkomendasikan dalam panduan ini?
24pxline-height.2rem1.52vwline-height akan bermasalah.Apa fungsi font-display?
block atau inline-block.