Kami merancang berurusan dengan font setiap hari. Tapi kami tidak pernah benar -benar peduli dengan keberadaan mereka. Kami belum menggunakannya dengan baik atau bahkan menyalahgunakannya. Itu semua karena kita tidak mengenal mereka. Font adalah salah satu elemen penting dari pengaturan huruf; Dalam artikel ini, mari kita bahas pengetahuan mendalam ini dengan Anda. Jenis font Font Inggris (Typeface) dibagi menjadi beberapa kategori utama. 1. Serif Serif adalah bagian dekoratif dari tepi stroke. Tanda merah pada gambar di bawah ini adalah serif. Tujuan asli dari desain serif adalah untuk lebih jelas menunjukkan akhir dari stroke, meningkatkan laju pengakuan, dan meningkatkan kecepatan membaca. Selain itu, menggunakan font serif akan membuat orang merasa lebih ortodoks. Oleh karena itu, banyak buku bahasa Inggris biasa kami, terutama makalah dan novel, menggunakan serif untuk menyelesaikan teks utama. Serif yang umum digunakan dalam desain web adalah Times New Roman dan Georgia. Sisi kiri gambar di bawah ini adalah Font Roman New Times dengan 12px dan sisi kanan adalah Georgia dengan 12px. Dalam bahasa Cina, font lagu yang kami gunakan adalah font serif yang sesuai. 2. SANS-SERIF/SANS-SERIF Jika font tidak serif, itu disebut sserif atau sans serif. Angka berikut adalah sanserif. Ada serif SANS yang relatif lebih umum digunakan dalam desain web. Ada Arial, Verdana, Tahoma, Helivetica, Calibri, dll. Gambar berikut adalah 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, sulit untuk mengenali font serif dari teks 10 hingga 12px di layar komputer. Gambar di bawah ini adalah perbandingan antara Verdana 10px dan Times New Roman 10px tanpa cleartype. Anda dapat menemukan bahwa Verdana di sebelah kiri dapat diidentifikasi dengan baik. Times New Roman di sebelah kanan cukup sulit untuk diidentifikasi. 3. Monospace Font Monowidth sebenarnya hanya untuk font barat. Karena lebar huruf bahasa Inggris bervariasi. Misalnya, saya jauh lebih sempit dari m. Saat pemrograman, kode ditampilkan, jika huruf tidak sama lebar, tata letak akan jelek. Pada baris perintah DOS, kita dapat melihat bahwa font Monospace digunakan. Font Monospace yang diperlukan untuk pemrograman memiliki persyaratan berikut: 1. Semua karakter sama lebarnya; 2. Bentuk karakter yang ringkas, jelas dan terstandarisasi; 3. mendukung set karakter yang diperluas dengan kode ASCII 128 atau lebih; 4. Karakter Whitespace (ASCII: 0 × 20) sama dengan karakter lain; 5. Tiga karakter seperti "1", "L" dan "I" mudah dibedakan; 6. Tiga karakter seperti "0", "O" dan "O" mudah dibedakan; 7. Bagian depan dan belakang dari kutipan ganda dan kutipan tunggal mudah dibedakan, dan yang terbaik adalah memiliki mirror-simetris; 8. Bentuk tanda baca yang jelas, terutama kawat gigi keriting, kawat gigi bundar dan kawat gigi persegi. Font Monospace Umum termasuk Courier, Courier New 4. Kaligrafi Seperti namanya, tulisan tangan adalah font gaya tulisan tangan. Terkadang kita juga menyebutnya font kaligrafi. Sebagian besar font kaligrafi Cina relatif kaku. Saya pribadi merekomendasikan menggunakan font kaligrafi Jepang. Font kaligrafi Jepang lebih lembut dan lebih manusiawi. Namun, kerugian menggunakan font kaligrafi Jepang adalah bahwa kebanyakan dari mereka tradisional, dan banyak karakter Cina hilang. 5. Simbol Tubuh simbolis paling terkenal di Windows adalah Webdings (saya ingat saya suka menggunakannya ketika saya berada di Windows 95 ...). Berikut beberapa font Webdings: Gaya font Gaya font umum dibagi menjadi: normal, tebal tebal, miring. Sederhananya, tebal berarti font akan lebih gelap dan lebih "tebal". Miring berarti sedikit memiringkan sumbu karakter. Mereka semua digunakan untuk menekankan paragraf tertentu dalam ruang. Saat berbicara tentang BOLD, kita dapat dengan mudah mengaitkan atribut font-weight di CSS. Kita tahu bahwa selain normal dan tebal yang biasanya kita gunakan, nilai atribut font-weight juga memiliki properti seperti lebih berani, lebih ringan, 100 ~ 900. Jadi berapa nilai 100 ~ 900? Font yang sangat baik akan memberikan desain yang berbeda untuk bobot font yang berbeda. Jika font memiliki desain bawaan ketebalan level yang berbeda di muka, nilai-nilai ini masing-masing akan sesuai dengan masing-masing level. Misalnya, font Zurich termasuk enam font: Zurich Light, Zurich Reguler, Zurich Medium, Zurich Bold, Zurich Black, dan Zurich Ultrablack. Dengan cara ini, cahaya Zurich sesuai dengan tiga nilai: 100, 200, dan 300, Zurich Regular sesuai dengan 400, yang "normal", media Zurich sesuai dengan 500, dan Zurich Bold, yang "tebal tebal" sesuai dengan 600, 700, Zurich Black sesuai dengan 800, dan akhirnya, Zurich Ultrablack sesuai dengan 900. Untuk huruf miring Cina, umumnya tidak digunakan di internet. Karena ada banyak pukulan dalam bahasa Cina, akan sulit untuk mengidentifikasi jika digunakan. satuan Beberapa unit akan digunakan dalam desain web kami: 1. Point (Pt, Point) 72 poin = 1 inci, 1 inci adalah 72 poin. Selain itu, 1 pickup (pica) = 12 poin 2. Pixel (Pixel, PX) Pixel adalah unit gambar terkecil di layar komputer, dan dalam istilah awam itu adalah titik terkecil di layar. 3. DPI, PPI Nama lengkap DPI adalah titik -titik per inci, dan nama lengkap PPI adalah piksel per inci. Mereka adalah unit resolusi. Dengan kata lain, berapa banyak poin (piksel) yang dapat diatur dalam panjang 1 inci. Misalnya, umumnya, monitor kami adalah sekitar 72ppi, yang berarti panjang 1 inci, dengan 72 titik (piksel). Semakin tinggi DPI/PPI, semakin tinggi resolusi, yaitu, semakin kecil partikel, semakin halus gambarnya. Secara umum, resolusi foto adalah antara 240DPI dan 300DPI, jadi mengapa foto terlihat jauh lebih detail daripada di layar? Pencetakan Majalah menggunakan 133 atau 150DPI, dan buku-buku berkualitas tinggi menggunakan 350-400DPI, karena buku cetak paling indah menggunakan 175 hingga 200dpi saat dicetak. Jadi mengapa jauh lebih jelas untuk membaca teks dengan ukuran fisik yang sama dalam buku daripada membaca di layar? Artinya, kami sebutkan sebelumnya, mengapa kami dapat dengan berani menggunakan font sans-serif untuk mencetak buku bahasa Inggris? Pada dasarnya tidak ada perbedaan antara DPI dan PPI. Jika Anda benar -benar ingin menemukan perbedaannya, maka satu -satunya perbedaan mungkin adalah bahwa DPI sering digunakan untuk menggambarkan pemindai dan printer, sementara PPI sering menggambarkan resolusi layar. 4.ex, x-height Sering digunakan dalam CSS. 1ex = ketinggian huruf kecil x. 5.em Sering digunakan dalam CSS. Tentu saja, EM tidak mewakili ketinggian huruf kecil M (pada kenyataannya, ketinggian huruf kecil M umumnya sama dengan ketinggian huruf kecil X). 1em = 100% dari ukuran font. adalah banyak unit. jarak 1. Line-Height, memimpin Ketika datang ke jarak garis (garis-garis, timah), pertama-tama kita harus mempelajari istilah yang disebut baseline. Apakah Anda ingat Buku Line Grid yang kami gunakan untuk menulis surat ketika kami pertama kali belajar bahasa Inggris? Baseline adalah garis lurus di atas bagian turun dari font yang sebagian besar huruf "duduk". Sebagian besar font, huruf kapital selalu menempel pada baseline dan berada di atas garis dasar. Font Cina sama dengan yang ada dalam huruf kapital Inggris. Garis merah pada gambar di bawah ini adalah garis dasar. Kemudian, jarak garis mengacu pada jarak antara dua garis yang berdekatan dan garis dasar. Unit jarak garis sering digunakan untuk menentukan jarak garis sesuai dengan ukuran font. Di browser, tidak ada aturan untuk jarak garis default. Lebih banyak dengan saran yang diberikan oleh W3C, ia percaya bahwa jarak garis default harus antara 1.0em dan 1.2em. Bahkan, ketika mengatur jarak garis, ada prinsip dalam pengaturan huruf, yaitu, kesenjangan antara garis harus lebih besar dari kesenjangan antara kata -kata. Jarak garis yang memadai dapat memisahkan setiap baris teks, memudahkan mata untuk membedakan baris sebelumnya atau berikutnya. Dalam beberapa tahun terakhir, kebanyakan orang menyukai tata letak teks utama di web dengan jarak garis 1.5em, terutama situs web Cina. Artinya, jika ukuran font 12px digunakan, desainer sering seperti jarak garis 18px. 1.5em memang nilai pengalaman yang baik. Bahkan, spesifikasi makalah Cina juga menggunakan jarak garis 1.5em. 2. Jarak huruf, pelacakan Jarak kata mengacu pada jarak antara sekelompok huruf. Jarak karakter mempengaruhi kepadatan teks dalam baris atau paragraf. 3. KERNING Kering adalah pemrosesan teknis yang dilakukan karena kebutuhan visual. Sederhananya, ketika dua karakter tertentu diatur, Anda dapat menentukan jarak karakter unik untuk mereka secara terpisah. Misalnya, ketika modal A diikuti oleh huruf kecil V, jarak yang lebih besar secara visual akan muncul di antara kedua karakter (pada kenyataannya, jarak karakter adalah sama), yang tidak dapat diselesaikan dengan jarak karakter biasa. Jika dikurangi, huruf -huruf lain akan terhubung dalam bola. Pada saat ini, penyesuaian kerning diperlukan untuk menanganinya. Gambar berikut menunjukkan contoh menggunakan kerning: ayat 1. Presiden (Ukur) Panjang garis mengacu pada lebar paragraf teks. Seperti yang ditunjukkan di bawah ini: Ada dua masalah keterbacaan yang terkait dengan presiden: Semakin lama panjang garis, semakin besar jarak garis yang dibutuhkan. Jarak garis terlalu kecil, memudahkan pembaca untuk membuat serial saat membaca newline. Jarak garis terlalu besar, dan pembaca akan merasa bahwa teks tidak terputus saat membaca garis. Dalam teks, disarankan untuk memiliki 40 hingga 70 huruf per baris. 2. Penyelarasan Pada dasarnya ada empat jenis penyelarasan paragraf: kiri (flush kiri), kanan (flush right), terpusat (terpusat) dan dibenarkan. Penyelarasan kiri mengacu pada metode penyelarasan yang mengatur konten teks, menyesuaikan jarak horizontal teks, dan menyelaraskan teks dalam paragraf atau artikel ke kiri ke arah horizontal. Penyelarasan kiri memberikan teks di sisi kiri artikel tepi yang rapi. Pada saat yang sama, sisi kanan teks akan tidak rata. Oleh karena itu, penyelarasan bahasa Inggris di sebelah kiri juga disebut Ragged Right, yang berarti sisi kanan dengan penampilan yang tidak rata. Penyelarasan yang tepat adalah sama. Penyelarasan tengah mengacu pada metode penyelarasan yang mengatur konten teks, menyesuaikan jarak horizontal teks, dan membuat teks dalam paragraf atau artikel sejajar dalam arah horizontal ke tengah. Sejajarkan pusat sehingga teks di kedua sisi artikel terkonsentrasi dengan rapi di tengah, sehingga seluruh paragraf atau artikel diatur dengan rapi. Menyelaraskan kedua ujungnya berarti mengatur dua ujung konten teks, menyesuaikan jarak horizontal teks/kata, sehingga didistribusikan secara merata antara margin halaman kiri dan kanan. Sejajarkan kedua ujungnya sehingga teks di kedua sisi memiliki tepi yang rapi. Setelah menggunakan kedua ujungnya untuk menyelaraskan, garis penyelarasan di kedua sisi akan jelas, dan perasaan "cepat" blok teks akan jelas. Namun, dalam pengaturan huruf bahasa Inggris, ketika panjang garis sangat pendek, menggunakan kedua ujungnya untuk menyelaraskannya dapat membuat beberapa garis dengan jarak yang terlalu panjang dan beberapa garis dengan jarak yang terlalu pendek, sehingga jarak yang tidak rata akan terasa sangat berantakan. pakaian dengan tambalan di mana -mana. 3. Kemudahan Keterbacaan Literasi menggambarkan kemudahan dan kenyamanan membaca teks tipografi. Bahkan, ini adalah tujuan paling mendasar dari desain biasa. Selain beberapa prinsip yang dijelaskan di atas, saya telah memasukkan beberapa prinsip kecil keterbacaan dan berbagi dengan Anda: Desain menggunakan hingga tiga ukuran font. Maksimal tiga font digunakan dalam satu desain. Kontras tertentu harus dipastikan, tetapi tidak boleh ada kontras yang berlebihan. Teks Yang (karakter hitam pada latar belakang putih) lebih mudah dibaca daripada teks yin (karakter hitam pada latar belakang hitam). Di latar belakang #FFFF, menggunakan teks #333 terlihat lebih nyaman daripada teks #000. Perhatikan latar belakang teks. Latar belakang harus lajang. Hindari kebisingan latar belakang. "Less is More" menggunakan elemen paling sedikit untuk menyampaikan informasi terbanyak. Jadikan tautan Anda terlihat seperti tautan. Manfaatkan ruang Anda dengan baik.