Cara Menggunakan Satuan Em Pada Website Atau Blog

Ketika anda tidak menentukan ukuran huruf sebagai acuan awal, maka 1em akan otomatis disetarakan dengan 16px. Tetapi saat anda menentukan acuan awal, maka 1em akan disetarakan dengan ukuran huruf yang jadi acuan tersebut. Contohnya begini :


body {
font-family:Tahoma;
text-align:justify
}

Pada sintax di atas, anda tidak menentukan ukuran font, maka 1em adalah setara dengan 16px.

body {
font-family:Tahoma;
font-size:20px;
}

Pada sintax di atas, anda menentukan ukuran huruf sebesar 20px, maka 1em adalah setara dengan 20px.

Setelah mengetahui karakter satuan em seperti di atas, maka kita bisa memanfaatkannya dalam mengatur ukuran font untuk setiap bagian dari website atau blog. Misalnya saja dengan pengaturan untuk headling. Contohnya seperti ini :

body {
font-family:Tahoma;
}
h1 {
font-size:1em;
}
h2 {
font-size:0.9em;
}
h3 {
font-size:0.8em;
}

Contoh tersebut akan menghasilkan ukuran-ukuran font atau huruf sebagai berikut :

H1 = 1 x 16px;
H2 = 0.9 x 16px;
H3 = 0.8 x 16px;


Penggunaan satuan em sangat baik untuk template-template yang responsive design.

IKLAN INI BUKAN BAGIAN DARI ARTIKEL

1 comment: