Bootstrap 4 Typography (Tipografi)

Jika kita menggunakan bootstrap, kemudian menulis sebuah postingan (artikel) untuk publikasi online, tepatnya menggunakan kode HTML untuk format tulisan kita, maka kita perlu memahami typography (tipografi) yang disediakan oleh bootstrap.

Bootstrap tipografi adalah semua hal yang berkaitan dengan pengaturan umum teks dan tulisan, mencakup pengaturan umum kepala tulisan (heading), teks bodi (body text), daftar (list) dan lainnya.

Heading

Heading adalah bagian kepala tulisan yang biasanya memiliki ukuran teks lebih besar dari teks normal lainnya. Heading biasa digunakan untuk sebuah judul atau sub-sub judul, mencakup HTML tag <h1> sampai <h6>.

Bootstrap memiliki style tersendiri untuk element <h1> sampai <h6> dari yang terbesar (<h1>) hingga terkecil (<h6>).

Berikut contohnya:

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

Perhatikan contoh diatas, judul utama diletakkan didalam element <h1>...<h1>, adapun untuk sub-sub judul dapat disesuaikan dengan menggunakan tag <h2> sampai <h6>.

Selain menggunakan element heading langsung seperti contoh di atas, kita juga dapat menggunakan nama class: .h1,.h2,.h3,.h4,.h5,.h6 untuk mendapatkan style heading yang sama. Seperti contoh dibawah ini, meskipun saya menggunakan element <p> karena saya menggunakan nama class .h2 maka akan memilik style layaknya element <h2>.

<p class="h2">Ini adalah sebuah Paragraf yang seperti element h2</p>

Contoh Judul
Bootstrap Custom Heading

Bootstrap menyediakan style untuk sebuah judul yang menarik dengan memberikan tambahan sub-teks yang ukurannya lebih kecil dari teks judul utama dan warna yang memudar.

Caranya, tulis HTML <small> tag didalam element heading (h1-h6) dengan tambahan class .text-muted. Berikut contoh lebih jelasnya:

<h3>Ini Contoh Judul Asal <small  class="text-muted">namanya juga contoh</small></h3>

Display Heading
Judul dengan teks super besar

Untuk menulis teks heading dengan ukuran besar, gunakan tambahan class .display-1,.display-2,.display-3,.display-4. class display-1 menunjukkan ukuran teks paling besar.

<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>

Lead

Tambahkan class .lead pada tag <p> untuk menambahkan style khusus. Ini biasanya digunkan pada sebuah teks pengantar atau mukadimah.

<p class="lead">Sultan Ageng Tirtayasa atau Pangeran Surya (Lahir di Kesultanan Banten, 1631 - meninggal di Batavia, Hindia Belanda, 1692 pada umur 60 - 61 tahun) adalah Sultan Banten ke-6.</p>

Inline text elements
Beberapa style teks inline

Beberapa style custom yang dibuat oleh bootstrap untuk memberi sentuhan (css) khusus pada kategory HTML inline elements.

Inline element adalah kebalikan block element. Blok memiliki struktur tegak, berdiri sendiri. Adapun inline adalah kebalikannya.

<p>Kamus bisa menggunakan mark tag untuk <mark>highlight</mark> text.</p>
<p><del>Baris Teks ini dimaksudkan untuk menunjukkan teks yang telah dihapus</del></p>
<p><s>Baris teks ini dimaksudkan untuk menunjukkan sesuatu yang sudah tidak akurat</s></p>
<p><ins>Teks ini menunjukan tambahan yang disipkan pada dokumen</ins></p>
<p><u>Teks ini akan memiliki garis bawah</u></p>
<p><small>Teks ini menunjukkan teks kecil (fine print)</small></p>
<p><strong>Teks ini menunjukkan bold text (cetak tebal).</strong></p>
<p><em>Teks ini menunjukkan teks miring (italicized text).</em></p>

Sebagai tambahan, Anda juga bisa menggunakan class .mark dan .small untuk mendapatkan style yang sama dengan element <mark> dan <small>. Berikut contohny:

<p class="small">Saya &lt;p&gt; tapi memili style yang sama dengan &lt;small&gt;</p>
<p class="mark">Saya &lt;p&gt; tapi memili style yang sama dengan &lt;mark&gt;</p>

Text Utilites
Bootstrap Teks utiliti

Bootstrap menambahkan style (CSS) untuk penataan teks gaya ketebalan tulisan, warna dan lainnya yang lebih detail dijelaskan pada teks utilities dan Color utilities.

