Pandangan Menjadi Tipografi Yang Lebih Baik Untuk Situs Web Modern

Teks digital dapat diformat dalam berbagai rasa. Dengan semakin maju font web dan skrip browser, kami telah melihat kode proyek baru untuk digunakan oleh pengembang. Desainer web juga mencari strategi terbaik untuk membuat kode situs web mereka dan membangun gaya tipografi yang seragam di antara semua halaman mereka.

Banyak desainer web profesional telah menulis tentang topik ini termasuk fitur dan layanan yang diperbarui. Anda harus mempertimbangkan setiap halaman web sebagai dokumen tunggal yang memutuskan desain tata letak root Anda. Di bawah tampilan ini, mudah untuk melihat bagaimana tipografi dapat mengalir dari halaman ke halaman dan menawarkan outlet unik untuk kreativitas. Dan ini menjadi sangat jelas membangun kelas unik untuk paragraf dan heading Anda.

Di bawah ini saya akan membahas beberapa ide fantastis untuk para calon desainer tipografi yang tertarik untuk membangun web. Blog, jejaring sosial, dan bisnis selalu mencari untuk memperbarui situs web mereka saat ini. Dan gaya CSS untuk tipografi web menyediakan sumber yang bagus untuk mulai menyegarkan halaman Anda.

Perbedaan di Internet Saat Ini

Web modern telah berkembang secara dramatis sejak awal tahun 2000. Ada banyak fitur baru bagi para desainer web untuk menciptakan karya-karya fantastis desain grafis, logo, spanduk, dan praktis hal lain. Rilis spesifikasi HTML5 dan CSS3 juga berdampak pada cara lama membangun font web.

Sekarang sepenuhnya mungkin untuk memasukkan font Anda sendiri dengan CSS @ font-face milik. Anda bisa menggunakan apa saja TrueType(.ttf) atau OpenType(.otf) mengajukan dan menyimpan salinan secara lokal di server Anda. Kemudian dengan beberapa sihir CSS3 sertakan keluarga di mana saja di halaman web Anda!

Di bawah teknik ini saja dimungkinkan untuk melihat bagaimana perkembangan internet modern kita.

Dan dengan jQuery yang semakin populer setiap hari, tidak mengherankan kita dapat membangun efek animasi yang luar biasa ditambah dengan font khusus. Sebagai alternatif dari metode di atas plugin TTFGen untuk jQuery memungkinkan Anda memasukkan font TrueType ke halaman web Anda.

Metode ini sedikit lebih andal karena Anda tidak memerlukan peramban modern yang mendukung standar CSS3 untuk membuatnya berfungsi. Tapi tentu saja browser lawas seperti Internet Explorer 6 akan berjuang untuk membuat dengan benar.

Tapi syukurlah sebagian besar pengguna telah beralih ke perangkat lunak penelusuran yang lebih baru yang mendukung standar-standar ini! Dan ketika Anda mengembangkan untuk web, Anda harus mempertimbangkan dengan tepat untuk siapa pasar Anda. Anda tidak bisa menyenangkan semua orang setiap saat, tetapi Anda pasti bisa mencoba untuk cukup dekat.

Tujuan Tipografi Digital

Semacam ide aneh untuk dipertimbangkan, tapi apa tujuan sebenarnya dari teks digital? Untuk menyampaikan informasi, berbagi sumber, dan menawarkan pendapat Anda kepada dunia pengguna internet. Teks adalah bentuk media yang paling sederhana untuk berbagi pemikiran dan ide. Tetapi juga sangat kompleks dan berisi detail utama yang tidak bisa digunakan oleh foto / video.

Pengunjung Anda cenderung menemukan situs web Anda berdasarkan kata kunci dalam teks atau judul Anda - hanya alasan lain untuk memperhatikan salinan web Anda. Dan setelah Anda mendapatkan perhatian ke situs web Anda, Anda perlu mempertahankan konsentrasi mereka. Ini paling mudah dilakukan dengan judul tebal dan teks halaman dengan spasi genap.

