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

<h1>

<h6>

.h1

.h6

<h1>Heading h1</h1>
<h2>Heading h2</h2>
<h3>Heading h3</h3>
<h4>Heading h4</h4>
<h5>Heading h5</h5>
<h6>Heading h6</h6>

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5

Heading h6

<small>

.small

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

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

font-size

line-height

<body>

<p>

<p>
...
</p>

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

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.

.lead

<p="lead">
...
</p>

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

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

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

Saat politik kehilangan makna, <mark>uanglah yang bicara</mark>

Saat politik kehilangan makna, uanglah yang bicara

Menghapus teks
Untuk menghapus teks, gunakan tag <del>
```
<del>
...
</del>
```

Saat politik kehilangan makna, <del>uanglah yang bicara</del>

Saat politik kehilangan makna, ~~uanglah yang bicara~~

Mencoret teks
Untuk mencoret teks, gunakan tag <s>
```
<s>
...
</s>
```

Saat politik kehilangan makna, <s>uanglah yang bicara</s>

Saat politik kehilangan makna, ~~uanglah yang bicara~~

Menurut saya, kedua tag di atas (<del> dan <s>) hasilnya sama saja, tidak ada perbedaan sedikitpun.

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

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

Teks rata kiri

Teks rata tengah

Teks rata kanan

Teks rata halaman

Teks tanpa perataan

Transformasi teks

<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

Kata singkatan

<abbr>

Penggunaan dasar
Format penulisan:

<abbr title="Kata yang akan disingkat">Kata singkatan</abbr>

Seorang pejabat pemerintahan tertangkap tangan <abbr title="Komisi Pemberantasan Pemilu">KPK</abbr>

Seorang pejabat pemerintahan tertangkap tangan KPK

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

Seorang pejabat pemerintahan tertangkap tangan <abbr title="Komisi Pemberantasan Pemilu" class="initialism">KPK</abbr>

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

<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

Penggunaan dasar
Format penulisan:

<blockquote>
isi kutipan/ penjelasan
&lt/blockquote>

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.

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

Aku adalah aku. Aku bukan kamu, bukan juga dia, apalagi mereka.
Tak perlu kau menghakimiku, karena aku lebih tahu siapa diriku.

papawardi blogger

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

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.

Aku adalah aku. Aku bukan kamu, bukan juga dia, apalagi mereka.
Tak perlu kau menghakimiku, karena aku lebih tahu siapa diriku.

papawardi blogger

Lists

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

Menggunakan tag <ol>
Format penulisan:

<ol>
<li>isi list 1<li>
<li>isi list 2<li>
<li>isi list 3<li>
</ol>

Contoh:

Senin
Selasa
Rabu

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

Tag <pre>
Apa yang ditulis dalam tag <pre> hasilnya sama dengan aslinya. Termasuk susunan kata dan jarak spasi antar kata
Format penulisan:
```
<pre>
  ...
</pre>
```

  belajar  lah      yang rajin               su
paya pin  tar
        siip dah...

Tag <code>
Digunakan untuk penulisan code
Format penulisan:
```
<code>
  ...
</code>
```

Mencoba tag

code

Tag <kbd>
Digunakan untuk penulisan kode yang biasanya ada hubungannya dengan keyboard
Format penulisan:
```
<kbd>
  ...
</kbd>
```

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

INGAT!!!

Jika ingin mencobanya secara offline, masukkan script diatas pada template dasar diantara kelas .container atau .container-fluid (hapus tulisan  sampai ). Jika belum punya template dasar, anda bisa membacanya disini

papa wardi

Mengenal Tipografi di Bootstrap dan Penerapannya