17 Cara Menyesuaikan Teks Situs Web di CSS (Termasuk Contoh)

Jika Anda pernah bertanya pada diri sendiri "bagaimana Anda mengubah teks di CSS?", Ini adalah posting yang tepat untuk Anda. Berikut ini, kami akan membahas banyak cara Anda dapat menyesuaikan teks di situs web menggunakan markup CSS.

Mengapa ini penting?

Karena tipografi adalah bagian penting dari desain web. Sama seperti menggunakan font khusus, kemampuan untuk menata teks di situs web Anda untuk memastikannya sesuai dengan sisa merek Anda adalah yang terpenting.

Untungnya, CSS menawarkan banyak opsi gaya untuk membantunya. Dalam posting ini, kami akan membahas semua yang paling penting dan beberapa yang kurang dikenal.

17 Cara Berbeda untuk Memberi Gaya Teks Melalui CSS

Berikut ini adalah berbagai cara untuk menyesuaikan teks pada halaman web melalui properti CSS. Anda dapat mencoba semua ini dengan mudah menggunakan alat pengembang browser Anda. Itu benar, Anda bahkan tidak perlu memiliki situs web sendiri, Anda dapat mencobanya di halaman web mana pun yang memiliki teks di dalamnya.

1. font-family

Hal pertama yang ingin kita bicarakan adalah properti font-family . Yang ini menentukan font mana yang akan digunakan teks Anda.

Ini cukup mudah digunakan. Di bawah ini adalah kode yang menyertai untuk contoh di atas.

 #div-one { font-family: Arial; } #div-two { font-family: Courier; } #div-three { font-family: Impact; }

Anda cukup menentukan elemen yang ingin Anda ubah fontnya dengan pemilih CSS, tambahkan properti font-family , dan sertakan nama font sebagai nilainya.

Nilai dapat berupa nama keluarga font seperti Arial dan "Open Sans" atau deklarasi font umum seperti serif atau monospace . Jika Anda menggunakan yang terakhir, browser akan menggunakan perkiraan terdekat yang dimilikinya.

Jika nilai mengandung spasi putih, seperti “ Times New Roman" , Anda perlu menggunakan tanda kutip ganda, jika tidak, seperti Tahoma atau sans-serif , Anda dapat menghilangkannya.

Membuat Tumpukan Font

Dalam desain web, Anda biasanya menyertakan font fallback dengan memberikan daftar font (disebut tumpukan font) dibagi dengan koma.

 #div { font-family: "Open Sans", Arial, sans-serif; }

Ini jika browser tidak memiliki font asli yang tersedia (misalnya karena tidak diinstal pada komputer pengguna atau tidak ada di situs web). Kemudian pindah ke yang kedua dalam daftar, dan seterusnya sampai menemukan satu yang dapat bekerja dengannya.

Dengan cara ini, Anda dapat memastikan bahwa situs web Anda masih terlihat seperti apa yang Anda pikirkan sebelumnya meskipun pengunjung tidak dapat menggunakan font yang Anda maksudkan.

Agar itu berfungsi, dua fallback terakhir biasanya adalah font aman web yang kemungkinan besar tersedia di komputer mana pun dan kemudian deklarasi umum seperti serif atau sans-serif . Anda dapat menemukan font aman web dan kompatibilitasnya di sini.

Praktik umum lainnya adalah menentukan font default di awal lembar gaya dengan menetapkannya ke selektor body dan semua judul, lalu menggunakan kelompok font lain untuk elemen tertentu lebih jauh di bawah.

 body { font-family: Garamond, "Times New Roman", serif; } h1, h2, h3, h4, h5, h6 { font-family: "Roboto", "Helvetica Neue", sans-serif; } .page-title { font-family: Garamond, serif; }

2. ukuran font

Seperti yang mungkin sudah jelas, dengan properti CSS ini Anda dapat menyesuaikan ukuran teks.

Anda memiliki dua pilihan: mengatur ukuran absolut (misalnya dalam px ) atau relatif (dalam em , rem , atau serupa).

 #div-one { font-size: 20px; } #div-two { font-size: 8em; } #div-three { font-size: 5rem; }

Yang terakhir lebih umum akhir-akhir ini karena lebih berguna untuk desain dan aksesibilitas responsif.

Saat menggunakan em , 1em sama dengan 16px (itulah ukuran font default browser). Anda dapat menghitung ukuran font lain dari sana, cukup bagi nilai piksel yang Anda inginkan dengan 16 untuk mendapatkan nilai em . Misalnya, dua deklarasi ukuran font ini akan keluar dengan ukuran yang sama:

 #div-one { font-size: 32px; } #div-two { font-size: 2em; }

