Amalan Terbaik Tipografi Web untuk Laman Web Moden

Panduan untuk tipografi web responsif yang merangkumi semua amalan terbaik & peraturan ukuran gaya fon untuk memastikan kandungan laman web anda dapat dibaca & kegembiraan untuk dilihat.


Amalan terbaik tipografi

Pelukis mempunyai sikatnya. Pemahat mempunyai tanah liat mereka. Pereka web mempunyai … fon mereka? Seperti yang dimiliki oleh Oliver Richenstein sekarang ditulis dengan terkenal: “95% maklumat di web adalah bahasa tulisan.” Setelah mempertimbangkan dengan teliti anda terhadap grafik, ikon, menu cantik, dan antara muka yang bersih pada laman web anda — adalah menjadi dosa untuk kemudian mengabaikan komponen penting dari tipografi web.

Jangan risau – anda tidak perlu menjadi perancang utama untuk membuat teks yang kemas dan berkesan. Dengan mematuhi beberapa panduan dan prinsip yang boleh dipercayai, tipografi web anda akan menyampaikan maklumat yang diinginkan pengguna dengan cara yang mudah dibaca dan dirancang dengan teliti.

Menetapkan Hierarki Visual

Objektif terpenting dari tipografi web yang baik adalah membuat a hierarki kandungan yang mengalir secara visual dari satu elemen ke elemen yang lain. Perbezaan yang betul antara Tajuk, Tajuk Tajuk dan teks Badan anda, pelbagai bobot dan gaya fon, dan mempunyai ruang kosong yang cukup di antara blok teks adalah semua faktor yang mendorong pengalaman membaca yang mudah.

Contoh hierarki visual tipografi

Membina Badan yang Kuat

Urusan perniagaan pertama anda adalah untuk mementingkan laman web anda Badan teks, kerana ini adalah masa yang akan diluangkan oleh pengunjung anda untuk membaca. Matlamat anda adalah untuk membuat teks yang mengalir secara semula jadi di perenggan besar, memberi inspirasi kepada irama yang sihat untuk membaca yang panjang.

  • Saiz fon yang paling biasa untuk teks Badan ialah 16 piksel—Atau, lebih baik lagi, 1em (lebih lanjut mengenai ini kemudian).
  • Elakkan meluruskan teks anda di tengah-tengah, kerana tepi yang tidak rata di kedua-dua sisi akan menjadikan pemandangan tidak menarik. Sebaliknya, tetapkan kiri dan kanan margin bekas teks ke automatik untuk mencapai kesan yang lebih diingini.
  • Wajar teks berfungsi dengan baik untuk surat khabar, bukan laman web. Sifat susun atur cecair dapat mewujudkan jurang jarak antara kata yang tidak dapat diramalkan.
  • Pilih kontras rendah fon melebihi yang tinggi. Font suka Didot berfungsi dengan baik untuk tajuk utama jumbo atau untuk pencetakan format besar, tetapi kontrasnya yang tinggi antara garis lekapan tebal dan tipis menjadikan sukar untuk membaca pada ukuran kecil di laman web.
  • Berhati-hati dengan kesahan. Dalam banyak huruf sans-serif, huruf besar “I” dan huruf kecil “l” terlihat sama, yang dapat menimbulkan kekeliruan yang tidak perlu.
  • Yang optimum ketinggian garisan teks perenggan adalah antara 1.25–1.5 × ukuran fon. Laraskan dengan sewajarnya berdasarkan jenis huruf yang anda pilih.

Tajuk Kejayaan

Untuk lebih baik atau buruk, kebanyakkan pembaca mungkin akan membaca halaman anda Tajuk tanpa mengganggu teks utama. Oleh itu, sangat penting untuk menarik perhatian mereka dan mendesak untuk membaca lebih lanjut dengan memastikan bahawa tipografi tajuk utama anda adalah luar biasa.

  • Ukuran fon purata untuk teks Tajuk ada di sekitar 36 piksel—Atau lebih baik lagi 2.25 pagi (kita akan sampai ke ini).
  • Perhatian harus selalu menuju ke Tajuk di hadapan Badan. Pastikan teks Tajuk anda tidak terlalu kuat dengan berat font yang terlalu tebal di Badan.
  • Pastikan tajuk utama anda memenuhi harapan pembaca. Teks yang jauh lebih besar dengan jarak yang cukup besar antara perenggan turunannya menandakan adanya perubahan dalam materi pelajaran, sedangkan tajuk utama yang lebih kecil lebih dekat dengan perenggan menunjukkan bahawa kandungannya berkaitan.
  • Sekiranya tajuk anda dilampirkan ke baris berikutnya, ketahuilah bahawa yang optimum ketinggian garisan untuk Tajuk adalah kurang daripada apa yang dimaksudkan untuk teks Badan.

