03/01/2016

Properti CSS Font Size (Ukuran Font)

03/01/2016

Properti CSS Font Size digunakan untuk menentukan ukuran tinggi dan besaran sebuah font ketika ditampilkan dalam browser. Nilai dari font size itu sendiri memiliki bermacam-macam unit, setiap masing-masing unit nilai tersebut memiliki sejarah pengembangan dan fungsinya sendiri. Kesemua unit nilai tersebut sedikitnya terbagi dalam dua kategori, unit relative dan unit absolute

Unit Relative
Unit relative adalah unit yang besaran nilainya akan menghasilkan ukuran yang tidak tetap dan tergantung pada beberapa hal seperti nilai yang ditentukan pada elemen induk, ukuran lebar viewport, ukruan tinggi viewport (layar area konten pada browser diluar toolbars, tab, address box atau lainnya), dll.
Berikut ini gambaran singkat dari unit relative
Nilai Deskripsi
% Relatif terhadap nilai yang telah ditentukan pada elemen induk
em Relatif terhadap nilai yang telah ditentukan pada elemen induk (dua kali lebih besar
rem Relatif terhadap ukuran elemen utama(HTML)
Kata Kunci xx-small, x-small, small, medium, large, x-large, xx-large
vw Relatif terhadap 1/100 ukuran lebar viewport
vh Relatif terhadap 1/100 ukurang tinggi viewport
vmin Relatif terhadap 1/100 ukuran terkecil viewport(lebar/tinggi)
vmax Relatif terhadap 1/100 ukuran terbesar viewport(lebar/tinggi)

Contoh penulisan CSS Font Size unit relatif adalah seperti berikut
#elemen {font-size: 1em}

Sebagai catatan, apabilai kita tidak menentukan nilai CSS font-size pada sebuah dokumen HTML, ada nilai default yang digunakan oleh kebanyakan browser untuk menentukan ukuran font pada tag < body > dan < HTML >, yaitu 100%, artinya 100% = 1em = 1rem = 16px = 12pt.

Nilai Absholute
Nilai absholute adalah nilai-nilai yang didasarkan pada ukuran media printing dan tidak terpengaruh oleh kondisi css tag induk elemen HTML (parent) atau viewport.
Nilai Deskripsi
px Satuan pixel titik layar, 1px = 1/96 dari 1in
mm Satuan milimet
cm Satuan centimeter, 1cm = 10mm
di satuan inchi, 1di = 2,54cm
pt satuan point, 1pt = 1,72 inchi
pc Satuan pica, 1pc = 12pont

kembali ke CSS Font dan Teks