Typography tentu akan selalu berkaitan dengan sebuah seni atau visualisasi tentang tulisan. Ya disini Typography yang dibahasa seputar tentang tampilan jenis, ukuran, maupun dekorasi huruf yang dipakai. Bagi sebagian seorang Web Design sangat penting membuat tampilan Website harus menarik serta membuat betah penggunanya. Kenapa saya membahas Typography Responsive pada Tailwind CSS, karena Tailwind CSS sendiri merupakan salah satu framework CSS yang sedang booming saat ini.

Apabila sahabat masih bingung tentang konsep responsive pada Tailwind CSS silahkan membaca dalam artikel teman saya tentang Memahami Core Concepts Responsive Design Pada Tailwind CSS . Saya mencoba untuk mengexplore tentang Typography. Baiklah langsung saja kita memulai untuk membuatnya ikut langkah-langkah berikut:

Pertama buat file yang berisi struktur HTML seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title></title>
	<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>

untuk bagian tag <head> jangan lupa menyisipkan link library dari Tailwind , dan untuk bagian content seperti berikut :

<body class="bg-indigo-100">
	<div class="container my-4 mx-auto px-4">
		<h1 class="md:font-sans lg:font-serif text-yellow-600 sm:text-orange-600 lg:text-red-600">Apa itu Typography?</h1>
	<p>Sebenarnya typography sendiri merupakan salah satu elemen dari dunia desain grafis yang unik, dimana tipografi bukan hanya sekedar elemen bacaan, tpi juga mempunyai unsur seni yang luar biasa</p>
	<h2 class="md:font-sans lg:font-serif text-yellow-600 sm:text-orange-600 lg:text-red-600">Apakah Lorem Ipsum itu?</h2>
	<p>Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf.</p>
	<h3 class="md:font-sans lg:font-mono text-yellow-600 sm:text-orange-600 lg:text-red-600">Dari mana saya bisa mendapatkannya?</h3>
	<p>Ada banyak variasi tulisan Lorem Ipsum yang tersedia, tapi kebanyakan sudah mengalami perubahan bentuk, entah karena unsur humor atau kalimat yang diacak hingga nampak sangat tidak masuk akal.</p>
	<p>Veniam inventore dolor, fuga ipsam possimus quam libero est eius voluptatem. Dolorem aspernatur ut, expedita perspiciatis blanditiis deleniti porro commodi, iusto, molestias dolorum quo, in tenetur pariatur animi fugiat quam?</p>
	<h2 class="md:font-sans lg:font-serif text-yellow-600 sm:text-orange-600 lg:text-red-600">Mengapa kita menggunakannya?</h2>
	<p>Temporibus voluptatum doloribus ad, consequatur porro aperiam fuga tenetur et optio minima? Consequuntur molestiae consectetur nulla! Veniam sed repudiandae earum assumenda animi quos possimus pariatur, blanditiis at rerum itaque, dolore!</p>
	</div>

jadi pada body tambahkan background dimana sahabat bisa cari website tailwindcss pada bagian BACKGROUNDS>Background Color.

selanjutnya bisa diperhatikan style pada tag <h1> dimana terdapat class = md:font-sans lg:font-serif  text-yellow-600 sm:text-orange-600 lg:text-red-600.

/* Small (sm) */
@media (min-width: 640px) { /* ... */ }

/* Medium (md) */
@media (min-width: 768px) { /* ... */ }

/* Large (lg) */
@media (min-width: 1024px) { /* ... */ }

/* Extra Large (xl) */
@media (min-width: 1280px) { /* ... */ }

Jadi saat tampilan width pada breakpoint md (medium) maka font family yang digunakan adalah jenis font sans, apabila width mencapai ukuran lg(large) akan berubah jenis font serif. Begitu pula dengan warna teks akan berubah. Jika sahabat sudah mengetikkan semua code diatas maka buka pada browser masing-masing untuk melihat hasilnya seperti gambar dibawah ini:

membuat-typography-responsive-tailwind-css-edi-030320

pada gamabr diatas untuk color teks yang berubah dan selanjutnya adalah untuk jenis font yang berubah seperti gambar dibawah ini:

membuat-typography-responsive-tailwind-css-edi_030320

Baiklah saya rasa cukup sekian pembahasan artikel ini, semoga bermanfaat dan sampai jumpa dilain kesempatan serta pembahasan selanjutnya.

terima kasih