Ruang Antara

Jumlah ruang yang memisahkan elemen halaman anda banyak mengatakan hubungan mereka antara satu sama lain, dan ini adalah prinsip reka bentuk yang tidak dapat dilupakan. Tajuk dominan yang dikelilingi oleh lautan putih memberikan konteks yang jauh berbeza daripada tajuk kecil yang dilampirkan dengan dekat pada perenggan (ingat kami sedang membina hierarki visual).

Secara amnya, lebih baik melakukan kesalahan kerana mempunyai terlalu banyak ruang putih daripada tidak mencukupi. Susun atur yang bersih dengan ruang putih yang mewah adalah yang disukai di web moden.

Jatuh dalam Talian

Bayangkan membaca teks pada monitor 27-inci resolusi tinggi anda yang membentang sepanjang kedua-dua tepi skrin. Mata anda akan menjadi lelah setelah hanya satu perenggan!

Penting untuk memastikan setiap baris teks utama anda terhad kepada sebilangan watak sehingga mata tetap tertumpu pada titik pusat. Konsensus yang popular adalah bahawa kaedah sihir ini untuk komputer meja adalah Panjang 60-75 aksara. Untuk skrin mudah alih, di mana kita mahu mengelakkan mata memulas dan teks yang terlalu padat, bilangan ini berada di sekitar 35-40 aksara setiap baris.

Memberi Skala

Banyak yang telah ditulis mengenai subjek penskalaan antara ukuran fon Badan dan Tajuk. Berapa ukuran H2 yang sempurna jika teks Badan anda, katakanlah, 1em? Menentukan perkadaran yang paling menyenangkan secara estetik antara teks Tubuh dan tajuk H1 – H6 adalah sesuatu yang bernasib baik yang telah dinyahkod oleh banyak tipografer. Selain itu, perkadaran matematik ini juga mesti disesuaikan berdasarkan ukuran skrin pengguna.

Pereka Jason Pamental menyediakan carta berguna kerana apa yang dia percaya adalah ukuran fon yang paling optimum di pelbagai peranti media — dan saya cenderung setuju dengannya. Pada dasarnya, walaupun ukuran H1 yang ideal pada desktop mungkin 3 × ukuran Badan, pada skrin mudah alih ini akan kelihatan terlalu berlebihan — jadi ia mesti dikecilkan untuk menampung kawasan tontonan yang lebih kecil.

Carta ukuran fon optimum di pelbagai peranti media

CATATAN CEPAT: Bagaimana anda dapat mengetahui sama ada anda mempunyai hierarki visual yang baik? Picit pada skrin anda sehingga semua teks menjadi kabur. Sekiranya susun atur muncul sebagai gumpalan amorf tanpa perbezaan antara bahagian, maka hierarki anda mungkin akan gagal. Namun, jika anda dapat dengan mudah mengetahui pemisahan antara blok teks, tajuk utama, dan mengetahui dengan jelas di mana mata harus bergerak, maka anda berada dalam keadaan hebat!

Menjaga Teks Responsif

Reka bentuk web responsif adalah amalan penting hari ini – terutamanya apabila semakin banyak orang menggunakan peranti mudah alih sebagai kaedah utama mereka untuk melayari Internet. Walaupun merancang dengan peratusan dan bukannya piksel telah merevolusikan cara gambar dan margin menyesuaikan diri dengan lebar cecair, tipografi web responsif sayangnya tetap menjadi telur yang lebih sukar untuk retak.

Mengoptimumkan saiz fon di pelbagai peranti boleh menjadi luar biasa kerana anda mesti menavigasi beberapa pertanyaan media untuk menyasarkan semua teks di laman web anda. Namun, dengan penyesuaian cepat pada unit pilihan anda, anda akan dapat dengan lebih mudah mengetahui saiz fon yang sesuai untuk digunakan untuk semua jenis skrin.

Ems Lebih Piksel

Untuk mempermudah tipografi laman web anda, buang piksel dan mulailah menggunakannya ems. Em membolehkan pemahaman yang lebih mudah mengenai penskalaan antara saiz fon laman web anda, dan unitnya yang lebih kecil lebih mudah dikendalikan daripada bilangan piksel dua digit.

