Kami mendesain dan bekerja dengan font setiap hari. Namun kami tidak pernah menaruh perhatian serius terhadap keberadaan mereka. Kita belum memanfaatkannya dengan baik, atau bahkan menyalahgunakannya. Semua ini karena kita tidak memahaminya. Font adalah salah satu elemen penting tipografi; font juga merupakan salah satu subjek paling mendalam dalam desain. Pada artikel ini, mari kita bahas pengetahuan mendalam ini dengan Anda.
Jenis-Jenis Font
Font Bahasa Inggris (Typeface) terbagi dalam beberapa kategori besar. Inilah pengetahuan dasar yang wajib Anda ketahui saat menggunakan font bahasa Inggris:
1.
Serif Serif merupakan bagian dekoratif pada tepi guratan. Area yang ditandai dengan warna merah pada gambar di bawah adalah serif.
Tujuan awal desain serif adalah untuk menandai ujung guratan dengan lebih jelas, meningkatkan kecepatan pengenalan, dan meningkatkan kecepatan membaca. Selain itu, penggunaan font serif akan membuat orang merasa lebih ortodoks. Oleh karena itu, banyak buku berbahasa Inggris umum kita, terutama esai dan novel, menggunakan font serif untuk melengkapi teksnya.
Serif yang umum digunakan dalam desain web termasuk Times New Roman dan Georgia. Sisi kiri gambar di bawah adalah font Times New Roman 12px, dan sisi kanan adalah font Georgia 12px.
Dalam bahasa Mandarin, font Lagu yang kami gunakan adalah font serif yang sesuai.
2. Sans-serif
Jika suatu font tidak memiliki serif, maka disebut non-serif atau sans-serif. Gambar di bawah adalah sans-serif.
Ada relatif banyak sans-serif yang biasa digunakan dalam desain web. Ada Arial, Verdana, Tahoma, Helivetica, Calibri, dll. Gambar di bawah menunjukkan Arial, Verdana, dan Tahoma dari kiri ke kanan:
Perlu dicatat bahwa meskipun font serif banyak digunakan dalam buku, font serif jarang digunakan di Internet. Karena resolusi layar komputer tidak sebanding dengan buku, font serif berukuran 10 hingga 12 piksel pada teks utama sulit dibaca di layar komputer. Gambar dibawah ini adalah perbandingan 10px Verdana dan 10px Times New Roman tanpa Cleartype. Seperti yang Anda lihat, Verdana di sebelah kiri dapat dengan mudah dikenali. Times New Roman di sebelah kanan cukup sulit dibaca.
3. Font Monospace
Font Monospace sebenarnya hanya untuk font Barat. Karena lebar huruf bahasa Inggris berbeda-beda. Misalnya, saya jauh lebih sempit dari m. Menampilkan kode saat pemrograman. Jika lebar hurufnya tidak sama, tata letaknya akan jelek. Di baris perintah DOS, kita dapat melihat bahwa font dengan lebar tetap digunakan.
Font dengan lebar konstan yang diperlukan untuk pemrograman memiliki persyaratan berikut:
1. Semua karakter harus memiliki lebar yang sama;
2.
Bentuk karakter yang sederhana, jelas, dan terstandarisasi;
3. Mendukung kumpulan karakter yang diperluas dengan kode ASCII di atas 128;
(ASCII: 0× 20) Lebarnya sama dengan karakter lainnya;
5.Tiga karakter seperti "1"
, "l" dan "i" mudah dibedakan;
O" mudah dibedakan;
7. Bagian depan dan belakang tanda kutip ganda dan tanda kutip tunggal mudah dibedakan, dan sebaiknya dibuat simetris cermin;
8. Tanda baca yang jelas, terutama tanda kurung, tanda kurung bulat, dan tanda kurung siku.
Font monospace yang umum termasuk Courier dan Courier New.
4. Kaligrafi
Seperti namanya, kaligrafi adalah font bergaya tulisan tangan. Terkadang kami juga menyebutnya font kaligrafi. Kebanyakan font kaligrafi Tiongkok kaku. Saya pribadi merekomendasikan menggunakan font kaligrafi Jepang. Font kaligrafi Jepang lebih lembut dan manusiawi. Namun kelemahan menggunakan font kaligrafi Jepang adalah sebagian besar merupakan font China tradisional, dan banyak karakter China yang hilang.
5. Simbol
Badan simbol yang paling terkenal di Windows adalah Webdings (saya ingat saya sering menggunakannya ketika saya masih menggunakan Windows 95...). Berikut adalah beberapa font Webdings:
Gaya font:
Gaya font yang umum adalah: Normal, Tebal, dan Miring.
Sederhananya, bold berarti font akan menjadi lebih gelap dan “tebal”. Miring artinya memiringkan sedikit sumbu teks. Mereka digunakan untuk menekankan paragraf teks tertentu di dalam spasi.
Ketika berbicara tentang huruf tebal, kita dapat dengan mudah memikirkan properti font-weight di CSS. Kita tahu bahwa selain normal dan bold yang biasa kita gunakan, nilai atribut font-weight juga memiliki atribut seperti bolder, light, 100~900, dll. Jadi berapa nilai 100 sampai 900? Sebenarnya 100 sampai 900 tidak ada satuannya. Font yang bagus akan memberikan desain berbeda untuk bobot berbeda. Jika font memiliki desain bawaan untuk tingkat ketebalan berbeda, maka nilai ini akan sesuai dengan setiap tingkat. Misalnya, font Zurich mencakup enam font: Zurich Light, Zurich Regular, Zurich Medium, Zurich Bold, Zurich Black, dan Zurich UltraBlack. Dengan cara ini, Zurich Light berhubungan dengan tiga nilai 100, 200, dan 300, Zurich Regular berhubungan dengan 400, yang berarti "normal", Zurich Medium berhubungan dengan 500, dan Zurich Bold, yang berarti "tebal", sama dengan 600, 700, Zurich Black sama dengan 800, dan terakhir, Zurich UltraBlack sama dengan 900.
Huruf miring Cina umumnya tidak digunakan di Internet. Karena bahasa Mandarin memiliki banyak guratan, penggunaan huruf miring akan menyulitkan pembacaannya.
Satuan
Kita akan menggunakan beberapa satuan dalam desain web kita:
1. Titik (pt, titik)
72 titik = 1 inci, 1 inci adalah 72 titik. Selain itu, 1 pica = 12 titik
2. Piksel (piksel, px)
Piksel adalah satuan gambar terkecil di layar komputer.
3. DPI, PPI
Nama lengkap DPI adalah Dots Per Inch, titik per inci, dan nama lengkap PPI adalah Pixel Per Inch. Mereka adalah unit resolusi. Dengan kata lain, berapa banyak titik (piksel) yang dapat disusun dalam panjang 1 inci. Misalnya, secara umum monitor kita berukuran sekitar 72ppi, artinya ada 72 titik (piksel) dalam panjang 1 inci. Semakin tinggi dpi/ppi, semakin tinggi resolusinya, semakin kecil partikelnya, semakin halus gambarnya. Secara umum, resolusi foto adalah antara 240dpi dan 300dpi, jadi mengapa foto terlihat jauh lebih detail daripada yang terlihat di layar. Majalah dicetak pada 133 atau 150dpi, dan buku berkualitas tinggi dicetak pada 350-400dpi, karena sebagian besar buku yang dicetak dengan indah dicetak pada 175 hingga 200dpi. Itu sebabnya teks dengan ukuran fisik yang sama jauh lebih jelas bila dilihat di buku dibandingkan di layar. Itulah mengapa kami telah menyebutkan sebelumnya bahwa font Sans-serif dapat digunakan dengan aman dalam pencetakan buku berbahasa Inggris.
Pada dasarnya tidak ada perbedaan antara dpi dan ppi. Jika Anda benar-benar ingin mencari perbedaannya, satu-satunya perbedaan mungkin adalah dpi sering digunakan untuk menggambarkan pemindai dan printer, sedangkan ppi sering digunakan untuk menggambarkan resolusi layar.
4. ex dan x-height
sering digunakan dalam CSS. 1ex = tinggi huruf kecil x.
5.em
sering digunakan dalam CSS. Tentu saja em tidak mewakili tinggi huruf kecil m (sebenarnya tinggi huruf kecil m pada umumnya sama dengan tinggi huruf kecil x). 1em = 100% dari ukuran font. adalah beberapa unit.
Spasi
1. Spasi baris (Line-height, Leading)
Kalau bicara tentang spasi baris (Line-height, Leading), kita harus mempelajari dulu istilah yang disebut baseline. Ingat buku grid yang biasa kita gunakan untuk menulis huruf saat pertama kali belajar bahasa Inggris? Garis horizontal yang paling tebal disebut dengan garis dasar. Garis dasar adalah garis di atas turunan font tempat sebagian besar huruf "duduk". Di sebagian besar font, huruf besar selalu ditempatkan dekat dan di atas garis dasar. Font Cina sama dengan huruf kapital bahasa Inggris. Garis merah pada gambar di bawah ini adalah garis dasar.
Kemudian, spasi garis mengacu pada jarak antara garis pangkal antara dua garis yang berdekatan. Satuan spasi baris sering kali em, yang ditentukan berdasarkan ukuran font. Di browser, tidak ada pedoman untuk spasi baris default. Menurut rekomendasi yang diberikan oleh W3C, spasi baris default harus antara 1.0em dan 1.2em. Padahal, dalam mengatur spasi baris, ada prinsip dalam pengaturan huruf bahwa jarak antar baris harus lebih besar daripada jarak antar kata, jika tidak, pembaca akan mudah "bersambung" saat membaca sehingga menyebabkan kesulitan membaca. Spasi baris yang cukup dapat memisahkan setiap baris teks sehingga memudahkan mata membedakan baris sebelumnya atau baris berikutnya. Dalam beberapa tahun terakhir, kebanyakan orang lebih memilih spasi baris 1,5em untuk tata letak teks di Web, terutama situs web berbahasa Mandarin. Artinya, jika ukuran font yang digunakan 12px, desainer sering kali lebih memilih spasi baris 18px. 1.5em memang merupakan nilai pengalaman yang bagus. Faktanya, standar untuk surat kabar China adalah menggunakan spasi baris 1,5em.
2. Spasi huruf (Spasi huruf, Pelacakan)
Spasi huruf mengacu pada jarak antara sekelompok huruf. Spasi kata mempengaruhi kepadatan teks dalam satu baris atau paragraf.
3.
Kerning Kerning adalah suatu proses teknis yang dilakukan untuk kebutuhan visual. Sederhananya, ketika dua karakter tertentu disejajarkan, Anda dapat menentukan spasi kata unik untuk karakter tersebut satu per satu. Misalnya, ketika huruf besar A diikuti dengan huruf kecil v, akan ada spasi yang secara visual lebih besar antara kedua karakter (sebenarnya spasi kata sama), yang tidak dapat diselesaikan dengan spasi karakter biasa. Jika Anda mengurangi jarak antar huruf, huruf lainnya akan mengalir bersamaan. Saat ini diperlukan penyesuaian kerning untuk mengatasinya. Gambar di bawah ini adalah contoh penerapan kerning:
Paragraf
1. Panjang Garis (Ukur)
Panjang garis mengacu pada lebar suatu paragraf teks. Seperti yang ditunjukkan di bawah ini:
Ada dua masalah keterbacaan terkait dengan panjang garis:
Semakin panjang garis, semakin besar jarak garis yang diperlukan. Jika spasi baris terlalu kecil, pembaca akan mudah patah saat membaca. Jika spasi baris terlalu besar, pembaca akan merasa teks terputus-putus saat membaca barisnya.
Dalam teks utama, 40 hingga 70 huruf per baris sudah sesuai.
2. Alignment
Pada dasarnya ada empat jenis perataan paragraf: rata kiri, rata kanan, tengah, dan rata.
Perataan kiri mengacu pada metode perataan yang mengatur konten teks, menyesuaikan spasi horizontal teks, dan meratakan teks dalam paragraf atau artikel ke kiri sepanjang arah horizontal. Perataan kiri memberi tepian yang rapi pada teks di sisi kiri artikel. Pada saat yang sama, sisi kanan teks akan menjadi tidak rata. Oleh karena itu, perataan kiri dalam bahasa Inggris disebut juga ragged right yang artinya sisi kanan terlihat compang-camping. Hal yang sama berlaku untuk perataan yang benar.
Perataan tengah mengacu pada metode perataan yang mengatur isi teks dan mengatur spasi horizontal teks sehingga teks dalam paragraf atau artikel sejajar secara horizontal ke tengah. Perataan tengah membuat teks pada kedua sisi artikel terpusat rapi di tengah, sehingga keseluruhan paragraf atau artikel tersusun rapi.
Alignment artinya mengatur kedua ujung isi teks dan mengatur jarak horizontal teks/kata agar menyatu merata pada tepi kiri dan kanan halaman antar jarak. Justify memberikan tepian yang rapi pada teks di kedua sisi.
Setelah menggunakan perataan di kedua ujungnya, garis perataan di kedua sisi akan sangat jelas, dan kesan "cepat" pada blok teks juga akan terlihat jelas. Namun, dalam penyusunan huruf bahasa Inggris, jika panjang garis sangat pendek, penggunaan perataan dapat menyebabkan jarak antar baris menjadi terlalu panjang dan jarak antar baris menjadi terlalu pendek. Spasi kata yang tidak rata ini akan terasa sangat berantakan dengan tambalan dimana-mana.
3. Keterbacaan Keterbacaan
menggambarkan kemudahan dan kenyamanan membaca teks cetakan. Faktanya, ini adalah tujuan paling mendasar dari desain biasa. Selain prinsip-prinsip yang dijelaskan di atas, saya juga telah mengumpulkan beberapa prinsip keterbacaan kecil untuk dibagikan kepada Anda:
Gunakan paling banyak tiga ukuran font dalam sebuah desain.
Gunakan hingga tiga font pada satu desain.
Kontras tertentu perlu diberikan, tetapi kontras tidak berlebihan. Aksara Yang (karakter hitam dengan latar belakang putih) lebih mudah dibaca dibandingkan aksara Yin (karakter putih dengan latar belakang hitam). Pada latar belakang #fff, teks yang menggunakan #333 terlihat lebih nyaman dibandingkan teks #000.
Perhatikan latar belakang teks. Latar belakangnya harus sederhana. Hindari kebisingan latar belakang.
"Less is more" Gunakan elemen paling sedikit untuk menyampaikan informasi sebanyak-banyaknya.
Jadikan tautan Anda terlihat seperti tautan.
Manfaatkan ruang Anda dengan baik.