48 Belajar CSS Font Size Property

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 :)

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari o-om.com di inbox anda: