Mengenal Tipografi di Bootstrap dan Penerapannya

19 February 2016
Tipografi (typography) adalah seni dan teknik pemilihan, penataan dan pengaturan huruf pada ruang yang tersedia agar tercipta kesan tertentu, guna kenyamanan membaca semaksimal mungkin.
Mungkin akan ada pertanyaan, seberapa penting kita mempelajari tipografi? Jawabannya, TERGANTUNG. Lho, kok tergantung? ya, kembali pada diri kita masing masing. Jika kita ingin membuat sebuah artikel yang bagus, tertata rapi dan enak dibaca, maka perlu dan harus mempelajari tipografi, begitu juga sebaliknya. Jika kita membuat artikel hanya sekedarnya saja, tanpa memperdulikan ada yang mau baca atau tidak, ya nggak usah dipelajari. paham kan maksud saya..
Kembali ke pokok pembahasan. Dalam Bootstrap, ada beberapa point yang harus kita pelajari dalam menggunakan tipografi. Beberapa point tersebut adalah:

Headings

    Bootstrap sudah menyediakan semua headings HTML, mulai dari <h1> sampai dengan <h6>. Kelas .h1 sampai .h6 juga tersedia. Contoh penggunaannya seperti ini:
    <h1>Heading h1</h1>
    <h2>Heading h2</h2>
    <h3>Heading h3</h3>
    <h4>Heading h4</h4>
    <h5>Heading h5</h5>
    <h6>Heading h6</h6>
    
    Tampilannya seperti ini:
    tipografi

    Heading h1

    Heading h2

    Heading h3

    Heading h4

    Heading h5
    Heading h6
    Untuk menambahkan teks ringan pada baris headings, kita bisa menambahkan tag <small> atau kelas .small Contoh penggunaannya seperti ini:
    <h1>Heading h1 <small>Teks kedua</small></h1>
    <h2>Heading h2 <small>Teks kedua</small></h2>
    <h3>Heading h3 <small>Teks kedua</small></h3>
    <h4>Heading h4 <small>Teks kedua</small></h4>
    <h5>Heading h5 <small>Teks kedua</small></h5>
    <h6>Heading h6 <small>Teks kedua</small></h6>
    
    Hasilnya seperti ini:

    Heading h1 Teks kedua

    Heading h2 Teks kedua

    Heading h3 Teks kedua

    Heading h4 Teks kedua

    Heading h5 Teks kedua
    Heading h6 Teks kedua

