Cara Menampilkan Tulisan Anda Jadi Bersinar: 3 Trik Penataan CSS

Tulisan Anda adalah inti dari blog Anda.

Konten adalah raja bukan?

Itulah yang menarik orang dan membuat mereka terus membaca blog Anda.

Tapi yang juga sama pentingnya adalah bagaimana Anda benar-benar menampilkan tulisan Anda. Secara visual, yaitu.

Konten Anda mungkin bagus, tetapi jika sulit bagi seseorang untuk membaca, Anda mungkin kehilangan lebih banyak pembaca daripada yang Anda kira.

Dengar, saya bukan penulis terlatih, tapi saya seorang desainer web dan saya tahu apa yang terlihat bagus. Dan yang biasanya terlihat bagus bukanlah tentang dekorasi dan rasa, tetapi lebih pada apa yang berhasil dan apa yang membuat segalanya mudah dibaca dan dipahami.

Saya telah mempelajari selama bertahun-tahun berbagai cara untuk menampilkan konten dalam bentuk digital, jadi saya ingin menunjukkan kepada Anda beberapa cara cepat dan mudah untuk memastikan konten Anda ditampilkan dengan baik di posting blog Anda dari sudut pandang desainer web.

Ada beberapa cara agar Anda dapat membuat tweak styling cepat ke blog Anda menggunakan sedikit CSS (Cascading Style Sheets) sehingga Anda, penulis, dapat menampilkan konten Anda dan membuatnya semudah mungkin bagi pembaca Anda untuk menikmatinya.

Saya akan memberi Anda beberapa kode gesek CSS yang dapat Anda tambahkan ke lembar gaya kustom Anda dan edit sesuai keinginan Anda. Ikuti petunjuk tentang cara mengedit CSS di blog Anda jika Anda tidak yakin bagaimana cara mengakses lembar gaya kustom blog Anda..

Tiga Trik untuk Menata Konten Anda untuk Menampilkan Tulisan Anda

1. Percantik Paragraf Anda

Untuk memastikan paragraf Anda mudah dibaca, berikut adalah beberapa tip yang perlu diingat. Kami akan menata tag p (paragraf) di sini bersama-sama.

• Pilih font yang nyaman di mata. Gunakan font serif atau sans serif, bukan tulisan tangan.

Pilih bobot yang tidak terlalu kurus. Beberapa font yang sangat tipis tidak terlihat bagus di browser dan sistem operasi tertentu (yaitu mac atau PC) jadi mintalah orang untuk memeriksanya untuk Anda dan memberi Anda acungan jempol.

Pada saat yang sama, pilih font yang tidak terlalu tebal. Anda ingin memiliki kontras yang cukup dengan teks tebal apa pun.

Saat memilih font, pastikan Anda menggunakan font sistem, font yang telah Anda unggah ke file blog, atau font Google. Saya sarankan menggunakan font Google karena gratis, paling beragam, dan paling mudah digunakan. Untuk lebih jelasnya, lihat cara menggunakan font keren di blog Anda.

Ketika Anda telah memilih font Anda, Anda akan pergi ke lembar gaya kustom Anda dan menambahkan kode ini:

<pra>
P {
font-family: MASUKKAN NAMA FONT;
}
</pre>

• Gunakan ukuran font yang mudah dibaca di layar ukuran apa pun. Periksa blog Anda di ponsel dan pastikan teksnya tidak terlalu kecil untuk mata yang lelah atau tua.

Ukuran yang baik untuk paragraf biasanya 14 hingga 16 piksel. Tidak semua font ditampilkan sama pada ukuran yang sama, jadi mainkanlah untuk melihat apa yang terlihat terbaik.

<pra>
P {
font-family: MASUKKAN NAMA FONT;
ukuran font: 16px;
}
</pre>

• Gunakan ketinggian garis yang tepat (terdepan). Ketinggian baris yang tepat juga membantu keterbacaan karena memberikan ruang bernapas pada paragraf Anda. Tinggi garis yang baik adalah 1,5, dengan kata lain 1,5 kali ukuran teks (tinggi garis 2 akan diberi spasi ganda).

<pra>
P {
font-family: MASUKKAN NAMA FONT;
ukuran font: 16px;
tinggi garis: 1,5;
}
</pre>

