Memahami Penulisan Teks / Typography didalam Bootstrap 5 - ambiskode

Teks merupakan komponen utama didalam sebuah website. Hampir seluruh isi website, didalamnya memuat data berbentuk teks.

Dengan demikian, tampilan / interface dari teks yang dibaca, sangatlah mempengaruhi kenyamanan, kefahaman pembaca terhadap isi konten, dan juga pengalaman pembaca terhadap website tersebut.

Banyak pengunjung / pembaca dari suatu website yang merasa kurang nyaman, sulit memahami konten yang dibaca, atau merasa tidak puas. Hal ini dikarenakan, mungkin tulisan yang dibaca terlalu kecil, atau style tulisannya terlalu dibuat-buat, atau bahkan tidak dapat membedakan mana isi konten, mana link, atau mana teks biasa dengan teks berpenanda khusus yang kesemuanya terlihat tidak ada bedanya. 

Yang dimana hal tersebut menyebabkan pembaca merasa kebingunan dan ogah berlama-lama membaca isi konten dari website tersebut.

Maka, dibutuhkanlah suatu Style Sheet yang mampu mengatasi permasalahan diatas.

. . .

Didalam Bootstrap sendiri, telah menyediakan berbagai macam kerangka styling teks yang dapat kita gunakan sesuai dengan kebutuhan.

Kita mulai dari penulisan Heading teks terlebih dahulu

Heading

Sama halnya seperti di HTML, didalam Bootstrap sendiri judul dari suatu konten dapat ditulis dengan Heading <h1> s.d <h6>.

Berikut merupakan penulisan di Bootstrap.

		 	
    <div class="container">
    		<h1>h1 Title</h1>
        <h2>h2 Title</h2>
        <h3>h3 Title</h3>
        <h4>h4 Title</h4>
        <h5>h5 Title</h5>
        <h6>h6 Title</h6>
    </div>
  

Atau jika kita ingin menggunakan Heading dengan ukuran yang lebih besar, kita dapat menggunakan Display heading.

Berikut merupakan syntax penulisannya.

		 	
    <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>
        <h1 class="display-5">Display 5</h1>
        <h1 class="display-6">Display 6</h1>
    </div>
  

Menampilkan hasil.

Text Alignment

Text Aligmnent merupakan metode styling teks yang digunakan untuk mengatur perataan dari suatu teks, seperti rata kiri, rata kanan, atau rata tengah.

Berikut merupakan perbedaan nilai properti antara CSS dengan Bootstrap.

Syntax CSS	Syntax Bootstrap
text-align: left	text-start
text-align: center	text-center
text-align: right	text-end

Perhatikan program berikut.

		 	
    <div class="container">
    		<p class="text-start">Teks dengan tampilan rata kiri.</p>
        <p class="text-center">Teks dengan tampilan rata tengah.</p>
        <p class="text-end">Teks dengan tampilan rata kanan.</p>
        
        <p class="text-sm-end">Teks akan tampil rata kanan jika lebar layar >= small (576px).</p>
        <p class="text-md-end">Teks akan tampil rata kanan jika lebar layar >= middle (768px).</p>
        <p class="text-lg-end">Teks akan tampil rata kanan jika lebar layar >= large (992px).</p>
        <p class="text-xl-end">Teks akan tampil rata kanan jika lebar layar >= extra large (1200px).</p>
        <p class="text-xxl-end">Teks akan tampil rata kanan jika lebar layar >= extra extra large (1400px).</p>
    </div>
  

Menghasilkan tampilan.

Didalam Bootstrap, tidak disediakan perataan teks untuk rata kanan-kiri (Justify).

Text Transform

Text Transform merupakan metode styling teks yang digunakan untuk memodifikasi / mentransformasi karakter biasa menjadi kapital ataupun sebaliknya.

Syntax CSS	Syntax Bootstrap
text-transform: lowercase	text-lowercase
text-transform: capitalize	text-capitalize
text-transform: uppercase	text-uppercase

Berikut merupakan contoh penggunaannya.

		 	
    <div class="container">
    		<p class="text-lowercase">Belajar text typography Bootstrap</p>
        <p class="text-capitalize">Belajar text typography Bootstrap</p>
        <p class="text-uppercase">Belajar text typography Bootstrap</p>
    </div>
  

Menghasilkan tampilan.

Font Size

Bootstrap telah menyediakan utilitas yang digunakan untuk menentukan ukuran huruf. Sama halnya dengan heading, font-size didalam Bootstrap didefinisikan dengan 6 ukuran.

Syntax CSS	Syntax Bootstrap
font-size	fs

