BlogFont-Size em vs px vs pt vs percent

Font-Size em vs px vs pt vs percent

-

So, What’s the Difference?

It’s easy to understand the difference between font-size units when you see them in action. Generally, 1em = 12pt = 16px = 100%.

Points Pixels Ems Percent
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1.6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%
26pt 35px 2.2em 220%
27pt 36px 2.25em 225%
28pt 37px 2.3em 230%
29pt 38px 2.35em 235%
30pt 40px 2.45em 245%
32pt 42px 2.55em 255%
34pt 45px 2.75em 275%
36pt 48px 3em 300%

credit for : reeddesign.co.uk

Ardhitya Wiedha Irawan
Ardhitya Wiedha Irawanhttp://aiueo.web.id
Full time Web Developer - Part time Android Coder - Part time Publisher - Big fan of #GGMU.

9 COMMENTS

    • IMHO :
      Untuk font yang standart digunakan saya rasa satuan ini berlaku, tapi mungkin untuk font jenis lain yang tidak biasa digunakan mungkin struktur besar kecilnya akan berbeda ukuran.

  1. Koreksi beroh.. setahuku ukuran em itu relatif terhadap ukuran font parentnya.

    Jadi misal body{font-size: 10px} h1{font-size: 1.5em} itu berarti font pada tag h1 berukuran 1.5*10px = 15px.. kayaknya sih 😀

    CMIIW

    • 2 tahun yang lalu kamu cuma komen “Nice info mas dab…” *lihat komenmu diatas*. Sekarang kamu sudah mundak pinter le hahaha… nice komen dab 😀

Comments are closed.

Latest news

Perbedaan Apache2 Reload dan Restart ?

Kamu pengguna apache ? ahh selamat! berarti kamu orang lama yang sulit move on haha. Konon sekarang di dunia...

Membuat Shortcut untuk switch Dark dan Light Mode di Macbook

Baru baru ini aku menginginkan sebuah fungsi tombol yang bisa mengganti tema di Macbook secara cepat, dari Dark Mode...

Cara buat Sticker langsung di Web WhatsApp tanpa Install aplikasi!

Hai sob! kali ini gulangguling.com akan berbagi cara mudah membuat sticker untuk whatsapp tanpa harus install aplikasi lainnya. Sering...

Cara Mengembalikan Nomer WhatsApp yang terkena Banned

Halo teman-teman. Kali ini saya akan berbagi cara mengembalikan nomer yang sudah terkena banned dari aplikasi WhatsApp. Tapi sebelumnya...

Aplikasi Rambox, dapat digunakan untuk login banyak akun WhatsApp hingga marketing jualan.

Aplikasi Rambox adalah sebuah program yang dirancang untuk mengintegrasikan beberapa aplikasi chatting dan kolaborasi dalam satu tempat. Dengan menggunakan...

Cara melihat history Kometar dan Like di Instagram

Pernah penasaran dengan apa saja sih yang pernah kita lakukan di Instagram? seperti kita likes komentarin postingan siapa saja...

Must read

You might also likeRELATED
Recommended to you