• Hindari teks hitam murni di atas putih. Sulit di mata. Alih-alih memilih abu-abu gelap (saya suka #333333) untuk salinan Anda untuk sedikit mengurangi kontras.

<pra>
P {
font-family: MASUKKAN NAMA FONT;
ukuran font: 16px;
tinggi garis: 1,5;
warna: #333333;
}
</pre>

• Hindari paragraf perataan tengah. Memusatkan salinan tubuh Anda terlihat amatir dan membuatnya lebih sulit untuk dibaca. Mengapa? Setiap kali mata Anda berpindah ke baris baru, ia harus berjuang untuk menemukan awal baris berikutnya karena tidak pernah berada di tempat yang sama. Cadangan perataan tengah untuk puisi, teks, atau potongan pendek teks yang menarik perhatian dan pilih kiri menyelaraskan atau membenarkan paragraf biasa Anda. Teks yang dibenarkan diberi spasi sehingga sisi kiri dan kanan paragraf memiliki tepi yang lurus.

<pra>
P {
font-family: MASUKKAN NAMA FONT;
ukuran font: 16px;
tinggi garis: 1,5;
warna: #333333;
text-align: membenarkan;
}
</pre>

<pre>text-align: kiri; </pre> adalah perilaku default dan tidak perlu ditentukan kecuali Anda perlu mengganti gaya sebelumnya.

• Terakhir, tambahkan spasi putih. Anda akan menginginkan ruang putih yang cukup di antara paragraf Anda untuk keterbacaan yang optimal. Aturan praktis yang baik adalah menambahkan margin di bawah setiap paragraf sama dengan sekitar dua kali lipat ukuran font Anda.

<pra>
P {
font-family: MASUKKAN NAMA FONT;
ukuran font: 16px;
tinggi garis: 1,5;
warna: #333333;
text-align: membenarkan;
margin-bawah: 32px;
}
</pre>

2. Gunakan Hirarki

Anda menggunakan hierarki saat Anda menguraikan posting Anda dengan menggunakan judul dan subjudul.

Untuk membuat hierarki visual dalam posting Anda, gayakan judul dan subjudul Anda sehingga mudah untuk membedakannya. Berikut adalah beberapa tips:

• Gunakan font yang sama untuk semua judul Anda dalam berbagai ukuran.
• Gunakan font yang mudah dibaca, seperti font serif atau sans serif. Anda dapat memilih untuk menggunakan jenis huruf yang sama dengan salinan tubuh Anda dalam bobot yang lebih tebal atau Anda dapat memilih jenis huruf lain yang kontras dengan baik dengan salinan tubuh Anda.
• Atur judul dan subjudul menjadi tebal atau lebih berat.
• Gunakan Typecast untuk bermain dengan berbagai font, ukuran, dan bobot untuk judul Anda dan bandingkan dengan teks paragraf Anda.

Berikut adalah contoh ukuran font yang mungkin Anda dapatkan jika paragraf Anda diatur ke ukuran font 16px. Anda kemudian akan naik dari sana:

• heading h6 = 16px (biasanya berukuran sama dengan teks paragraf, tetapi dicetak tebal dan pada barisnya sendiri)
• judul h5 = 18px
• judul h4 = 22px
• judul h3 = 26px
• judul h2 = 30px
• heading h1 (judul posting blog Anda) = 36px

Sekali lagi, mainkan dengan Typecast untuk melihat apa yang terlihat terbaik di mata Anda. Setelah Anda memutuskan font dan ukuran yang ingin Anda gunakan untuk heading Anda, Anda akan ingin pergi ke custom style sheet Anda dan menambahkan CSS ini untuk semua heading Anda:

<pra>
h1, h2, h3, h4, h5, h6 {
font-family: MASUKKAN NAMA FONT;
ukuran font: 36px;
font-berat: tebal;
}
</pre>

Selanjutnya Anda akan menambahkan beberapa CSS override hanya untuk mengubah ukuran untuk setiap tingkat heading:

<pra>
h2 {
ukuran font: 30px;
}

h3 {
ukuran font: 26px;
}

h4 {
ukuran font: 22px;
}

h5 {
ukuran font: 18px;
}

h6 {
ukuran font: 16px;
}
</pre>

3. Gunakan Tautan

Jangan membuat pembaca Anda berpikir! Tautan Anda akan terlihat seperti tautan, artinya harus benar-benar jelas bahwa itu adalah sesuatu yang harus diklik. Berikut adalah beberapa cara untuk melakukannya:

• Pilih warna untuk tautan Anda yang kontras dari teks biasa Anda.
• Cadangan satu warna hanya untuk tautan Anda. Jangan gunakan warna yang sama untuk heading, subheading, judul widget sidebar atau teks lainnya.
• Namun, Anda dapat menggunakan warna ini untuk tombol jika Anda mau karena mereka juga merupakan elemen yang dapat diklik.
• Jangan menggarisbawahi teks yang bukan tautan, itu membingungkan karena orang biasanya menganggap teks yang digarisbawahi adalah tautan.

<pra>
Sebuah {
warna: merah muda;
dekorasi teks: garis bawah;
}
</pre>

Gaya berbagai status tautan untuk lebih membantu pembaca Anda membedakannya sebagai tautan. Membuatnya mengubah tampilan saat pengguna mengarahkan kursor ke atasnya memberikan indikasi tambahan bahwa itu adalah tautan aktif.

<pra>
a: arahkan kursor {
warna biru;
dekorasi teks: tidak ada;
}
</pre>

Anda juga dapat memilih untuk memberi gaya pada tautan yang Anda kunjungi secara berbeda untuk menunjukkan kepada pengguna bahwa mereka telah mengunjungi tautan tertentu.

<pra>
a:mengunjungi {
warna biru;
}
</pre>

Untuk Memamerkan Tulisan Anda Jadi Bersinar Hanya Perlu Beberapa Pengeditan Sederhana

Ini hanya beberapa trik untuk menampilkan tulisan Anda agar mudah dibaca dan karenanya membantu konten Anda menonjol!

Apa cara lain Anda menata posting blog Anda agar mudah dibaca oleh pengguna Anda?

Apakah Anda ingin mempelajari lebih lanjut tentang bagaimana Anda dapat memanfaatkan CSS untuk membuat blog Anda lebih menarik bagi pembaca Anda dan benar-benar memamerkan tulisan Anda? Luar biasa! Maka saya ingin Anda bergabung dengan saya untuk pelatihan video gratis tentang CSS. Ini segera dimulai jadi daftar sekarang.

Gambar milik Pixabay