Berikut merupakan contoh penggunaanya.

		 	
    <div class="container">
    		<p class="fs-1">1. Belajar text typography Bootstrap.</p>
        <p class="fs-2">2. Belajar text typography Bootstrap.</p>
        <p class="fs-3">3. Belajar text typography Bootstrap.</p>
        <p class="fs-4">4. Belajar text typography Bootstrap.</p>
        <p class="fs-5">5. Belajar text typography Bootstrap.</p>
        <p class="fs-6">6. Belajar text typography Bootstrap.</p>
    </div>
  

Menghasilkan tampilan.

Atau jika ingin mengkustom ukuran sendiri, dapat menambahkan properti CSS didalam attribut style.

		
    <div class="text-center" style="font-size: 17px;">
    	  Hello World!
    </div>
  

Font Weight

Font weight merupakan utilitas yang digunakan untuk mengatur ketebalan huruf. Ketebalaanya sendiri dapat kita atur mulai dari yang paling tebal hingga ke yang paling tipis.

Syntax CSS	Syntax Bootstrap
font-weight	fw

Berikut merupakan contoh penggunaannya didalam program.

		 	
    <div class="container">
    		<p class="fw-bold">Belajar text typography Bootstrap. -bold</p>
        <p class="fw-bolder">Belajar text typography Bootstrap. -bolder</p>
        <p class="fw-semibold">Belajar text typography Bootstrap. -semibold</p>
        <p class="fw-medium">Belajar text typography Bootstrap. -medium</p>
        <p class="fw-normal">Belajar text typography Bootstrap. -normal</p>
        <p class="fw-light">Belajar text typography Bootstrap. -light</p>
        <p class="fw-lighter">Belajar text typography Bootstrap. -lighter</p>
    </div>
  

Menghasilkan tampilan.

Line Height

Line height merupakan utilitas Bootstrap yang digunakan untuk mengatur jarak antar baris.

Syntax CSS	Syntax Bootstrap
line-height	lh

Terdapat empat ukuran yang dapat kita gunakan, yaitu: 1, sm, base, lg.

Berikut contoh penggunaannya didalam program.

		 	
    <div class="container">
    		<p class="lh-1">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." lh-1</p>
        <p class="lh-sm">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." lh-sm</p>
        <p class="lh-base">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." lh-base</p>
        <p class="lh-lg">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." lh-lg</p>
    </div>
  

Menghasilkan tampilan.

Text Decoration

Text decoration merupakan utilitas yang digunakan untuk mendekorasi teks, seperti menambahkan garis bawah, garis tengah ataupun garis atas.

Syntax CSS	Syntax Bootstrap
text-decoration: [value];	text-decoration-[value]

Berikut contoh penggunaannya.

		 	
    <div class="container">
    		<p class="text-decoration-underline">Belajar text typography Bootstrap.</p>
        <p class="text-decoration-line-through">Belajar text typography Bootstrap.</p>
        <a href="#" class="text-decoration-none">Belajar text typography Bootstrap.</a>
    </div>
  

Menghasilkan tampilan.

Selain cara diatas, kita juga dapat mendekorasi teks dengan cara berikut.

		 	
    <div class="container">
    		<p>Belajar text <mark>typography</mark> Bootstrap.</p>
        <p>Belajar text <del>typography</del> Bootstrap.</p>
        <p>Belajar text <ins>typography</ins> Bootstrap.</p>
        <p>Belajar text <u>typography</u> Bootstrap.</p>
        <p>Belajar text <small>typography</small> Bootstrap.</p>
        <p>Belajar text <strong>typography</strong> Bootstrap.</p>
        <p>Belajar text <b>typography</b> Bootstrap.</p>
        <p>Belajar text <em>typography</em> Bootstrap.</p>
        <p>Belajar text <i>typography</i> Bootstrap.</p>
        <p>Belajar text <sup>typography</sup> Bootstrap.</p>
        <p>Belajar text <sub>typography</sub> Bootstrap.</p>
    </div>
  

Teks yang ingin kita dekorasi, kita letakkan diantara <tag> khusus seperti contoh diatas.

Menghasilkan tampilan.

Font Family

Font family merupakan utilitas yang digunakan untuk menentukan gaya huruf didalam sebuah teks.

Syntax CSS	Syntax Bootstrap
font-family	font

Berikut merupakan penggunaannya didalam program.

		 	
    <div class="container">
    		<p class="font-monospace">Belajar text typography Bootstrap.</p>
        <p>Belajar text typography Bootstrap.</p>
    </div>
  

Menghasilkan tampilan.