Body copy

    Secara umum, ukuran standar (font-size) dari Bootstrap adalah 14px, dengan ketinggian garis (line-height) 1.428. Ini berlaku pada <body> dan seluruh paragraf. Sebagai tambahan, penggunaan <p>, posisi paragraf akan berada di setengah margin bawah dari ketinggian garisnya (standarnya 10px). Penulisannya seperti ini:
    <p>
    ...
    </p>
    
    Contoh penggunaannya seperti ini:
    <p>saderengipun kula aturaken matur sembah nuwun dumateng panitia acara sarasehan werda muda wonten ing dusun menika, lebet saperlu mengeti dinten tanpa sata sak ndunya ingkang dhawah wonten lukar 13 Desember saben tahunipun, ingkang sampun nyaosaken wanci dhateng kula.
    </p>
    <p>Kanca-kanca ingkang kula bektosi, Senaosa sampun kathah praturan ingkang dipunmiyosaken ugi sampun kathah trapsila lan awisan ingkang sampun tinulis, sarehdenten punika, kita sedaya dados warga nagari ingkang sae kalih pradunten badhe kasarasan, sumangga kita sedaya mujudkan sugeng waluya saking salira kita sedaya piyambak.
    </p>
    <p>Amargi wanci ingkang kewates sanget, kula aturaken matur sembah nuwun dumatheng para panita ingkang sampun nyaosaken wanci dhateng kula. Mekaten ingkang kula aturaken wonten kasempatan menika, mugi saged migunani tumrap kita sedaya.
    </p>
    
    Maka akan terlihat seperti ini:
    saderengipun kula aturaken matur sembah nuwun dumateng panitia acara sarasehan werda muda wonten ing dusun menika, lebet saperlu mengeti dinten tanpa sata sak ndunya ingkang dhawah wonten lukar 13 Desember saben tahunipun, ingkang sampun nyaosaken wanci dhateng kula.
    Kanca-kanca ingkang kula bektosi, Senaosa sampun kathah praturan ingkang dipunmiyosaken ugi sampun kathah trapsila lan awisan ingkang sampun tinulis, sarehdenten punika, kita sedaya dados warga nagari ingkang sae kalih pradunten badhe kasarasan, sumangga kita sedaya mujudkan sugeng waluya saking salira kita sedaya piyambak.
    Amargi wanci ingkang kewates sanget, kula aturaken matur sembah nuwun dumatheng para panita ingkang sampun nyaosaken wanci dhateng kula. Mekaten ingkang kula aturaken wonten kasempatan menika, mugi saged migunani tumrap kita sedaya.
    Untuk membuat salah satu paragraf lebih menonjol dibandingkan paragraf yang lain, kita bisa penggunakan kelas .lead Cara penulisannya seperti ini:
    <p="lead">
    ...
    </p>
    
    Contoh penggunaannya seperti ini:
    <p>
    saderengipun kula aturaken matur sembah nuwun dumateng panitia acara sarasehan werda muda wonten ing dusun menika, lebet saperlu mengeti dinten tanpa sata sak ndunya ingkang dhawah wonten lukar 13 Desember saben tahunipun, ingkang sampun nyaosaken wanci dhateng kula.
    </p>
    <p="lead">
    Kanca-kanca ingkang kula bektosi, Senaosa sampun kathah praturan ingkang dipunmiyosaken ugi sampun kathah trapsila lan awisan ingkang sampun tinulis, sarehdenten punika, kita sedaya dados warga nagari ingkang sae kalih pradunten badhe kasarasan, sumangga kita sedaya mujudkan sugeng waluya saking salira kita sedaya piyambak.
    </p>
    <p>
    Amargi wanci ingkang kewates sanget, kula aturaken matur sembah nuwun dumatheng para panita ingkang sampun nyaosaken wanci dhateng kula. Mekaten ingkang kula aturaken wonten kasempatan menika, mugi saged migunani tumrap kita sedaya.
    </p>
    
    Hasilnya akan terlihat seperti ini:
    saderengipun kula aturaken matur sembah nuwun dumateng panitia acara sarasehan werda muda wonten ing dusun menika, lebet saperlu mengeti dinten tanpa sata sak ndunya ingkang dhawah wonten lukar 13 Desember saben tahunipun, ingkang sampun nyaosaken wanci dhateng kula.
    Kanca-kanca ingkang kula bektosi, Senaosa sampun kathah praturan ingkang dipunmiyosaken ugi sampun kathah trapsila lan awisan ingkang sampun tinulis, sarehdenten punika, kita sedaya dados warga nagari ingkang sae kalih pradunten badhe kasarasan, sumangga kita sedaya mujudkan sugeng waluya saking salira kita sedaya piyambak.
    Amargi wanci ingkang kewates sanget, kula aturaken matur sembah nuwun dumatheng para panita ingkang sampun nyaosaken wanci dhateng kula. Mekaten ingkang kula aturaken wonten kasempatan menika, mugi saged migunani tumrap kita sedaya.

