A Look Into Typography yang lebih baik untuk laman web moden

Teks digital boleh diformatkan dalam banyak perisa. Dengan kemajuan fon web dan skrip penyemak imbas, kami telah melihat kod projek baru untuk pemaju untuk digunakan. Pereka web juga mencari strategi terbaik untuk mengodkan laman web mereka dan membina gaya tipografi seragam di antara semua halaman mereka.

Banyak pereka web profesional telah menulis mengenai topik termasuk ciri dan perkhidmatan terkini. Anda perlu mempertimbangkan setiap laman web sebagai dokumen tunggal yang memadamkan reka bentuk susun atur akar anda. Di bawah pandangan ini, mudah untuk melihat bagaimana tipografi boleh mengalir dari halaman ke halaman dan menawarkan saluran unik untuk kreativiti. Dan ini menjadi kelas unik yang unik bagi perenggan dan tajuk anda.

Di bawah ini saya akan pergi ke beberapa idea hebat untuk pereka tipografi bercita-cita yang berminat untuk membina laman web. Blog, rangkaian sosial, dan perniagaan sentiasa mencari untuk mengemas kini laman web mereka sekarang. Dan gaya CSS untuk tipografi web memberikan sumber yang sangat baik untuk mula menyegarkan halaman anda.

Perbezaan dalam Internet Hari Ini

Web moden telah berkembang secara mendadak sejak awal tahun 2000. Terdapat banyak ciri baru untuk pereka web untuk mencipta karya hebat reka bentuk grafik, logo, spanduk, dan praktikal yang lain. Pelepasan spesifikasi HTML5 dan CSS3 juga telah mengambil tol mereka dengan cara lama membina fon web.

Ia kini sepenuhnya mungkin untuk memasukkan fon anda sendiri dengan CSS @ font-face harta. Anda boleh menggunakan mana-mana TrueType(.ttf) atau OpenType(.otf) dan simpan salinan secara tempatan pada pelayan anda. Kemudian dengan beberapa sihir CSS3 termasuk keluarga di mana saja di halaman web anda!

Di bawah teknik ini semata-mata mungkin untuk melihat bagaimana perkembangan Internet moden kami telah menjadi.

Dan dengan jQuery berkembang dalam popularitinya setiap hari, tidak hairanlah kami dapat membina kesan animasi yang mengagumkan ditambah dengan fon langganan. Sebagai alternatif kepada kaedah di atas plugin TTFGen untuk jQuery membolehkan anda memasukkan sebarang font TrueType ke halaman web anda.

Kaedah ini sedikit lebih dipercayai kerana anda tidak memerlukan pelayar moden yang menyokong piawaian CSS3 untuk menjadikannya berfungsi. Tetapi, tentu saja peramban warisan seperti Internet Explorer 6 akan berjuang untuk menghasilkan dengan benar.

Tetapi terima kasih kebaikan kebanyakan pengguna telah beralih ke perisian pelayaran yang lebih baru yang menyokong standard ini! Dan apabila anda sedang membangunkan untuk web, anda harus mempertimbangkan dengan tepat siapa pasaran anda. Anda tidak boleh menggembirakan semua orang sepanjang masa, tetapi anda pasti boleh cuba untuk mendapatkan cukup dekat.

Tujuan Typography Digital

Susun idea aneh untuk dipertimbangkan, tetapi apakah maksud sebenar teks digital? Untuk menyampaikan maklumat, berkongsi sumber, dan menawarkan pendapat anda kepada pengguna internet dunia. Teks adalah bentuk media yang paling sederhana untuk berkongsi pemikiran dan idea. Tetapi ia juga sangat rumit dan mengandungi butiran utama bahawa foto / video tidak boleh digunakan.

Pelawat anda mungkin mencari tapak web anda berdasarkan kata kunci dalam teks atau tajuk anda - sebab lain untuk memberi perhatian yang teliti terhadap salinan web anda. Dan sebaik sahaja anda mendapat perhatian ke laman web anda, anda perlu menumpukan kepekatan mereka. Ini paling mudah dilakukan dengan tajuk yang berani dan teks halaman jarak jauh.