Lebih penting lagi, dengan ems semuanya berkaitan dengan bekas induk. Sekiranya anda menetapkan ketinggian garisan wadah menjadi 1.5em, maka walaupun anda menukar saiz fon wadah itu, ketinggian garis tetap pada bahagian yang betul. Dengan piksel, anda harus sentiasa menyesuaikan sifat ketinggian garis kontena untuk setiap perubahan pada saiz fonnya untuk mengekalkan konsistensi visual.

Prinsip ini berlaku untuk margin, pembalut, jarak huruf, dan kebanyakan gaya lain yang anda gunakan pada teks laman web anda. Tidak perlu lagi bermain-main dengan piksel pada pelapik kandungan anda untuk setiap pertanyaan media — tetapkan keadaan awalnya dalam ems dan secara automatik ia akan disesuaikan dengan perkadaran asal!

Menggunakan Ems

Perkara pertama yang perlu dilakukan adalah menetapkan rujukan asas ukuran fon laman web anda. Dalam anda helaian gaya, masukkan ini:

badan {
saiz fon: 100%;
}

Ini menentukan saiz fon relatif dari kandungan laman web anda 1em, yang ditafsirkan oleh kebanyakan penyemak imbas 16 piksel. Kini semua ukuran tajuk anda – 2.25em, 1.5em, dan seterusnya – adalah gandaan langsung dari garis dasar 1em.

NOTA PENTING: Ems adalah lata—Berarti ukurannya relatif terhadap nilai yang ditetapkan dari induknya. Contohnya: Jika anda menetapkan ukuran fon Badan anda ke 1,25em dan kemudian ukuran fon bekas kanak-kanak menjadi 1,25em, kedua fon tersebut tidak akan sama ukurannya! Sebaliknya, teks bekas kanak-kanak berukuran 1.25 × ukuran induk 1.25em yang asal.

Lebih Banyak Petua Untuk Tipografi Web Hebat

Berikut adalah beberapa petua untuk tipografi web yang hebat:

Jangan keterlaluan

Anda harus menghadkan tipografi laman web anda kepada 2–3 fon kebanyakannya. Biasanya ini adalah fon untuk tajuk anda, fon untuk teks utama anda, dan mungkin fon sub tajuk jika diperlukan. Menggunakan terlalu banyak fon boleh membuat susun atur yang tidak kemas dan tidak fokus. Masa memuat laman web anda juga dapat dipengaruhi, seperti yang dijelaskan pada titik berikutnya.

Benarkan Hanya Yang Anda Perlu

Pertimbangkan hanya perkara yang paling diperlukan untuk laman web anda dan biarkan yang lain habis. Sekiranya anda tahu anda akan memerlukannya biasa, berani dan miring menggayakan fon tertentu, kemudian masukkan hanya pilihan tersebut dan tidak termasuk kurus, cahaya dan hitam gaya. Memuatkan lebih banyak gaya daripada yang diperlukan boleh mempengaruhi sumber laman web anda, kerana setiap gaya individu adalah permintaan pelayan yang berasingan.

Sekiranya anda tidak mahu menghadkan kreativiti anda semasa fasa reka bentuk, teruskan dan sematkan semuanya; ingatlah untuk membuang kelebihan gaya sebelum laman web anda disiarkan.

Sekiranya Anda Tidak Dapat Membacanya, Jangan Gunakannya

Yang ini besar. Semasa bunga fon tulisan tangan mungkin menggoda untuk digunakan, jika ada sedikit kekeliruan sama ada itu “g” atau “y”, maka jangan gunakannya! Tidak ada yang lebih mengecewakan pembaca daripada berjuang untuk menguraikan fon yang tidak terbaca.

Memilih Teks Nyata Terhadap ‘Lorem Ipsum’

Setiap pereka bergantung lorem ipsum teks palsu untuk mengisi kawasan kandungan kosong semasa merancang susun atur projek. Anda mungkin terkejut, bagaimanapun, seberapa besar kesan menggunakan kandungan sebenar yang dapat dibuat pada rupa dan nuansa tipografi anda. ‘Lorem ipsum’ sama sekali tidak beremosi dan berongga secara intelektual; ini tidak memberikan petunjuk nyata bagaimana kata-kata dan keperibadian anda akan dinyatakan melalui jenis huruf. Oleh itu, pasangkan kandungan sebenar ke laman web anda secepat mungkin sebelum menyelesaikan reka bentuk laman web anda.