Elemen teks

  1. Penanda teks
    Penanda teks biasanya digunakan untuk menyoroti suatu teks yang berhubungan dengan teks lain. Untuk melakukannya, gunakan tag <mark>.
    Format penulisannya seperti ini:
    <mark>
    ...
    </mark>
  2. Contoh penggunaannya:
    Saat politik kehilangan makna, <mark>uanglah yang bicara</mark>
    Hasilnya:
    Saat politik kehilangan makna, uanglah yang bicara
  3. Menghapus teks
    Untuk menghapus teks, gunakan tag <del>
    <del>
    ...
    </del>
  4. Contoh penggunaannya:
    Saat politik kehilangan makna, <del>uanglah yang bicara</del>
    Hasilnya:
    Saat politik kehilangan makna, uanglah yang bicara
  5. Mencoret teks
    Untuk mencoret teks, gunakan tag <s>
    <s>
    ...
    </s>
  6. Contoh penggunaannya:
    Saat politik kehilangan makna, <s>uanglah yang bicara</s>
    Hasilnya:
    Saat politik kehilangan makna, uanglah yang bicara
    Menurut saya, kedua tag di atas (<del> dan <s>) hasilnya sama saja, tidak ada perbedaan sedikitpun.
  7. Teks sisipan
    Untuk menandai teks sisipan, gunakan tag <ins>
    <ins>
    ...
    </ins>
    Contoh penggunaannya:
    Saat politik kehilangan makna, <ins>uanglah yang bicara</ins>
    Hasilnya:
    Saat politik kehilangan makna, uanglah yang bicara
    Di HTML5, tag diatas sama dengan tag <u> yang digunakan untuk menggarisbawahi suatu teks. Silahkan anda gunakan salah satu saja yang anda sukai. Untuk penggunaan tag <u> formatnya seperti ini:
    <u>
    ...
    </u>
    Contoh penggunaannya:
    Saat politik kehilangan makna, <u>uanglah yang bicara</u>
    Hasilnya:
    Saat politik kehilangan makna, uanglah yang bicara
  8. Teks kecil
    Untuk mengecilkan teks, gunakan tag <small>
    <small>
    ...
    </small>
    Contoh penggunaannya:
    Saat politik kehilangan makna, <small>uanglah yang bicara</small>
    Hasilnya:
    Saat politik kehilangan makna, uanglah yang bicara
  9. Teks tebal
    Untuk menebalkan teks, gunakan tag <strong>
    <strong>
    ...
    </strong>
    Contoh penggunaannya:
    Saat politik kehilangan makna, <strong>uanglah yang bicara</strong>
    Hasilnya:
    Saat politik kehilangan makna, uanglah yang bicara
    Di HTML5, tag diatas sama dengan tag <b>. Anda bisa menggunakan salah satunya
  10. Teks miring
    Untuk membuat teks bercetak miring, gunakan tag <em>
    <em>
    ...
    </em>
    Contoh penggunaannya:
    Saat politik kehilangan makna, <em>uanglah yang bicara</em>
    Hasilnya:
    Saat politik kehilangan makna, uanglah yang bicara
    Di HTML5, tag diatas sama dengan tag <i>. Anda bisa menggunakan salah satunya

Penyelarasan teks

    Untuk menyelaraskan/meratakan teks, kita bisa menggunakan kelas seperti dibawah ini:
    <p class="text-left">Teks rata kiri</p>
    <p class="text-center">Teks rata tengah</p>
    <p class="text-right">Teks rata kanan</p>
    <p class="text-justify">Teks rata halaman</p>
    <p class="text-nowrap">Teks tanpa perataan</p>
    Hasil tampilannya seperti ini:
    Teks rata kiri
    Teks rata tengah
    Teks rata kanan
    Teks rata halaman
    Teks tanpa perataan

Transformasi teks

    Transormasi teks disini maksudnya perubahan bentuk hurufnya
    <p class="text-lowercase">Lihat saja perbedaannya</p>
    <p class="text-uppercase">Lihat saja perbedaannya</p>
    <p class="text-capitalize">Lihat saja perbedaannya
    Lihat saja perbedaannya
    Lihat saja perbedaannya
    Lihat saja perbedaannya