Jika anda menulis artikel atau tutorial maka anda perlu menggunakan bahasa yang jelas. Ia sama pentingnya bagaimana teks halaman anda kelihatan dan kualiti kandungan anda. Semakin besar teks anda kelihatan lebih mudah untuk membaca dan mengimbas kata kunci. Dan kerana perenggan akan mengandungi majoriti kandungan anda, anda perlu menghabiskan banyak masa prototaip untuk kesesuaian yang betul. Perenggan digunakan untuk menyampaikan mesej anda dalam potongan berukuran kecil yang dipecah menjadi ayat. Fahami bagaimana anda menulis dan merancang lebih awal untuk mendapatkan susun atur halaman yang sesuai.

Selain itu dengan teks halaman anda datang media dan kandungan sekunder. Sekiranya perenggan anda mengandungi maklumat utama, mungkin anda mempunyai graf atau imejan untuk mempercepatkan halaman. Aksen ini hanya sentuhan yang betul yang menjaga pengguna bergerak melalui laman web anda.

Video dan imej dapat memecahkan kandungan anda dan menjadikannya kelihatan seperti pembaca bergerak lebih cepat melalui artikel anda. Tetapi gunakan perkara ini dengan berhati-hati dan jangan biarkan apa-apa mengatasi mesej inti anda. Pengguna (kebanyakannya) datang ke laman web anda untuk maklumat dan tidak mahu terlalu banyak gangguan.

Semua pilihan pemformatan lain digunakan untuk menentukan fungsi atau tujuan. Sebagai contoh, teks hiperpautan sering warna yang berbeza dari yang lain untuk menonjol sebagai “boleh diklik”. Anda boleh bekerja dengan perkataan berani atau berulang yang menambah penekanan kepada ayat-ayat anda. Dan penggunaan blockquotes atau teks praformatted dapat membantu untuk menggambarkan pernyataan asas atau kod web, masing-masing.

Tajuk Laman Web

Salah satu aset yang paling penting untuk tipografi web anda adalah tag tajuk. Jika anda tidak dikenali dengan tajuk HTML dari

kepada

dengan bekas yang memegang paling penting dan terakhir sekurang-kurangnya. Penanda ini berguna untuk difahami kerana Google juga meletakkan domain dan halaman web anda berdasarkan struktur kandungan. Oleh itu, anda akhirnya mempunyai kawalan ke atas kata kunci yang anda gunakan dan tahap tajuk yang anda perlukan.

Walaupun spesifikasi HTML5 standard termasuk sehingga 6 gaya tajuk yang berbeza, saya akan mengesyorkan penggunaan antara 3-4. Ia tidak perlu memasukkan mereka semua dalam halaman anda. Dan juga sangat tidak mungkin anda akan dapati penggunaan untuk 6 tajuk yang berbeza. Apabila pertama kali duduk untuk membina gaya anda cuba merangka beberapa contoh untuk tajuk untuk melihat apa yang anda suka.

Photoshop sangat baik untuk senario ini. Anda juga boleh cuba coding tajuk yang berbeza dalam HTML untuk melihat bagaimana mereka melihat dalam penyemak imbas. Apa yang penting ialah bekerja dengan aliran halaman dan tajuk reka bentuk mengikut kedudukan mereka.

Sebagai contoh, anda

tag sepatutnya paling menonjol di kalangan semua tajuk halaman anda.

dan

adalah tag yang paling popular dan dicadangkan oleh Google untuk merangkak kandungan halaman. Menggunakan kesan reka bentuk seperti huruf tebal, garis bawah, sempadan yang putus-putus, atau warna yang berbeza akan membantu tajuk anda melompat dari halaman.

Jarak juga penting apabila datang kepada tajuk, atau mana-mana bahagian kandungan anda untuk perkara itu. Pastikan anda menambah margin tambahan di antara tajuk anda dan kawasan kandungan utama. Jika anda telah membuat font anda cukup besar, setiap tajuk harus menonjol kerana blok teras itu sendiri. Melihat ini sesuai jika anda ingin menarik perhatian pembaca anda dengan mesej yang jelas.

Membina Hyperlink Unik

Terdapat banyak perkara yang boleh dikatakan mengenai topik pautan halaman. Satu cara atau yang lain anda harus menggunakan hiperpautan dalam kod anda. Mereka sangat penting sebagai antara muka navigasi utama antara halaman yang berbeza di laman web anda. Anda juga boleh memaut ke blog lain atau juga catatan blog yang diarkibkan untuk rujukan di kemudian hari.

