Memahami Penulisan Tipografi Untuk Web
Dalam Reka Bentuk Web subjek tipografi adalah penting apabila mempertimbangkan semua bidang pengalaman pengguna. Setiap laman web mempunyai keperluan untuk teks, dan terdapat garis panduan yang boleh anda ikuti untuk membina susun atur yang luar biasa. Gridlines, huruf, ketinggian font, jarak teks, skema warna, dan sifat serupa yang lain harus dipertimbangkan.
Dalam artikel ini saya ingin menyelidiki bidang tipografi web. Kita akan lihat idea-idea popular di sebalik merancang teks halaman web yang boleh dipercayai. Sepanjang perjalanan saya akan memperkenalkan beberapa ciri CSS3 yang berguna yang pereka sering lupa.
Saya telah cuba memberi lebih tumpuan kepada teori dan ideologi untuk Web. Ini memberikan tumpuan yang lebih luas kepada teks digital secara umum, dan anda, pereka web kemudian boleh memilih gaya mana yang akan digunakan untuk tujuan itu. Konteks selalu menjadi kunci dan anda harus menentukan ini sesuai untuk setiap projek yang anda kerjakan. Pertimbangkan panduan ini satu pakej rujukan yang penuh dengan tren web moden dari para pencipta tipografi di seluruh dunia.
Ukur Perenggan anda
Anda tidak perlu melepaskan kayu bakar untuk pengukuran seperti ini. Sebenarnya ukuran berkaitan dengan tipografi merujuk kepada lebar (melintang) mana-mana perenggan yang diberikan pada halaman anda. Ia bukan satu topik yang sentiasa dibincangkan, tetapi ia mempengaruhi kebolehbacaan kandungan anda. Sebagai peraturan umum, anda ingin mengehadkan mana-mana talian tunggal sekitar 75-85 aksara panjang (tidak semestinya termasuk ruang).
Sekarang, ini mungkin kelihatan seperti sedikit regangan untuk beberapa susun atur yang lebih luas. Terutama jika reka bentuk anda cecair dan dimaksudkan untuk menyesuaikan diri sebagai pengguna semula saiz tetingkap penyemak imbas mereka. Anda sentiasa boleh menetapkan CSS lebar lebar harta pada div utama kandungan anda. Pengkodan margin dan saiz fon dalam unit berskala (peratusan, ems) dan bukannya piksel akan membolehkan fleksibiliti sedemikian dalam susun atur apa-apa.
Tidak ada ukuran maksimum untuk berhati-hati. Bagaimana anda menulis kandungan dan membentuk kata-kata ke dalam kalimat adalah lebih penting daripada lebar setiap baris. Tetapi perlu diingat bahawa ayat yang lebih panjang adalah lebih sukar untuk dibaca berbanding dengan kenyataan ringkas dan pendek.
Memimpin Dijelaskan
Dalam merekabentuk, bersama dengan ukuran perenggan anda, anda juga harus mempertimbangkan idea mengetuai. Perkataan diucapkan “ledd-ing”, seperti petunjuk yang digunakan dalam pensel. Nama ini berasal dari hari-hari tua jenis huruf mekanikal di mana jalur plumbum diletakkan di antara baris teks.
Memimpin masih merupakan konsep yang sangat penting dalam reka bentuk web dan berjalan seiring dengan langkah-langkah perenggan. Apabila lebar perenggan anda meningkat, anda harus menggunakan peningkatan yang sama dengan jumlah yang terkemuka, atau ruang antara baris teks. Ruang tambahan ini menjadikan bacaan lebih mudah di mata anda.
Sekiranya anda menggunakan skrip yang sangat ketat, anda mungkin sukar untuk memberi tumpuan kepada satu baris. Jika ini berlaku, cobalah meningkatkan jumlah peneraju dengan CSS ketinggian baris harta. Anda sentiasa mahu lebih banyak ruang di antara baris teks daripada antara perkataan. Jika tidak, blok teks anda mungkin muncul sebagai cetakan akhbar dan tidak akan menjadi sangat mesra pengguna untuk mengesan.
Teknik padu adalah untuk memohon lebih banyak ruang daripada yang diperlukan dan untuk mengurangkannya jika perlu. Tidak semua teks dicipta sama dan anda pasti perlu perenggan dengan pemformatan dalaman yang berbeza seperti kata-kata berani, pautan utama, garis bawah, dan sebagainya. Dengan beberapa tambahan yang membawa perubahan ini tidak akan merasa tidak seimbang berbanding dengan teks lain.
Gunakan Saiz Fon Asli
Masih terdapat segelintir laman web yang memilih untuk melekat pada saiz fon yang lebih kecil daripada purata. 11px-12px boleh kelihatan lebih banyak “profesional standard” untuk susun atur perniagaan. Tetapi saiz ini tidak membantu kebanyakan pelawat yang mencari maklumat tertentu.
Secara umumnya penyemak imbas web lalai kepada 16px jika anda tidak memohon sebarang peraturan CSS. Walaupun ini mungkin dianggap agak kecil jika anda mempunyai ruang tambahan dalam susun atur anda untuk menampung teks yang lebih besar. Saiz font yang lebih besar hanya kelihatan lebih baik dan lebih mudah untuk mengoptimakan kata kunci relatif. Fon serif tidak selalunya dipilih sebagai bahan perenggan, tetapi anda masih boleh menjauhinya. Saya cadangkan menggunakan saiz teks yang lebih besar untuk font berasaskan serif untuk meningkatkan kebolehbacaan dan menarik perhatian.
Tanggapi Persekitaran Pengguna
Semasa anda mencuba keluarga dan saiz font yang berbeza, kawasan kandungan anda perlu menyesuaikan dengan sewajarnya. Unit standard yang saya lekatkan adalah ems kerana mereka boleh dengan mudah saiz semula berdasarkan ruang dan resolusi skrin yang ada. Ini mengoptimumkan prestasi pada akhir pengguna yang paling penting.
Tetapi apabila anda mempunyai kandungan yang begitu fleksibel ia membuat susun atur anda terdedah kepada hasil buggy. Kandungan di tapak footer atau sidebar anda mungkin berakhir dengan skewed atau off-balance dalam beberapa penyemak imbas. Atau anda mungkin mengalami kesukaran melampirkan imej atau bentuk media lain dalam teks utama anda. Terdapat beberapa alternatif lain untuk menggunakan em jika anda memerlukan susun atur gaya tetap - tetapi cuba kedua-dua penyelesaian untuk melihat mana yang paling anda sukai.
Ingat bahawa lebar tetap dan saiz perenggan akan mengunci banyak tetapan dalam reka bentuk anda. Ia hebat untuk kandungan yang termasuk banyak kesan estetik stasioner - fikirkan imej latar belakang atau banyak widget sidebar yang dipasang. Ia juga merupakan proses mudah untuk membina kawasan kandungan bendalir di lajur kiri dengan bar sisi tetap di sebelah kanan.
Gaya Berdasarkan Konteks
Beberapa teknik CSS yang benar-benar kemas telah disembunyikan daripada reka bentuk arus perdana. Khususnya terdapat trend disalin daripada kerja cetak yang boleh digunakan dalam konteks yang sesuai.
Banyak pereka laman web tidak pernah menggunakan hak cipta teks inden teks. Anda membekalkan nilai untuk indent baris pertama mana-mana perenggan yang disasarkan oleh peraturan ini. Unit mengikuti pilihan teks standard seperti piksel, mata, ems, peratusan ... Ini bukan trend yang akan anda temukan di kebanyakan blog. Tetapi ia memberikan irama halaman yang bagus sambil membaca blok teks yang besar.
Terdapat satu lagi jenis pemilih CSS yang dikenali sebagai unsur pseudo. Ini boleh menyasarkan bahagian tertentu pemilih kandungan apa pun. CSS3: pemilih pseudo huruf pertama sangat sesuai untuk mencipta gaya mewah pada perenggan penting. Anda boleh jazz sehingga setiap huruf perenggan - sama dengan buku cerita yang cukup banyak - menggunakan huruf tebal, miring, atau mengubah jenis huruf. Lihat contoh indah drop drop ini yang termasuk beberapa kod CSS tambahan yang anda boleh gunakan.
Bermain dengan Spasi Huruf
Saya yakin ramai di antara kita telah mendengar penjejakan istilah sebelum ini dan tidak pernah menyedari ia adalah idea yang sama dengan sifat spasi huruf CSS. Kedua-dua konsep ini adalah satu sama, berkaitan dengan tipografi cetak dan digital. Unit berkaitan dengan ruang antara huruf dalam satu baris teks. Ini adalah kesan yang sangat kemas untuk diterapkan pada tajuk dan bahkan beberapa blok kandungan yang lebih kecil dalam laman web anda.
Adalah penting untuk tidak mengelirukan istilah-huruf jarak dengan kerning. Kedua-duanya berkaitan dengan tipografi dan jarak antara huruf. Walau bagaimanapun kerning secara khusus merujuk kepada jarak antara 2 huruf individu dalam satu perkataan. Hartanah jarak surat akan dikenakan satu elemen keseluruhan teks, sama ada perkataan atau perenggan atau pengetua atau pautan utama. Ingatlah ini apabila anda bermain dengan idea-idea baru untuk gaya.
Saya sering menggunakan beberapa titik / titik jarak surat dalam tajuk dengan semua modal. Ini memecahkan aksara individu dengan beberapa ruang tambahan dan juga muncul sebagai sangat jelas “tajuk” lihat. Ruang surat negatif juga berfungsi dengan baik dalam konteks yang betul. Saya biasanya berpegang kepada unit yang lebih kecil, mungkin -0.03em atau -0.1em paling banyak.
Menggabungkan dan Menaip Typefaces
Konsep reka bentuk di belakang tipografi web pastinya suatu bentuk seni, tidak banyak sains. Terdapat garis panduan yang boleh anda ikuti, tetapi tidak ada peraturan teguh yang anda hadapi. Ini bermakna anda mempunyai sejumlah besar kebebasan untuk mencuba percubaan dan memadankan fon yang berbeza yang anda akses.
Setakat ini gabungan yang paling popular dari typefaces termasuk serif / sans-serif split untuk tajuk dan kandungan perenggan. Saya suka menukar kedua-dua, tetapi lebih kerap saya akan menggunakan fon serif dalam bahagian pengepala. Tanda tambahan dan pukulan pada setiap huruf membuat mereka kelihatan lebih menyanjung sebagai teks halaman dominan.
Selain itu fon sans-serif adalah lebih bersih dan lebih mudah untuk scrunch bersama-sama dalam ayat. Itu bukan untuk mengatakan fon serif tidak akan berfungsi dalam perenggan. Malah ada banyak contoh hebat! Tetapi konsep yang kurang dikenali yang dinamakan x-height sangat penting untuk membezakan kerumitan jenis huruf. Dari melihat asas kata-kata pasangan, anda akan memilih cara fon semacam itu “menyesuaikan diri” dengan satu sama lain.
Ia juga perlu diperhatikan kepentingan ruang antara unsur-unsur yang berbeza ini. Anda mungkin akan menggunakan 2 atau 3 gaya header yang berbeza, jadi setiap ini akan muncul dengan penampilan yang berbeza. Saya cenderung untuk mengekalkan elemen h2 / h3 saya sedikit lebih dekat kepada blok perenggan yang berikut, kerana ini membayangkan terdapat korelasi antara kandungan.
Hubungan ini amat berguna apabila anda menggunakan dua jenis tipografi yang betul-betul berbeza di sebelah satu sama lain. Saya cadangkan tidak lebih daripada 3 keluarga font berbeza setiap set kandungan. Setelah penyesuaian terlalu banyak kata-kata anda muncul bercampur-aduk bersama dan seluruh halaman keluar seperti hodgepodge fon misconstrued.
Kesimpulannya
Harapan saya konsep-konsep ini akan memberi sedikit cahaya pada subjek tipografi digital rumit. Ia boleh menjadi sukar untuk masuk ke dalam kerja sebagai seorang pereka, terutamanya jika seluruh topik asing kepada anda. Tetapi teruskan belajar dan pastikan untuk mengamalkan sekumpulan keseluruhan!
Minggu depan: Tunggu kerana kita akan melihat beberapa alat dan sumber berguna untuk tipografi web yang lebih baik.
Lebih banyak ...
Berikut ialah jawatan yang berkaitan dengan tipografi:
- Pameran Reka Bentuk Web dengan Typography Cantik
- Tipografi yang lebih baik untuk laman web moden
- Panduan Pantas Tipografi: Belajar dan Terinspirasi
