Setelah sebelumnya kita membahas mengenai gambar bootstrap dan button bootstrap, pada kesempatan kali ini kita akan membahas mengenai hal yang paling penting dalam pembuatan suatu website teman – teman yaitu Text atau typography.
Kalau mungkin ada yang belum mengetahui mengenai apa itu typography, Menurut Wikipedia typography merupakan suatu ilmu dalam memilih dan menata huruf dengan pengaturan penyebarannya pada ruang-ruang yang tersedia, untuk menciptakan kesan tertentu, sehingga dapat menolong pembaca untuk mendapatkan kenyamanan membaca semaksimal mungkin.
Menurut definisi diatas tujuan typography adalah untuk mendapatkan kenyamanan dan kemudahan dalam membaca. Tujuan ini juga berlaku pada website yang akan teman – teman buat sehingga konten dari website teman teman terlihat lebih tertata, jelas, dan tidak membingungkan pembaca.
Section Artikel [hide]
Default Bootstrap Typography
Pada bootstrap, khususnya bootstrap 4 yang saya gunakan ini mempunyai pengaturan text atau typography default yaitu font-size: 16px, line-height: 1.5 (font-size untuk ukuran font dan line-height untuk spasi antar baris) dengan jenis font yang digunakan adalah “Helvetica Neue”, Helvetica, Arial, dan sans-serif.
Heading bootstrap
Pada bootstrap tag heading yang digunakan masih sama yaitu menggunakan <h1> sampai <h6> dengan semakin kecil semakin tebal dan besar heading yang teman -teman buat.
Perhatikan contoh dibawah:
<html lang="en"> <head> <title>Bootstrap Heading</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- ini untuk menyesuaikan ukuran layar --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>h1 Bootstrap heading (2.5rem = 40px)</h1> <h2>h2 Bootstrap heading (2rem = 32px)</h2> <h3>h3 Bootstrap heading (1.75rem = 28px)</h3> <h4>h4 Bootstrap heading (1.5rem = 24px)</h4> <h5>h5 Bootstrap heading (1.25rem = 20px)</h5> <h6>h6 Bootstrap heading (1rem = 16px)</h6> </div> </body></html>Display Heading bootstrap
Bagi teman – teman yang belum mengetahui mengenai Display Heading, Display Heading adalah Sejenis heading dengan tampilan ukuran font yang lebih besar dan tidak terlalu tebal jika dibanding dengn heading biasa.
Terdapat 4 class untuk Display Heading yaitu : .display-1, .display-2, .display-3, .display-4. Untuk lebih jelas nya lihat contoh dibawah dan teman – teman banding kan dengan heading normal sebelumnya (pasti akan terlihat perbedaannya) :
xxxxxxxxxx<html lang="en"> <head> <title>Bootstrap Display Heading</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1 class="display-1">Display 1</h1> <h1 class="display-2">Display 2</h1> <h1 class="display-3">Display 3</h1> <h1 class="display-4">Display 4</h1> </div> </body></html>Secondary Text bootstrap
Selanjutnya adalah mengenai secondary text. Biasanya secondary text ditempatkan setelah heading untuk memberi penjelasan mengenai heading yang kita buat. Dalam bootstrap 4 secondary text dibuat dengan menggunakan tag <small>. Perhatikan contoh script dibawah:
xxxxxxxxxx<html lang="en"> <head> <title>Secondary Text</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <h1>h1 heading <small>secondary text</small></h1> <h2>h2 heading <small>secondary text</small></h2> <h3>h3 heading <small>secondary text</small></h3> <h4>h4 heading <small>secondary text</small></h4> <h5>h5 heading <small>secondary text</small></h5> <h6>h6 heading <small>secondary text</small></h6> </body></html>Highlight Text bootstrap
Pada bootstrap juga terdapat tag yang digunakan untuk membuat highlight text atau text dengan background kuning (biasanya) yaitu tag <mark>. Sekedar info untuk membuat highlight text teman – teman juga dapat membuat nya dengan menggunakan CSS tanpa tag <mark> yaitu dengan menambahkan style=”background-color: #FFFF00″. Lebih jelasnya perhatikan script dibawah:
xxxxxxxxxx<html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <mark>highlight text dengan tag mark</mark> <br> <span style="background-color: #FFFF00">highlight text tanpa tag mark</span> </body></html>Tag typography lainnya
Selaini tag – tag diatas terdapat beberapa tag lain yang umum digunakan dalam typography sebuah website, yaitu:
| Tag | Fungsi |
|---|---|
| <abbr> | untuk menandai singkatan atau akronim (text akan mempunyai garis putus-putus dibawahnya) |
| <blockquote> | untuk menandai text atau kontent kutipan atau berasal dari sumber lain |
| <dl> | untuk menjelaskan deskripsi konten bisa juga digunakan untuk list seperti <ul> |
| <code> | untuk menyematkan kode / script |
| <kbd> | untuk menandakan bahwa text yang ditandai harus di masukkan / di inputkan melalui keyboard |
| <pre> | untuk kode / text beberapa baris yang perlu perhatian khusus pembaca |
untuk lebih jelasnya lihat contoh dibawah:
xxxxxxxxxx<html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <p>Organisai <abbr title="Perserikatan Bangsa Bangsa">PBB</abbr> pada tahun 1945</p> <br> <blockquote class="blockquote"> <p>Manusia suatu saat pasti akan mati tapi ilmu mereka takkan mati</p> <footer class="blockquote-footer">Ishigami Senku (anime Dr.stone)</footer> </blockquote><br> <dl> <dt>Kopi</dt> <dd>- minuman dari biji kopi</dd> <dt>Susu</dt> <dd>- Minuman berwarna putih dari hewan sapi</dd> </dl> <br> <p>Elemen dasar HTML terdiri dari: <code>HTML</code>, <code>Head</code>, and <code>Body</code> </p> <br> <p>gunakan <kbd>ctrl + C</kbd> untuk menyalin tulisan.</p><br> <pre> ini text yang mempunyai ukuran yang telah baku dan spasi yang juga telah diatur secara default jika mengguanakan tag pre </pre> </div> </body></html>Jika teman teman ingin membuat teks yang lebih menarik atau dengan versi + kreatifitas teman – teman, teman – teman dapat memodifikasi nya pada CSS. Tapi ingat website yang baik harus membuat pembaca nyaman dengan tidak terlalu berlebihan dalam menggunakan efek atau typhography.