Anda harus memilih teks pegangan untuk pautan anda dengan berhati-hati. Ini adalah kandungan khusus yang akan diberi aksen dengan gaya pautan. Sebagai contoh, "klik di sini" sangat popular dan digunakan untuk muat turun langsung sepanjang masa. Cuba untuk mengelakkan pendekatan sistematik ini dan sebaliknya mendapatkan sedikit kreatif dengan teks hiperpautan anda. Pelawat anda lebih cenderung untuk mengklik pautan jika mereka juga boleh mengenali konteks dan mungkin mengetahui apa halaman baru akan mengandungi.

Apabila pergi ke gaya hubungan anda, anda harus mempertimbangkan perkara berikut - bagaimana perubahan akan kelihatan dalam persediaan halaman anda, jenis warna latar belakang yang anda kerjakan, dan warna apa teks untuk kontras?

Pautan hendaklah muncul dengan jelas dari halaman sebagai butang klik-boleh - selepas semua, itu adalah fungsi mereka. Inilah sebabnya mengapa biru lama dengan kesan teks garis bawah berfungsi dengan baik. Tetapi jika anda mendapati bahawa warna alternatif berfungsi dengan lebih baik, anda harus mencubanya. Tidak ada satu-saiz-semua penyelesaian untuk reka bentuk pautan. Hanya semalaman di sekeliling web dan anda pasti akan mengumpulkan sesuatu yang luar biasa.

Satu perkara menarik adalah beberapa ciri yang perlu anda cuba mengelakkan. Perkara-perkara seperti menukar font keluarga font atau saiz fon boleh sangat menjengkelkan. Ini akan menyebabkan teks memesongkan dan bergerak, yang mungkin meletakkan kursor tetikus di luar zon pautan. Dengan cara yang sama, anda harus mengelakkan penambahan margin / padding tambahan pada pautan atau kesan hover anda. Kerja-kerja ini lebih baik apabila anda tetap sederhana. Perubahan warna atau garis bawah yang ditambah pergi jauh dalam pengalaman pengguna.

Pembinaan Senarai Bergaya

Kemungkinan baik anda juga perlu bekerja dengan senarai pada satu ketika. Termasuk kedua-dua pesanan dan senarai tidak tersusun dalam HTML. Ini sesuai untuk menawarkan koleksi idea, produk, orang, atau pautan dalam talian dalam ruang yang sangat kecil. Styling tidak semua yang berbeza daripada perenggan atau tajuk, sama ada.

Pelawat anda harus memahami dengan segera bahawa mereka melihat senarai item. Simpan setiap item senarai berasingan dan terletak pada baris baru di halaman anda. Tambah beberapa ruang tambahan di antara mereka, jika mungkin. Ini akan memberikan beberapa ruang pernafasan dan muncul sebagai perpecahan yang baik untuk teks artikel. Sekiranya anda mahu anda boleh menebalkan fon atau senarai inden sedikit untuk menjauhkan diri dari margin susun atur standard.

Menambah ciri tambahan untuk membantu senarai anda menonjol bukan keperluan. Tetapi jika anda menikmati gaya susun atur blok itu, ia benar-benar memfokuskan pada senarai anda. Anda boleh cuba menambah latar belakang atau ikon cahaya. A List Apart mempunyai penulisan yang hebat mengenai senarai penyaman yang saya fikir termasuk beberapa pengetahuan yang sangat kuat. Tetapi jika anda mengekalkan kandungan halaman linear dan menggunakan blok senarai hanya apabila diperlukan, anda tidak sepatutnya menghadapi sebarang susun atur reka bentuk.

Cara Membuat Petikan Dalam Halaman

Kemunculan petikan dan kutipan sangat terhad pada hari-hari ini. Di laman web awal anda tidak akan melihat banyak elemen ini digunakan. Mungkin dalam editorial, esei, atau kertas pendidikan. Tetapi HTML5 pasti telah memperbaharui peraturan yang sedikit yang membuat kata-kata blokiran lebih mudah.

Laman web HTML5 Doctor termasuk sumber menarik untuk membincangkan topik yang tepat ini. Mereka membincangkan penggunaan kandungan di dalam sekatan sebagai wujud dalam struktur dokumen. Jadi anda boleh menyertakan tajuk, perenggan, dan juga senarai dan kaki. Penggunaan utama a