Jika Anda menulis artikel atau tutorial maka Anda perlu menggunakan bahasa yang jelas. Nya sama pentingnya dengan bagaimana tampilan halaman teks Anda dan kualitas konten Anda. Semakin besar teks Anda, semakin mudah membaca dan memindai kata kunci. Dan karena paragraf akan berisi sebagian besar konten Anda, Anda harus menghabiskan banyak waktu membuat prototipe untuk pas. Paragraf digunakan untuk menyampaikan pesan Anda dalam potongan berukuran kecil yang dipecah menjadi kalimat. Pahami bagaimana Anda menulis dan rencanakan ke depan untuk mendapatkan tata letak halaman yang pas.

Selain itu dengan teks halaman Anda datang media dan konten sekunder. Jika paragraf Anda berisi informasi utama, mungkin Anda memiliki grafik atau citra untuk meningkatkan halaman. Aksen-aksen ini adalah sentuhan yang tepat yang membuat pengguna bergerak di situs Anda.

Video dan gambar dapat memecah konten Anda dan membuatnya tampak seperti pembaca bergerak lebih cepat melalui artikel Anda. Tetapi gunakan barang-barang ini dengan hemat dan jangan biarkan apa pun membanjiri pesan inti Anda. Pengguna (kebanyakan) datang ke situs Anda untuk mendapatkan informasi dan tidak ingin terlalu banyak gangguan.

Semua opsi pemformatan lainnya digunakan untuk menentukan fungsionalitas atau tujuan. Misalnya, teks hyperlink seringkali berbeda warna dari yang lain untuk menonjol “diklik”. Anda dapat bekerja dengan kata-kata yang dicetak tebal atau miring yang menambahkan penekanan pada kalimat Anda. Dan penggunaan blockquotes atau teks yang telah diformat sebelumnya dapat membantu untuk menggambarkan pernyataan mendasar atau kode web.

Header Halaman Web

Salah satu aset terpenting untuk tipografi web Anda adalah tag heading. Jika Anda tidak terbiasa dengan tajuk HTML mulai dari

untuk

dengan yang pertama memegang yang paling penting dan yang terakhir yang paling tidak. Markup ini berguna untuk dipahami karena Google juga memberi peringkat domain dan halaman web Anda berdasarkan pada struktur konten. Dengan demikian, Anda akhirnya memiliki kendali atas kata kunci yang Anda gunakan dan tajuk judul yang Anda perlukan.

Meskipun spesifikasi HTML5 standar mencakup hingga 6 gaya tajuk yang berbeda, saya akan merekomendasikan penggunaan antara 3-4. Tidak perlu memasukkan semuanya di halaman Anda. Dan itu juga sangat tidak mungkin Anda akan menemukan penggunaan untuk 6 pos berbeda. Saat pertama kali duduk untuk membangun gaya Anda, coba buat beberapa contoh untuk pos untuk melihat apa yang Anda sukai.

Photoshop sangat baik untuk skenario ini. Anda juga dapat mencoba mengodekan judul yang berbeda dalam HTML untuk melihat tampilannya di browser. Yang penting adalah bekerja dengan aliran halaman Anda dan judul desain sesuai dengan peringkat mereka.

Misalnya, Anda

tag harus paling menonjol di antara semua judul halaman Anda.

dan

adalah tag paling populer dan direkomendasikan oleh Google untuk merayapi konten halaman. Menggunakan efek desain seperti huruf tebal, garis bawah, garis putus-putus, atau warna berbeda akan membantu judul Anda melompat keluar dari halaman.

Jarak juga penting ketika datang ke pos, atau bagian dari konten Anda dalam hal ini. Pastikan Anda menambahkan margin tambahan antara pos Anda dan area konten utama. Jika Anda telah membuat font Anda cukup besar, setiap pos harus menonjol karena itu adalah blok inti sendiri. Tampilan ini sangat ideal jika Anda ingin menarik perhatian pembaca Anda dengan pesan yang jelas.

Membangun Hyperlink Unik

Ada banyak yang bisa dikatakan tentang topik tautan halaman. Dengan satu atau lain cara Anda harus menggunakan hyperlink dalam kode Anda. Mereka sangat penting sebagai antarmuka navigasi utama antara berbagai halaman di situs Anda. Anda juga dapat menautkan ke blog lain atau bahkan posting blog Anda yang diarsipkan untuk referensi di kemudian hari.