Kata singkatan

    Untuk memunculkan Kepanjangan dari singkatan kata secara popup ketika mouse kita letakkan pada kata yang disingkat, kita bisa menggunakan tag <abbr>
    1. Penggunaan dasar
      Format penulisan:
      <abbr title="Kata yang akan disingkat">Kata singkatan</abbr>
    2. Contoh:
      Seorang pejabat pemerintahan tertangkap tangan <abbr title="Komisi Pemberantasan Pemilu">KPK</abbr>
      Hasilnya:
      Seorang pejabat pemerintahan tertangkap tangan KPK
    3. Penggunaan lanjutan
      Untuk membuat kata singkatan lebih tipis dan ramping, kita bisa menggunakan kelas .initialism
      Format penulisan:
      <abbr title="Kata yang akan disingkat" class="initialism">Kata singkatan</abbr>
    4. Contoh:
      Seorang pejabat pemerintahan tertangkap tangan <abbr title="Komisi Pemberantasan Pemilu" class="initialism">KPK</abbr>
      Hasilnya:
      Seorang pejabat pemerintahan tertangkap tangan KPK
      Hasil penggunaan tag <abbr> dasar dan lanjutan (ditambahi kelas .initialism) bedanya hanya pada tebal dan tipisnya kata singkatan. Jika melihat contoh diatas, mungkin terlihat sama. Hasilnya akan berbeda jika kita menggunakan ukuran font yang lebih besar dari 18px atau tetap menggunakan ukuran font standar tapi kita menambahkan tag <b> pada kalimat tersebut.
      Contohnya seperti ini:
      <div style="font-size: 18px;">
      Seorang pejabat pemerintahan tertangkap tangan <abbr title="Komisi Pemberantasan Korupsi">KPK</abbr>
      </div>
      <div style="font-size: 18px;">
      Seorang pejabat pemerintahan tertangkap tangan <abbr title="Komisi Pemberantasan Korupsi" class="initialism">KPK</abbr>
      </div>
      Seorang pejabat pemerintahan tertangkap tangan KPK Seorang pejabat pemerintahan tertangkap tangan KPK
      dan ini:
      <p><b>Seorang pejabat pemerintahan tertangkap tangan <abbr title="Komisi Pemberantasan Korupsi">KPK</abbr></b>
      <p><b>Seorang pejabat pemerintahan tertangkap tangan <abbr title="Komisi Pemberantasan Korupsi" class="initialism">KPK</abbr></b>
      Seorang pejabat pemerintahan tertangkap tangan KPK
      Seorang pejabat pemerintahan tertangkap tangan KPK

Blockquote

  1. Penggunaan dasar
    Format penulisan:
    <blockquote>
    isi kutipan/ penjelasan
    &lt/blockquote>
  2. Contoh:
    e bara’ epon Pamekasan, bada jugan kerajaan kene’.ban ke lesab sareng pengikut epon kodu ngelebet aghi settong songay. E bakto ka’dinto songay epon banjer saenggha Ke Lesab sareng pengikut epon kodu a bhiluk dha’ dajah . kennengan ka’dinto laju eberri’ nyama sempang, namong bit abhit epon aoba dhaddi Sampang. Ke Lesap sareng pasukan epon terros a tojju ka sembhilangan. Pertempuran e molae sebbab pasukan Cakraningrat V ngada aghi perlawanan-perlawanan se cokop dahsyat, namong akher epon pasukan sembhilangan bisa e paksa mundur.
  3. Menampilkan sumber
    Untuk menampilkan identitas dari sumber kutipan, gunakan tag <footer>. Untuk menampilkan penjelasan dari sumber kutipan, gunakan tag <cite>
    Format penulisan:
    <blockquote>
    isi kutipan/ penjelasan
    <footer>nama sumber <cite title"keterangan penjelasan">penjelasan</cite></footer>
    &lt/blockquote>
  4. Contoh:
    Aku adalah aku. Aku bukan kamu, bukan juga dia, apalagi mereka.
    Tak perlu kau menghakimiku, karena aku lebih tahu siapa diriku.

    papawardi blogger
  5. Tampilan alternatif
    Jika kita menambahkan kelas tag .blockquote-reverse, maka letak teksnya berada pada posisi rata kanan
    Format penulisan:
    <blockquote class="blockquote-reverse">
    isi kutipan/ penjelasan
    &lt/blockquote>
  6. Contoh 1:
    e bara’ epon Pamekasan, bada jugan kerajaan kene’.ban ke lesab sareng pengikut epon kodu ngelebet aghi settong songay. E bakto ka’dinto songay epon banjer saenggha Ke Lesab sareng pengikut epon kodu a bhiluk dha’ dajah . kennengan ka’dinto laju eberri’ nyama sempang, namong bit abhit epon aoba dhaddi Sampang. Ke Lesap sareng pasukan epon terros a tojju ka sembhilangan. Pertempuran e molae sebbab pasukan Cakraningrat V ngada aghi perlawanan-perlawanan se cokop dahsyat, namong akher epon pasukan sembhilangan bisa e paksa mundur.
    Contoh 2:
    Aku adalah aku. Aku bukan kamu, bukan juga dia, apalagi mereka.
    Tak perlu kau menghakimiku, karena aku lebih tahu siapa diriku.

    papawardi blogger