Abbreviation (Singkatan)

Bagaimana menulis singkatan dalam HTML? Jika Anda belum tahu, silahkan pelajari HTML <abbr> Tag untuk pembahasan lebih lengkap. Berikut langsung ke contoh berikut tambahan nama class .initialism bawaan bootstrap untuk membuat tulisan lebih kecil.

<p>Donor darah ke: <abbr title="Palang Merah Indonesia">PMI</abbr>.
</p>

<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Blockquotes

Untuk menulis blok teks kutipan (quotes) dari sumber lain, gunakan HTML <blockquote> dengan nama class .blockquote seperti ini: <blockquote class="blockquote">...</blockquote>.

Contoh 1
Contoh Sederhana

<blockquote class="blockquote">
  <p>Hiduplah dalam pekerjaan yang disemangati oleh impian, karena impianmu adalah gambaran tentang keindahan masa depanmu.</p>
</blockquote>

Contoh 2
Kutipan dengan Sumbernya

Untuk menulis kutipan lengkap dengan sumbernya, tuliskan tambahan HTML

<blockquote class="blockquote">
  <p>Bagi saya, Ibu adalah segalanya</p>
  <p>Bila kita benar-benar berbakti kepada Ibu sepenuh hati dan ikhlas, maka surga akan kita gapai di dunia.</p>
  <footer class="blockquote-footer">Chairul Tanjung dalam buku <cite title="Buku Chairul Tanjung Si Anak Singkong">Chairul Tanjung Si Anak Singkong</cite>
  </footer>
</blockquote>

Contoh 3
Kutipan di Tengah-tengah (Rata Tengah)

<blockquote class="blockquote text-center">
  <p>Hiduplah dalam pekerjaan yang disemangati oleh impian, karena impianmu adalah gambaran tentang keindahan masa depanmu.</p>
</blockquote>

Contoh 4
Kutipan Rata Kanan

<blockquote class="blockquote text-right">
  <p>Hiduplah dalam pekerjaan yang disemangati oleh impian, karena impianmu adalah gambaran tentang keindahan masa depanmu.</p>
</blockquote>

Lists
Menulis lis (daftar)

Menulis daftar atau list. Baik daftar acak atau berurutan (penomoran otomatis)

list-unstyled
List tanpa style

Menulis List (daftar) dengan HTML <ul> atau <ol> tag dengan menambahkan class list-unstyled, maka Bootstrap akan menghilangkan style bawaan browser seperti CSS margin dan list-style. class .list-unstyled juga dapat digunakan secara turunan (nested) yaitu list di dalam list.

<ul class="list-unstyled">
  <li>Mobil</li>
  <li>Motor
  <ul>
    <li>Yamaha</li>
    <li>Honda
      <ul>
        <li>Beat</li>
        <li>Vario</li>
        <li>Supra X</li>
      </ul>
    </li>
    <li>Suzuki</li>
  </ul>
  </li>
  <li>Sepeda</li>
</ul>

list-inline
List sejajar (Menu)

Selain kita mengetahui sebuah list terlihat vertikal, kita juga bisa membuatnya horizontal atau lebih tepatnya adalah inline. Contoh ini bisa diaplikasikan ketika membuat daftar link pada menu atas (header) ataupun daftar dengan tampilan berjajar.

Berikut contohnya:

<ul class="list-inline">
  <li class="list-inline-item">Utara</li>
  <li class="list-inline-item">Barat</li>
  <li class="list-inline-item">Selatan</li>
  <li class="list-inline-item">Timur</li>
</ul>

Description List
Daftar dengan deskripsi

Ialah daftar yang menjelaskan sebuah istilah dan deskripsi seperti pada sebuah kamus dan glosarium.

Sebagai tambahan, gunakan nama class .text-truncate untuk memotong teks yang panjang bila diperlukan.

<dl class="row">
  <dt class="col-sm-3">Zenit</dt>
  <dd  class="col-sm-9">Titik khayal di langit yg tegak lurus di atas bumi thd cakrawala; titik puncak</dd>
  <dt class="col-sm-3 text-truncate">mempertanggungjawabkan</dt>
  <dd  class="col-sm-9">memberikan jawab dan menanggung segala akibatnya (kalau ada kesalahan); memberikan pertanggungjawaban: panitia harus ~ penggunaan dana yg dipungut dr masyarakat</dd>
</dl>

Additional Information and Resources