Ada lebih banyak matematika yang terlibat dalam penggunaan em dan rem kadang-kadang dan Anda dapat membacanya lebih lanjut di sini.

3. font-berat

Gunakan font-weight untuk mengontrol ketebalan font Anda.

Ada beberapa cara untuk melakukan ini. Gunakan salah satu dari penunjukan bobot font yang sudah ada sebelumnya ( thin , light , normal , bold , extra-bold , dll.) atau masukkan nomor nilai tebal (antara 1 dan 1000 untuk font variabel, dalam langkah seratus antara 100 dan 900 untuk font non-variabel).

 #div-one { font-weight: light; } #div-two { font-weight: 800; } #div-three { font-weight: bolder; }

Anda juga dapat menggunakan lighter dan bolder untuk menyatakan bahwa Anda ingin menambah/mengurangi bobot dengan satu langkah dibandingkan dengan elemen induk. Namun, ini sangat jarang.

Ketahuilah bahwa, untuk menggunakan bobot font tertentu, font harus ada di situs atau mesin pengguna Anda (dan tersedia dalam font yang dipilih untuk memulai). Itu sebabnya, saat memasang font khusus, Anda dapat memilih bobot font mana yang akan disertakan.

Jika berat tidak dimuat, browser tidak dapat menggunakannya.

4. gaya font

Dalam hampir semua kasus, properti CSS ini digunakan untuk membuat font menjadi miring. Hanya membutuhkan tiga nilai: normal (default), italic , dan oblique .

oblique hampir sama dengan italic tetapi mensimulasikan font miring dengan memiringkan font aslinya. Juga, dukungan browser lebih buruk. Berikut cara menggunakan font-style :

 #div-one { font-style: normal; } #div-two { font-style: italic; } #div-three { font-style: oblique; }

5. font-varian

font-variant hanya memiliki satu kegunaan: untuk membuat font muncul dalam huruf kecil, yang berarti huruf kecil diubah menjadi huruf besar yang lebih kecil. Kedengarannya tidak jelas? Inilah yang saya maksud:

Jangan tanya saya untuk kasus penggunaan untuk ini, itu mungkin dari zaman kuno Internet. Jika Anda ingin mencobanya, berikut cara membuatnya:

 #div { font-variant: small-caps; }

6. jenis huruf

Ini adalah properti singkatan yang dapat Anda gunakan untuk mendeklarasikan font-style , font-variant , font-weight , font-size , line-height , dan font-family semua dalam satu deklarasi.

 #div { font: italic small-caps 300 40px/200px Impact; }

Berikut sintaks cara menggunakannya (perhatikan garis miring antara font-size dan line-height , ini wajib jika Anda ingin mendeklarasikan keduanya):

 font: font-style font-variant font-weight font-size/line-height font-family;

Hanya font-size font dan font-family yang diperlukan, sisanya akan kembali ke default jika tidak dideklarasikan.

Ada juga beberapa nilai lain yang bisa Anda gunakan seperti caption , icon , dan small-caption . Lebih lanjut tentang ini di sini.

7. warna

Properti color menentukan, Anda dapat menebaknya, warna font dan hanya warna font (termasuk elemen text-decoration ). Banyak pemula (termasuk saya) mungkin berpikir bahwa itu juga harus menentukan warna seluruh elemen tetapi untuk itu Anda harus melihat background-color (karena, secara teknis, color mewarnai latar depan).

Menggunakan color cukup sederhana:

 #div-one { color: #f2db3f; } #div-two { color: #1bf20f; } #div-three { color: #412535; }

Anda dapat menentukan warna teks dengan beberapa cara berbeda:

• Menggunakan nama warna seperti red , pink , blue tetapi juga papayawhip atau navajowhite (ada daftar ekstensif warna HTML yang telah ditentukan sebelumnya untuk dipilih).
• Sebagai nilai heksagonal, misalnya #ff0000 .
• Nilai warna RGB seperti rgb(255, 0, 0); .

Untuk informasi lebih lanjut, lihat tutorial ekstensif kami tentang cara menentukan warna dalam CSS.

8. warna latar belakang

Jika Anda ingin melangkah lebih jauh, Anda juga dapat menggunakan background-color . Seperti yang telah disebutkan di atas, ini adalah properti yang mengontrol warna latar belakang teks. Ini sering berguna dalam kombinasi dengan color untuk memastikan bahwa teks memiliki kontras yang cukup untuk tetap terbaca. Anda dapat menggunakan alat ini untuk memastikan bahwa itu benar.

