Tipografi teks di Bootstrap 3

Hai kembali lagi bersama Portal Coding.

Sebelumnya kita telah belajar bootstrap 3 dengan membahas bagian basic grid boostrap 3. Nah pada pembahasan kali ini kita akan membahas mengenai Tipografi teks di Bootstrap 3. Apa itu tipografi? Menurut wikipedia.org, Tipografi atau seni cetak atau tata huruf adalah suatu kesenian dan teknik memilih dan menata huruf dengan pengaturan penyebarannya pada ruang yang tersedia, untuk menciptakan kesan tertentu, guna kenyamanan membaca semaksimal mungkin.

Nah berikut ini saya akan menjelaskan mengenai tipografi di bootstrap 3, simak dibawah ini.

Pengaturan Default Bootstrap

Ukuran font default global Bootstrap adalah 14px, dengan tinggi garis 1,428. Ini berlaku untuk tag <body> dan semua paragraf. Selain itu, semua elemen tag <p> memiliki margin bawah yang sama dengan setengah tinggi-garis yang dikomputasi (secara default 10px).

Tag-tag HTML yang digunakan dalam tipografi bootstrap

Secara Default, tag yang digunakan dalam bootstrap dengan default browser itu sama, pembedanya hanya di ukuran dan kerapian teks serta font yang digunakan pada bootstrap maupun default browser. Berikut ini adalah beberapa tag HTML yang digunakan dalam tipografi bootstrap.

<h1> - <h6>

Secara default, Bootstrap akan menata judul HTML ( <h1>ke <h6>) dengan cara berikut:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Example</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <h1>h1 Bootstrap heading (36px)</h1>
      <h2>h2 Bootstrap heading (30px)</h2>
      <h3>h3 Bootstrap heading (24px)</h3>
      <h4>h4 Bootstrap heading (18px)</h4>
      <h5>h5 Bootstrap heading (14px)</h5>
      <h6>h6 Bootstrap heading (12px)</h6>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

Dan hasilnya adalahh seperti berikut ini.

Bedakan dengan sebuah tag html yang tidak menggunakan bootstrap alias murni html tanpa css.


<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap Example</title>
  </head>
  <body>
    <div>
      <h1>h1 Bootstrap heading (36px)</h1>
      <h2>h2 Bootstrap heading (30px)</h2>
      <h3>h3 Bootstrap heading (24px)</h3>
      <h4>h4 Bootstrap heading (18px)</h4>
      <h5>h5 Bootstrap heading (14px)</h5>
      <h6>h6 Bootstrap heading (12px)</h6>
    </div>

  </body>
</html>

Dan hasilnya adalah seperti berikut ini.

Tampak perbedaan nya kan? Menggunakan Bootstrap lebih rapi outputnya.

<small>

Kemudian tag <small>. Dalam Bootstrap, tag <small> digunakan untuk membuat teks sekunder yang lebih ringan di sembarang judul, berikut contohnya.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Example</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <h1>Lighter, Secondary Text</h1>
      <p>The small element is used to create a lighter, secondary text in any heading:</p>
      <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>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

Dengan hasil seperti dibawah ini.

<mark>

Selanjutnya tag <mark>, Bootstrap akan menata tag <mark> dengan cara berikut:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Example</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <h1>Highlight Text</h1>
      <p>Use the mark element to <mark>highlight</mark> text.</p>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

Dengan output :

Dan jika kita tidak menggunakan bootstrap alias hmtl statis tanpa css hasilnya adalah seperti berikut ini.

<abbr>

Nah kemudian adalah tag <abbr>. Bootstrap akan menata tag <abbr> dengan cara berikut ini.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Example</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <h1>Abbreviations</h1>
      <p>The abbr element is used to mark up an abbreviation or acronym:</p>
      <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

Dengan hasil seperti berikut.

Nah diatas adalah sebagian dari tipografi yang digunakan oleh bootstrap dalam mendesain website dinamis dan responsive. Diatas itu belum lengkap ya.

Untuk lanjutannya bisa dibuka baca lagi ya di Tipografi teks di Bootstrap 3 bab 2. Silahkan disimak ya. Terimakasih.

Salam coding.

Tipografi teks di Bootstrap 3