Lists

  1. Menggunakan tag <ul>
    Format penulisan:
    <ul>
    <li>isi list 1<li>
    <li>isi list 2<li>
    <li>isi list 3<li>
    </ul>
    Contoh:
    • Senin
    • Selasa
    • Rabu
  2. Menggunakan tag <ol>
    Format penulisan:
    <ol>
    <li>isi list 1<li>
    <li>isi list 2<li>
    <li>isi list 3<li>
    </ol>
    Contoh:
    1. Senin
    2. Selasa
    3. Rabu
  3. Deskripsi
    • Deskripsi standar
      Format penulisan:
      <dl>
        <dt>...</dt>
        <dd>...</dd>
      </dl>
      Contoh:
      BAKSO
      Terbuat dari olahan daging sapi yang dibentuk bulat
    • Deskripsi horisontal
      Format penulisan:
      <dl class="dl-horizontal">
        <dt>...</dt>
        <dd>...</dd>
      </dl>
      Contoh:
      BAKSO
      Terbuat dari olahan daging sapi yang dibentuk bulat

Tambahan

  1. Tag <pre>
    Apa yang ditulis dalam tag <pre> hasilnya sama dengan aslinya. Termasuk susunan kata dan jarak spasi antar kata
    Format penulisan:
    <pre>
      ...
    </pre>
  2. Contoh:
      belajar  lah      yang rajin               su
    paya pin  tar
            siip dah...
    
  3. Tag <code>
    Digunakan untuk penulisan code
    Format penulisan:
    <code>
      ...
    </code>
  4. Contoh:
    Mencoba tag code
  5. Tag <kbd>
    Digunakan untuk penulisan kode yang biasanya ada hubungannya dengan keyboard
    Format penulisan:
    <kbd>
      ...
    </kbd>
  6. Contoh:
    Untuk mematikan aplikasi, bisa menggunakan alt+F4
Ok, saya rasa cukup sampai disini dulu pembahasan kita tentang tipografi. Artikel selajutnya mengenai cara membuat tabel di Bootstrap. Baca artikelnya disini
Semoga sukses

INFORMASI PENTING

Apabila ada script atau tips & trik yang tidak bisa digunakan, silahkan beritahu kami melalui kolom komentar atau email kami di psnpenting@gmail.com

papa wardi
papa wardi Updated at: 20:18

Kolom komentar adalah tempat untuk Tanya-Jawab, Kritik-Saran dan tempat untuk berbagi ilmu, BUKAN TEMPAT PROMOSI.
Maaf jika saya tidak bisa membalas satu per satu komentar sahabat semua. Harap maklum.

Copyright 2016 © papawardi