Ini juga merupakan faktor penting dalam aksesibilitas. Inilah cara Anda dapat mencapai hal di atas dalam CSS:

 #div { color: #f2db3f; } #div p { background-color: #000; }

9. transformasi teks

Cara lain untuk menyesuaikan teks di situs web Anda melalui CSS adalah dengan menggunakan text-transform . Ini hanya memiliki tiga kasus penggunaan: membuat teks menjadi huruf besar semua, huruf kecil semua, atau huruf besar pertama setiap kata.

Ini juga sangat mudah digunakan:

 #div-one { text-transform: uppercase; } #div-two { text-transform: lowercase; } #div-three { text-transform: capitalize; }

Ada nilai lain untuk text-transform , yaitu full-width . Ini mengubah semua huruf untuk ditempatkan di dalam kotak dengan lebar tetap. Ini biasanya hanya relevan bila menggunakan mesin terbang bahasa Asia seperti Jepang atau Korea, terutama dalam kombinasi dengan alfabet Latin.

10. dekorasi teks

Ini sebenarnya adalah singkatan untuk empat properti yang berbeda: text-decoration-line , text-decoration-color , text-decoration-style , dan text-decoration-thickness .

Namun, dalam kebanyakan kasus, Anda cukup menggunakan text-decoration sendiri. Nilai macam apa yang diambil oleh properti yang berbeda dan apa yang mereka lakukan?

• text-decoration-line — Anda dapat menggunakan overline , line-through , underline , dan none untuk membuat garis di atas, di bawah, atau melalui teks. none paling sering digunakan untuk menghapus garis bawah standar tautan. Anda juga dapat menggunakan lebih dari satu nilai dalam kombinasi.
• text-decoration-color — Mengontrol warna garis. Dibutuhkan deklarasi warna CSS biasa.
• text-decoration-style — Mengubah gaya dekorasi. Itu bisa solid , double , dotted -putus, putus- dashed , wavy , dan none .
• text-decoration-thickness — Mengatur seberapa tebal garis yang muncul melalui nilai biasa, seperti px , % , dan em . Ini juga membutuhkan auto dan from-font , yang menggunakan nilai apa pun yang mungkin disertakan dalam font yang dipilih.

Cara Menggunakan dekorasi teks

Anda dapat menggunakan ini sendiri tetapi, seperti yang disebutkan, lebih umum menggunakan steno. Berikut sintaks untuk itu:

 text-decoration: text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness;

Hanya nilai untuk text-decoration-line yang diperlukan, sisanya opsional. Untuk mencapai efek yang terlihat pada contoh gambar di atas, Anda dapat menggunakan kode di bawah ini.

 #div-one { text-decoration: overline; } #div-two { text-decoration: line-through; } #div-three { text-decoration: underline dotted; } #div-four { text-decoration: line-through black 10px; } #div-five { text-decoration: underline wavy 0.1em; } #div-six { text-decoration: none; }

Kiat cepat: alternatif umum untuk menggunakan text-decoration teks untuk menggarisbawahi teks seperti tautan, adalah dengan menggunakan properti border . Ini menawarkan manfaat bahwa Anda dapat mengontrol jarak antara garis dan teks dan juga dapat membuat garis melampaui teks. Keduanya tidak mungkin dilakukan dengan text-decoration .

11. teks-bayangan

Jika Anda telah membaca tutorial kami tentang bayangan kotak CSS, bayangan text-shadow seharusnya tidak menimbulkan masalah besar bagi Anda. Pada dasarnya, Anda dapat menggunakannya untuk memberikan bayangan pada teks termasuk kontrol atas orientasi, warna, dan blurnya.

 #div-one { text-shadow: -5px 4px black; } #div-two { text-shadow: 0 0 20px #fff; } #div-three { text-shadow: -10px -10px rgba(0, 0, 0, 0.4), -20px -20px rgba(0, 0, 0, 0.3), -30px -30px rgba(0, 0, 0, 0.2), -40px -40px rgba(0, 0, 0, 0.1), -50px -50px rgba(0, 0, 0, 0.05); }

text-shadow membutuhkan hingga empat nilai: offset horizontal, offset vertikal, blur , dan color .

 text-shadow: offset-x offset-y blur-radius color;

Dua yang pertama wajib saat menggunakan text-shadow , yang lainnya opsional. Perhatikan bahwa offset mengambil nilai negatif untuk memindahkan bayangan ke kiri dan ke atas, nilai positif untuk kanan dan bawah.

