() translation by (you can also view the original English article)
Selamat datang di pelajaran kesembilan seri Desain Web Untuk Anak-Anak, semua tentang Typografi
Dalam tutorial ini kita akan melihat semua tentang typografi dan mengapa itu begitu penting dalam desain. Kita telah membicarakan tentang banyak pengalaman pengguna sejauh ini dan tidak terkecuali tutorial ini; kita akan berkerja keras untuk memastikan teks kita cantik dan mudah dibaca!
Jangan lupa untuk mengajukan pertanyaan dalam bagian komentar pada di bawah halaman ini!
Apa Tepatnya Typografi Itu?
Typografi ada dimana-mana. Itu bagaimana kita melihat kata-kata tertulis, sehingga kemanapun kita menjumpai kata-kata kita melihat typografi. Kata-kata ini dapat ditemukan pada layar, kertas dan tanda-tanda semuanya di sekitar kita.
Dengan typografi kita dapat mengganti "tampilan dan perasaan" kata-kata ini, mengganti bagaimana mereka berdampak pada pembaca. Desain kata-kata akan seringkali mempengaruhi pengguna kita bahkan sebelum mereka mendapatkan kesempatan untuk membaca konten kita, jadi itu penting bahwa desain dan perasaan utuh typografi kita cocok dengan perasaan konten itu sendiri.
Dalam pelajaran sebelumnya kita membicarakan tentang bagaimana pentingnya konten. Lagipula, tidak peduli sebagai bagus tampaknya situs kita jika itu tidak berisi informasi yang ingin dibaca oleh orang! Bagaimana kita menyampaikan kata-kata ini kepada pengguna, bagaimana pun juga, menjadi seberapa banyak pesan sebagai kata-kata itu sendiri.
Typeface vs. Font
Typografi meliputi banyak terminologi sejenis yang mirip.
Sebuah typeface merupakan desain umum koleksi karakter (kata-kata dan simbol-simbol), sementara font merupakan ukuran, bobot (seberapa tebal huruf), style khusus dan penggunaan sebuah typeface.
Desain Kota Tuts+ kita menggunakan sebuah typeface yang disebut "Open Sans". Kita menggunakan ukuran dan bobot yang berbeda pada typeface ini, yang memberitahu kita font mana yang dimuat ke dalam halaman.
Jadi, sembari kita menggunakan font pada situs, font ini berdasarkan pada typeface yang didesain oleh seseorang.
Serif vs. Sans-Serif
Sebuah typeface dapat berapa serif atau sans-serif. Serif paling mudah dideskripsikan sebagai ekor atau perluasan ujung beberapa huruf.
Typeface serif memiliki perluasan ini:
Open Sans merupakan typeface sans-serif; yang berarti tanpa serif. Sebuah typeface sans-serif tidak memiliki perpanjangan seperti huruf di atas:
Tidak ada jawaban yang benar atau salah yang mana yang akan kita gunakan pada situs kita, namun kita ingin itu cocok dengan desain keseluruhan dan perasaan yang ingin kita coba capai juga pilihan paling mudah dibaca dengan mempertimbangkan layout dan jumlah teks.
Sebuah typeface serif umumnya mudah dibaca pada kertas atau ketika ada banyak teks, sementara sans-serif mungkin lebih baik pada sebuah layar atau dengan jumlah keseluruhan teks yang lebih sedikit.
Bagian-Bagian Typeface
Untuk mendapatkan typografi terbaik bagi website kita, kita perlu memikirkan tentang apa yang membuat tiap typeface berbeda dari yang lainnya. Ada banyak bagian-bagian berbeda pada tiap typeface yang didesain dan dipikirkan dalam detail yang besar.
Detail-detail ini yang membuat keunikan masing-masing dan itu terserah pada kita untuk memilih mana yang terbaik untuk desain dan situasi yang berbeda.
Mari kita lihat secara singkat pada beberapa detail typeface untuk mengerti lebih baik bagaimana ini dapat meningkatkan (atau memperburuk) desain kita:
Tidak perlu mengingat bagian-bagian ini sekarang, cukup ketahui bahwa variasi yang membuat setiap typeface spesial.
Spacing
Seperti dengan kebanyakan hal-hal yang terkait dengan typeface, spacing itu super penting ketika membangun pengalaman terbaik bagi pengguna. Jumlah spacing antar huruf, antar kata, dan antar baris kata dapat membuat perbedaan besar pada kemampuan baca.
Tidak cukup spacing membuat kita huruf dan kata yang terlalu bertumpuk untuk dibaca dengan baik, sementara terlalu banyak spacing akan merusak semuanya dan juga akan susah dibaca dan diikuti.
Font hadir dengan spacing mereka sendiri yang umumnya cukup bagus untuk dibaca, namun mari kita lihat disebut apa perbedaan spacing ini dan bagaimana membuat perubahan dalam CSS jika kita perlu mengubah desain.
Kerning & Tracking
Kerning adalah spacing antar tiap karakter.
Tiap font yang kita gunakan telah memiliki aturan kerningnya sendiri, namun kita dapat membuat penyesuaian dalam CSS jika mau, dengan menggunakan properti letter-spacing:
1 |
h1 { |
2 |
letter-spacing: 5px; |
3 |
}
|
Tracking adalah spacing antar tiap kelompok karakter, atau huruf.
Jika font tidak menyediakan cukup tracking kita dapat membuat perubahan pada spacing ini melalui properti word-spacing:
1 |
h1 { |
2 |
word-spacing: 15px; |
3 |
}
|
Leading
Leading mengacu pada spacing antar baris kalimat.
Kita dapat membuat penyesuaian pada spacing ini dengan memberikan sebuah nilai yang mengubah nilai leading default berdasarkan font yang digunakan melalui properti line-height.
1 |
p { |
2 |
line-height: 2; |
3 |
}
|
Nilai 2 di sini akan memastikan nilai leading dua kali lebih banyak dari nilai default untuk font itu.
Widows & Orphans
Jika sebuah kata tertinggal pada sebuah baris (aaaah) di akhir sebuah blok teks itu disebut dengan Widow.
Mari katakan bahwa blok dalam gambar di bawah mewakili kata-kata dalam kolom. Widow merupakan blok biru, berdiri sendiri di akhir kolom karena itu tempat kalimat berakhir:
Sebuah Orphan adalah sebuah kata yang berada sendiri pada sebuah baris pada awal kolom, biasanya berada pada kolom dimana kebanyakan teks terkait berada.
Widow dan Orphan dianggap sebagai typografi yang jelek karena bisa sangat menggangu, membuat pengalaman membaca secara keseluruhan memburuk.
Ada beberapa pendekatan yang berbeda yang dapat kita ambil untuk memperbaiki salah satu isu ini jika terjadi pada situs kita, seperti:
- menyesuaikan ukuran font
- menyesuaikan luas kontainer
- menambah atau menghilangkan teks
- atau menyesuaikan kerning atau tracking teks
Alignment
Kita dapat memiliki untuk menyeleraskan teks ke kiri (default pada web untuk bahasa dri kiri ke kanan seperti Bahasa Inggris), di tengah, atau ke kanan.
Kiri
Teks pada web harus secara umum dibuat rata kiri (lagi, untuk bahasa dengan tulisan kiri ke kanan) karena itu yang biasa digunakan oleh pembicara dan pembaca untuk membaca.
Center
Rata tengah sering digunakan pada judul dan heading yang membantu mereka lebih menonjol dari teks utama pada sebuah halaman. Kita dapat melakukan ini dalam CSS dengan properti text-align, misalnya:
1 |
h1 { |
2 |
text-align: center; |
3 |
}
|
Teks yang diselaraskan dengan cara ini biasanya ditemukan pada penanda dan flyer yang mencoba untuk menarik perhatian seseorang, namun kita tidak harus membuat rata tengah sebuah body teks yang besar pada web karena itu akan jauh lebih sulit bagi pengguna untuk membaca. Teks yang dibuat rata tengah menciptakan lebar yang sangat berbeda dari baris ke baris, membuatnya lebih sulit untuk diikuti mata.
Kanan
Beberapa bahasa (seperti Ibrani) ditulis dari kanan ke kiri, membuat rata kanan sebagai default.
Seperti desainer kita juga dapat memilih untuk memiliki sedikit teks yang dibuat rata kanan sehingga itu dapat lebih menonjol, seperti caption gambar. Caption ini merupakan judul atau deskripsi gambar dengan elemen HTMLnya sendiri, figcaption.
Alignment di atas dilakukan dengan menyatakan right pada elemen dalam sebuah dokumen CSS:
1 |
figcaption { |
2 |
text-align: right; |
3 |
}
|
Tips Umum
Banyak typografi yang akan kita desain karena pembacaan konten kita sendiri dan membuat penyesuaian sebagai mana yang dibutuhkan. Bagaimana pun juga, ada beberapa tips umum yang dapat membantu kita lebih nyaman dengan skill typografi.
Ukuran Font & Hirarki Visual
Sebuah font-size kurang dari 16px pada teks yang membuat kumpulan konten kita biasanya dianggap terlalu kecil dan sulit untuk dibaca pada layar.
Kita bicara banyak tentang hirarki visual dalam tutorial sebelumnya pada dasar-dasar desain. Mengatur hirarki untuk teks sepanjang desain kita akan memastikan situs mudah untuk diarahkan dengan memisahkan konten terkait dan menyorot apa yang terpenting.
Teks pada situs Kota Tuts+ kita memiliki beberapa level hirarki yang berbeda, dengan judul menjadi yang terpenting, diikuti oleh kategori bisnis dan toko spesifik, dan diakhiri dengan bagian "dibuat oleh" pada bagian bawah.
Hirarki di sini dibangun berdasarkan ukuran, warna dan lokasi yang berbeda pada halaman.
Kontras
Kita akan berbicara lebih banyak tentang warna dan kontras dalam tutorial berikutnya, jadi perlu disadari bahwa warna teks dan apakah itu bertabrakan dengan warna background atau tidak, membuatnya sulit untuk dibaca.
Berikut adalah sebuah contoh kontras yang jelek di kiri dan kontras yang lebih baik di kanan:
Teks pink cerah pada sebuah background pirus gelap di sebelah kiri memberikan dampak kontras yang buruk. Teks ini sulit dibaca, tampak sedikit blur, dan menyakiti mata!
Jumlah Font
Sebagai sebuah aturan umum paling baik untuk tidak menggunakan lebih dari dua hingga tiga font yang berbeda tiap project. Font yang dipasangkan haruslah cocok satu sama lain dan keduanya mendukung keseluruhan perasaan dan ide di balik desain.
Web Fonts
Tidak semua font berkerja dengan baik pada web dan hanya bagus untuk cetak saja. Untungnya Google Fonts, yang kita gunakan untuk mengimpor Open Sans ke dalam situs Kota Tuts+ kita, menyediakan kita dengan daftar font luar biasa yang cocok untuk web.
Kesimpulan
Dalam tutorial ini kita telah menyentuh apa tepatnya typografi itu, mengulas bagaimana bagian yang berbeda dari sebuah typeface dapat mengaburkannya dari yang lain, dan menyimpulkan dengan beberapa tips umum untuk diingat kita berkerja dengan teks dan font pada web. Semua untuk mencapai satu goal akhir: membuat konten kita mudah dibaca.
Berikutnya kita akan menggali ke dalam beberapa aturan umum yang terlibat dengan menggunakan warna pada web dan pesan apa yang kita komunikasikan pada pengguna berdasarkan keseluruhan pemilihan warna.
Sampai jumpa di sekitar kota!