Anda harus memilih teks penampung untuk tautan Anda dengan sangat hati-hati. Ini adalah konten spesifik yang akan diberi aksen oleh gaya tautan. Misalnya "klik di sini" sangat populer dan digunakan untuk unduhan langsung hampir sepanjang waktu. Cobalah untuk menghindari pendekatan sistematis ini dan sebaliknya menjadi sedikit kreatif dengan teks hyperlink Anda. Pengunjung Anda lebih cenderung mengklik tautan jika mereka juga dapat mengenali konteks dan mungkin mencari tahu apa yang akan berisi halaman baru.

Saat akan menata tautan Anda, Anda harus mempertimbangkan yang berikut ini - bagaimana perubahan akan terlihat di pengaturan halaman Anda, apa jenis warna latar belakang yang sedang Anda kerjakan, dan apa warna teks untuk kontras?

Tautan akan muncul secara terang-terangan dari halaman sebagai item yang dapat diklik - setelah semua, itulah fungsinya. Inilah sebabnya mengapa biru tua dengan efek teks garis bawah berfungsi dengan baik. Tetapi jika Anda menemukan bahwa warna alternatif berfungsi lebih baik Anda harus mencobanya. Tidak ada solusi satu ukuran untuk semua desain tautan. Cukup telusuri sedikit di web dan Anda pasti akan mengumpulkan sesuatu yang luar biasa.

Satu hal yang menarik adalah beberapa fitur yang harus Anda coba menghindari. Hal-hal seperti mengubah keluarga font teks atau ukuran font bisa sangat menjengkelkan. Ini akan menyebabkan teks terdistorsi dan bergerak, yang dapat menempatkan kursor mouse tepat di luar zona tautan. Dengan cara yang sama Anda harus menghindari penambahan margin / padding tambahan untuk tautan Anda atau efek hover. Ini bekerja jauh lebih baik ketika Anda tetap sederhana. Perubahan warna atau penambahan garis bawah sangat membantu pengguna.

Konstruksi Daftar Gaya

Kemungkinannya bagus Anda harus juga bekerja dengan daftar di beberapa titik. Termasuk adalah daftar teratur dan tidak berurutan dalam HTML. Ini sempurna untuk menawarkan koleksi kecil ide, produk, orang, atau tautan daring dalam ruang yang sangat kecil. Styling juga tidak jauh berbeda dengan paragraf atau heading.

Pengunjung Anda harus segera memahami bahwa mereka melihat daftar barang. Simpan setiap item daftar terpisah dan terletak pada baris baru di halaman Anda. Tambahkan beberapa ruang ekstra di antara mereka, jika memungkinkan. Ini akan memberikan ruang bernapas dan muncul sebagai perpisahan yang bagus untuk teks artikel. Jika mau, Anda bahkan dapat menebalkan font atau daftar indentasi sedikit untuk menjauh dari margin tata letak standar.

Menambahkan fitur tambahan untuk membantu daftar Anda menonjol bukanlah keharusan. Tetapi jika Anda menikmati gaya tata letak blok itu benar-benar memegang fokus pada daftar Anda. Anda dapat mencoba menambahkan latar belakang cahaya atau ikon. A List Apart memiliki artikel bagus tentang daftar penjinakan yang menurut saya mencakup beberapa pengetahuan yang sangat kuat. Tetapi jika Anda menjaga konten halaman linier dan menggunakan blok daftar hanya jika diperlukan, Anda tidak akan mengalami hambatan desain.

Cara Membuat Kutipan Dalam Halaman

Penampilan kutipan dan kutipan sangat terbatas hari ini. Di web awal Anda tidak akan melihat banyak elemen ini digunakan. Mungkin dalam editorial, esai, atau makalah pendidikan. Tapi HTML5 telah memperbarui sedikit aturan yang membuat mengutip blockquotes jauh lebih mudah.

Situs web Dokter HTML5 mencakup sumber yang menarik untuk membahas topik yang tepat ini. Mereka membahas penggunaan konten di dalam blockquotes sebagai tampilan internal pada struktur dokumen. Jadi, Anda dapat memasukkan judul, paragraf, dan bahkan daftar dan footer juga. Penggunaan utama a