Anda dapat menentukan offset, blur , dan color dengan cara biasa untuk menentukan dimensi dan warna di CSS. Kecuali untuk color , mereka paling sering menggunakan px .

Juga, seperti untuk box-shadow , Anda juga dapat mengatur beberapa bayangan ke elemen yang sama dalam satu deklarasi, cukup pisahkan dengan koma.

12. perataan teks

Dengan properti CSS text-align , Anda dapat menyesuaikan perataan horizontal teks di situs web Anda. Itu bisa menjadi left , right , center , atau justify (artinya spasi di antara kata-kata membentang untuk membuat teks sesuai dengan ruang yang tersedia).

Berikut kode yang menyertai gambar di atas:

 #div-one { text-align: left; } #div-two { text-align: right; } #div-three { text-align: center; } #div-four { text-align: justify; }

Perhatikan bahwa, tergantung pada arah teks (kiri ke kanan atau kanan ke kiri), perataan default adalah kiri atau kanan dan tidak perlu secara khusus mendefinisikannya melalui CSS karena hal itu terjadi secara otomatis.

Properti terkait dengan perataan text-align adalah:

• text-align-last — Bekerja sama dengan text-align tetapi hanya mempengaruhi baris terakhir teks dalam sebuah elemen.
• direction / unicode-bidi — Memungkinkan Anda mengubah arah teks (mis. kanan-ke-kiri).

13. – 16. Spasi Teks

Ada sejumlah properti CSS yang dapat Anda gunakan untuk mengubah spasi dalam teks situs web.

tinggi garis

Ini dapat membuat perbedaan dalam jarak antar baris teks. Dibutuhkan CSS biasa ukuran dan panjang unit tetapi paling sering hanya didefinisikan sebagai pengganda tanpa unit.

 div { line-height: 2; }

Ketika Anda melakukannya, tinggi garis hanya akan menjadi produk dari ukuran font dan nilai dalam line-height .

spasi kata

Properti ini memberi Anda kendali atas jarak antara kata-kata individual (Anda tidak akan pernah menebaknya, saya yakin).

Seperti yang Anda lihat dari gambar di atas, dibutuhkan juga nilai negatif untuk memperkecil jarak. Selain itu, Anda dapat menggunakannya dengan sebagian besar deklarasi unit panjang dan ukuran yang tersedia di CSS.

 div { word-spacing: 10px; }

spasi huruf

Nama juga sudah memberikannya, Anda dapat menggunakan ini untuk menambah atau mengurangi spasi antar huruf.

Yang terakhir terjadi, tentu saja, melalui nilai negatif dan letter-spacing , juga, mengambil unit biasa untuk menyatakan ukuran.

 div { letter-spacing: 12px; }

indentasi teks

Properti CSS ini memberi Anda kemampuan untuk membuat indentasi baris pertama teks dalam elemen tempat Anda menerapkannya.

Berikut tampilannya di markup:

 div p { text-indent: 25%; }

Anda dapat menggunakan satuan lebar dan panjang biasa serta persentase. Nilai negatif juga memungkinkan Anda untuk memindahkan teks ke kiri.

17. Cara Lain untuk Menyesuaikan Teks Melalui CSS

Selain apa yang telah kita bahas, ada cara tambahan untuk menargetkan teks di CSS. Untuk melakukannya, masuk akal untuk mempelajari tentang kelas dan id HTML, properti khusus, dan elemen semu seperti ::first-letter atau ::first-word . Meskipun ini sedikit di luar cakupan artikel ini, tetapi pastikan untuk memeriksa tutorial yang ditautkan.

Ada juga lebih banyak properti CSS yang memungkinkan Anda bekerja dengan teks dan benar-benar memahami seluk beluknya. Anda mungkin ingin melihat hal-hal seperti word-break , hyphen , atau font-kerning jika Anda ingin menjadi benar-benar kutu buku.

Kustomisasi Teks dalam CSS Singkatnya

CSS menyediakan banyak cara untuk menyesuaikan teks di situs web Anda. Bersama dengan font khusus, ini memungkinkan Anda membuat salinan halaman Anda terlihat persis seperti yang Anda inginkan.

Di atas, kami telah membahas properti CSS yang paling penting untuk memungkinkan Anda membuat perubahan menyeluruh. Meskipun ada banyak lagi di luar sana, ini adalah inti dari apa yang Anda butuhkan.

Apakah Anda tahu properti CSS berguna lainnya yang dapat Anda gunakan untuk menyesuaikan teks di situs web? Jika demikian, beri tahu kami di komentar!