Berbeza dengan Latar Belakang

Fon gelap dengan latar belakang putih polos akan sentiasa memberikan keterbacaan terbaik. Teks putih terhadap gambar yang gelap atau kabur juga menjadi popular akhir-akhir ini. Perlu diketahui bahawa latar belakang anda tidak terlalu rumit atau terperinci, yang akan mengatasi teks latar depan.

Contoh tipografi teks yang lebih buruk dari latar belakang teksContoh amalan tipografi yang buruk menggunakan latar belakang “teks di atas teks”.

Berpasangan Font – Suka Menarik Suka

Memasangkan fon dengan keperibadian yang sama sekali berbeza akan menimbulkan isyarat keliru. Keduanya dapat bertentangan gaya, tetapi secara emosional mereka harus menyampaikan mesej yang sama.

Berpasangan Font – Simpan dalam Keluarga

Penyelesaian paling mudah adalah yang terbaik. Kadang-kadang pasangan terbaik berasal dari penggunaan variasi (serif, berat gantian, papak) dalam Keluarga Font yang sama.

Pautan pautan

Amalan yang biasa dan diharapkan adalah gariskan pautan dan hapuskan garis bawah pada acara hover. Semasa melalui laluan ini, pastikan teks yang anda tekankan dicetak miring atau berani daripada digarisbawahi untuk mengelakkan kekeliruan.

Walau bagaimanapun, pada masa ini, teks berlabuh umumnya berwarna, dengan kesan peralihan yang berlaku ketika dituding. Dari perspektif reka bentuk, ini tidak dapat dinafikan adalah pilihan yang lebih baik — tetapi ingat untuk memastikannya tetap konsisten!

Beberapa CSS yang Perlu Tahu

Ini mempengaruhi jarak antara huruf. Berguna untuk menekankan tajuk utama.

jarak huruf: x.xxem;

Ini mempengaruhi jarak antara perkataan:

jarak perkataan: x.xxem;

Ini memberikan alternatif kepada semua cap untuk penekanan. Berguna juga untuk singkatan.

font-varian: huruf kecil;

Ini akan MENDAPATKAN SEMUA TEKS ANDA.

text-transform: huruf besar;

Ini akan Huruf Besar Huruf Pertama.

text-transform: menggunakan huruf besar;

Ini akan melengkapkan teks.

hiasan teks: garis-melalui;

Ini meningkatkan paparan fon dalam penyemak imbas moden:

rendering teks: optimizeLegibility

Memahami Jenis Fail Font

Sebaiknya masukkan pelbagai jenis fail untuk memastikan fon akan dimuat dengan betul dalam pelbagai penyemak imbas. Ini adalah perkara yang paling perlu anda ambil perhatian:

Jenis Sejati

TTF adalah format yang paling biasa untuk Mac dan Windows, dan ia disokong di semua penyemak imbas utama.

Jenis Terbuka

OTF juga disokong secara meluas, dan memungkinkan untuk menambah seperti topi kecil dan watak ganti tanpa perlu memasukkan fon yang terpisah.

Jenis Terbuka Terbenam

EOT hanya disokong oleh Internet Explorer — dan melainkan jika anda bimbang tentang pengguna pada versi lama IE, mungkin yang terbaik adalah membiarkannya.

Format Fon Terbuka Web

WOFF – dan penggantinya, WOFF2 – adalah raja baru di bandar. Sokongan mereka dalam penyemak imbas utama dan kemampuan untuk dimampatkan menjadikan mereka jenis pilihan fail moden.

Perlu Menukar Jenis Fail?

Anda mungkin akan menghadapi situasi di mana anda hanya mempunyai satu jenis fail fon dan perlu menukarnya menjadi yang lain. FontSquirrel dan Font2Web tawarkan alat dalam talian yang akan melakukan begitu sahaja.

Kesimpulannya

Anda sudah tahu itu kandungan adalah aspek paling penting dalam laman web anda. Kandungan yang dibuat dengan baik memerlukan tipografi yang dibuat dengan baik; jangan mengecewakan pengunjung laman web dengan teks yang sukar dibaca atau membingungkan strukturnya. Dengan hierarki visual yang dirancang dengan teliti dan mematuhi amalan terbaik tipografi, pemikiran kreatif anda juga dapat disampaikan secara kreatif. Selamat menaip!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map