Membuat Tipografi Responsive Menggunakan CSS3

Seperti yang kalian tahu Tipografi adalah sebuah bagian paling penting dari setiap desain website dan kalian pasti akan kaget jika kalian membuka website kalian di ukuran layar seperti handphone atau pun tablet, maka ukuran dari tipografi tersebut akan tetap sama dengan ukuran jika kita buka di desktop. Nah di tutorial kali ini saya akan mengajarkan bagaimana caranya membuat sebuah tipografi yang dapat mengecil saat kita buka halaman website kita di ukuran layar yang sedang ataupun yang lebih kecil dengan menggunakan CSS3.

Dengan menggunakan tipografi responsive, kita dapat menyesuaikan tampilan tipografi yang ada di dalam website kita dengan ukuran layar apapun. Nah tehnik ini tidak hanya untuk tipografi tetapi berlaku juga untuk semua bagian yang di dalam sebuah website kalian. Baiklah kita akan coba langsung mempraktekkannya ya teman-teman.

Pada contoh di bawah ini saya akan buat tipografi responsive pada tag headings atau tag <h1> sampai <h6>. Nah kalian bisa buka text editor kalian masing-masing dan bisa ketikkan tag <h1> sampai <h6> seperti contoh di bawah ini.

Kemudian untuk CSS nya kita akan hilangkan margin atau padding bawaan browser dengan cara seperti di bawah ini, dan kalian bisa panggil juga selector body, dan berikan property pada selector body tersebut seperti gambar di bawah ini.

Selanjutnya kita akan buat selector baru di file CSS nya yaitu h1, h2, h3, h4, h5, h6 dan berikan property CSS nya seperti gambar di bawah ini.

Kemudian kita akan buat script responsive nya di CSS menggunakan perintah @media yang ada pada CSS, jadi nanti saat kita buka website kita di ukuran layar kecil maka tag headings tersebut akan mengecil menyesuaikan ukuran layarnya. Untuk kode CSS nya kalian bisa ikuti seperti gambar di bawah ini.

Penjelasan dari kode CSS @media di atas adalah, jadi ketika sebuah website di buka di ukuran layar dengan lebar (width) 900px atau kurang dari 900px maka ukuran font, yang size aslinya 25px akan mengecil sebesar 20px, dan jika website tersebut di buka di ukuran layar dengan lebar (width) 500px atau kurang dari 500px maka size nya akan mengecil menjadi 14px.

Buat teman-teman yang ingin melihat Script secara keseluruhannya teman-teman bisa lihat di text-editor codepen di bawah ini.

See the Pen PwZprx by Dumet_School (@dumet_school) on CodePen.

Nah itulah cara membuat sebuah tipografi responsive hanya menggunakan CSS3, sekian dulu tutorial dari saya semoga tutorial ini bermanfaat untuk teman-teman semuanya. Terima Kasih.

DEMO