Mengatur ukuran font-size menggunakan style pada CSS tidakah semudah yang
anda bayangkan. Kadang memang diperlukan pemahaman lebih agar bisa memahami
properti pada font-size ini. Pada kenyataanya, tidak semua format yang digunakan
juga bisa sesuai pada sebagian Web Browser. Saat ini saja ada sekitar 5 unit besaran
font-size yang saya kenal yaitu px (pixel), em (em), % (persent), pc (pica) dan
pt (point) atau ada juga pilihan standar lainnya yang dapat anda gunakan diantaranya
xx-large, x-large, larger, large, medium, small, smaller, x-small,
xx-small dan length.
Secara default web browser kebanyakan menggunakan 16px untuk standar
font-size, tapi tidak semua font-size dengan ukuran 16px sesuai dengan keinginen
web developer. Sebagai contoh, bila anda menggunakan ukuran % misalkan 20%
berarti anda menampilkan font standar menjadi lebih kecil 20% dari ukuran
standar. berbeda dengan satuan em, jika anda semisalkan membuat font-size .3em
berarti ukuran font yang ditampilkan akan berukuran 3 kali lebih besar dari font
standarnya.
Contoh penerapan Font-Size pada CSS:
body
{
font-size: x-large
}
p
{
font-size: 10px
}
Contoh Penerapan lainnya:
Absolute size
<p style="font-size : x-large;">
This paragraph is extra large.
</p>
Relative size
<p style="font-size : smaller;">
This paragraph is smaller than the base font size.
</p>
Length
<p style="font-size : 1.5em;">
This paragraph is 1.5 ems.
</p>
Sebenarnya penjelasan kali ini bisa lebih mudah dimengerti jika anda
mengunakan tools konversi untuk mempermudah anda memahaminya. Salah satu tools
yang sering saya gunakan yaitu dari layanan
PXtoEM. Dari namanya saja sudah
jelas ini merupakan layanan conversion dimana anda anda dapat melakukan konversi
PX to EM atau kebalikannya EM to PX.
Dengan layanan ini kita dapat memilih nilai font-size yang ada dalam tabel,
nilai konversi yang digunakan menggunakan 16px sesuai standar default browser.
Saat anda memilih , saat itu juga anda akan menemukan hasil konversi di tabel
sebelahnya.
Untuk mendapatkan hasil yang benar2 siap digunakan dalam bentuk kode CSS
sesuai nilai konversi pilihan anda, silahkan menuju button Get CSS..jadi lebih
mudah ya :)
Rumus yang digunakan PXtoEM juga bisa anda pelajari:
- PX to EM: text size in pixels / body text size in pixels = size in
EMs
o Example: 12px / 16px = .75em
- PX to %: text size in pixels / body text size in pixels * 100 = size in %
o Example: 12px / 16px * 100 = 75%
- PX to PT: text size in pixels * points per inch / pixels per inch = size
in pt
o Example: 16px * 72 (72 points = 1 inch) / 96 (96 pixels per inch in Windows,
72 in Mac) = 12pt
- EM to PX: text size in EMs * body text size in pixels = size in
pixels
o Example: .75em * 16px = 12px
- EM to %: text size in EMs * 100 = size in %
o Example: .75em * 100 = 75%
- % to PX: text size in % * body text size in pixels / 100 = size in pixels
o Example: 75 * 16px / 100 = 12px
- % to EM: text size in % / 100 = size in EMs
o Example: 75 / 100 = .75em
- PT to PX: text size in pt * pixels per inch / points per inch = text
size in pixels
o Example: 12pt * 96ppi / 72ppi = 16px
Saya mengakui tulisan kali ini jauh dari sempurna, semoga tulisan singkat ini bisa berguna aja ya :)
