Menggunakan Ems untuk mengubah ukuran font
Ketika Anda sedang membangun halaman Web, sebagian besar profesional menyarankan Anda mengubah ukuran font (dan faktanya, semuanya) dengan ukuran relatif seperti ems, exs, persentase, atau piksel. Ini karena Anda benar-benar tidak tahu semua cara yang berbeda bahwa seseorang mungkin melihat konten Anda. Dan jika Anda menggunakan ukuran mutlak (inci, sentimeter, milimeter, titik, atau picas) mungkin memengaruhi tampilan atau pembacaan halaman di perangkat yang berbeda.
Dan W3C merekomendasikan Anda menggunakan ems untuk ukuran.
Tapi Seberapa Besarkah Em?
Menurut W3C an em:
"sama dengan nilai yang dihitung dari properti 'font-size' dari elemen yang digunakan. Pengecualian adalah ketika 'em' terjadi pada nilai properti 'font-size' itu sendiri, dalam hal ini merujuk ke ukuran font elemen induk. "
Dengan kata lain, ems tidak memiliki ukuran absolut. Mereka mengambil nilai ukuran mereka berdasarkan di mana mereka berada. Untuk sebagian besar perancang Web , ini berarti bahwa mereka berada di browser Web, sehingga font yang tingginya 1 em adalah ukuran yang persis sama dengan ukuran font default untuk browser itu.
Tapi seberapa tinggi ukuran defaultnya? Tidak ada cara untuk menjadi 100% pasti, karena pelanggan dapat mengubah ukuran font default mereka di browser mereka, tetapi karena kebanyakan orang tidak dapat diasumsikan bahwa kebanyakan browser memiliki ukuran font default 16px. Jadi sebagian besar waktu 1em = 16px .
Pikirkan dalam Piksel, Gunakan Ems untuk Mengukur
Setelah Anda mengetahui bahwa ukuran font default adalah 16px, Anda dapat menggunakan ems untuk memungkinkan klien Anda mengubah ukuran halaman dengan mudah tetapi berpikir dalam piksel untuk ukuran font Anda.
Katakanlah Anda memiliki struktur sizing seperti ini:
- Judul 1 - 20px
- Judul 2 - 18px
- Judul 3 - 16px
- Teks utama - 14px
- Sub teks - 12 piksel
- Catatan kaki - 10px
Anda bisa mendefinisikannya dengan cara menggunakan piksel untuk pengukuran, tetapi kemudian siapa pun yang menggunakan IE 6 dan 7 tidak akan dapat mengubah ukuran halaman Anda dengan baik. Jadi Anda harus mengonversi ukuran menjadi ems dan ini hanya masalah matematika:
- Judul 1 - 1.25em (16 x 1,25 = 20)
- Judul 2 - 1.125em (16 × 1.125 = 18)
- Judul 3 - 1em (1em = 16px)
- Teks utama - 0.875em (16 x 0.875 = 14)
- Sub teks - 0,75em (16 x 0,75 = 12)
- Catatan Kaki - 0.625em (16 x 0.625 = 10)
Jangan Lupakan Warisan!
Tapi itu tidak semua ada untuk ems. Hal lain yang perlu Anda ingat adalah mereka mengambil ukuran orang tua. Jadi, jika Anda memiliki elemen bertingkat dengan ukuran font yang berbeda, Anda bisa berakhir dengan font yang jauh lebih kecil atau lebih besar dari yang Anda harapkan.
Misalnya, Anda mungkin memiliki style sheet seperti ini:
p {font-size: 0.875em; }
.footnote {font-size: 0.625em; }
Ini akan menghasilkan font yang 14px dan 10px untuk teks utama dan catatan kaki masing-masing. Tetapi jika Anda memasukkan catatan kaki di dalam paragraf, Anda dapat menghasilkan teks dengan ukuran 8,75 piksel, bukan 10 piksel. Cobalah sendiri, letakkan ini di atas CSS dan HTML berikut ke dalam dokumen:
Font ini memiliki tinggi 14px atau 0.875 ems.
Paragraf ini memiliki catatan kaki di dalamnya.
Sementara ini hanyalah paragraf catatan kaki.
Teks footnote sulit dibaca pada 10px, hampir tidak terbaca pada 8.75px.
Jadi, ketika Anda menggunakan ems, Anda harus sangat menyadari ukuran objek induk, atau Anda akan berakhir dengan beberapa elemen berukuran sangat aneh di halaman Anda.