Pengertian Kedalaman Ukuran Font (PX vs EM vs REM)

Memahami Ukuran Font

Ukuran font memainkan peran yang sangat penting dalam web, Ukuran font adalah salah satu properti css, Ukuran font atau ukuran teks yang didefinisikan adalah seberapa besar karakter yang ditampilkan pada halaman web. font biasanya diukur dalam poin (pt) dan biasanya didefinisikan dalam pixel (px).

Dengan mengecilkan ukuran font dasar (ukuran Font Tubuh) dari setiap halaman web adalah 16px, sampai kita menentukan ukuran font khusus apa pun.
Properti ukuran font ditentukan dalam salah satu cara berikut:

1. Ukuran absolut atau ukuran relatif
2. Sebagai panjang atau persentase (relatif terhadap ukuran font elemen induk)

Sintaks Dasar

Sintaks dasar font

Ukuran absolut
xx-kecil, x-kecil, kecil, xx-besar, x-besar, besar
Ukuran font dengan kata kunci ukuran Absolut, akan lebih besar atau lebih kecil dibandingkan dengan ukuran font elemen induk.

Ukuran relatif
lebih kecil, lebih besar

Panjang-Ukuran
Ukuran font yang ditentukan panjangnya akan selalu bernilai positif, digunakan unit font-relatif seperti em dan px

Persentase-Ukuran
Ukuran font dengan Persentase akan selalu bernilai positif dan relatif terhadap ukuran font elemen induk

Definisikan Font-Size In Body

Menentukan ukuran font di badan adalah pendekatan terbaik untuk mengembangkan halaman web apa pun. Dengan mengatur ukuran font kata kunci pada elemen tubuh, Anda dapat mengatur ukuran font relatif di tempat lain di halaman, sehingga Anda dapat dengan mudah mengatur font ke atas atau ke bawah pada seluruh halaman.

Ukuran Huruf Dalam Piksel (Px)

Menentukan ukuran font di Pixel bukanlah praktik yang baik. ini hanya akan baik jika Anda mengelola desain pixel sempurna.
 Pixel (px) adalah nilai statis, px adalah OS-independen dan cross-browser yang memberitahu browser untuk membuat huruf pada persis jumlah piksel tinggi yang Anda tentukan. Hasilnya mungkin sedikit berbeda di seluruh browser, karena setiap browser menggunakan algoritma dan pendekatan yang berbeda untuk mencapai efek yang sama.
 Saat Anda menentukan ukuran font dalam piksel (px), Anda mungkin harus menulis beberapa css tambahan untuk mengelola halaman secara responsif. dan Anda harus menulis css di setiap break point.

Ukuran Huruf Dalam EM

Cara lain untuk mendefinisikan ukuran font adalah dengan nilai em. Ukuran nilai em adalah dinamis. ketika kita menentukan ukuran font di dalamnya, itu tergantung pada ukuran elemen induk.
 jika kita belum menetapkan ukuran font untuk induk maka secara default akan mengambil ukuran font browser, yaitu 16px.
 Hal terpenting yang perlu diketahui bersama mereka adalah, selalu tergantung pada ukuran font induknya. jadi jika Anda mendefinisikan font di elemen bersarang maka Anda harus mengingatnya untuk mengatur ukuran font.

Konversi piksel ke em

Ukuran Huruf Dalam REM

Nilai rem ukuran font diciptakan untuk mengatasi masalah em dengan elemen bersarang.
 Nilai rem ukuran font relatif terhadap elemen html root, bukan elemen induk, semua sisanya sama seperti em.
 Di bawah ini adalah perbedaan antara rem dan em jika ada elemen bersarang.

Perbedaan antara Elemen Bersarang Dengan EM dan REM

Elemen Bersarang Dengan EMElemen Bersarang Dengan REM

Ref: https://developer.mozilla.org/en-US/docs/Web