2014
Jan
09

「pt, px, em, % 」, These properties are the font size of CSS. First, "em" is the same with "%", this is meaning for percentage of font. If you type 50% so that the font will be the 50% size of normal font.

  • 1em=100%=12pt=16px
  • 0.75em=75%=9pt=12px

"pt": The font size for printer.

"px": This unit is meaning pixel.

"em": 1em = 100% = 12pt = 16px = The default size of browser.

It is often 16px in most browser. We could use nested "em" to set the font size. For example, I set 2em to the first div and set 0.5em to the child div. Then the font size of child div will be 2*0.5, it is equal to 1em.

"percent(%)" : It is the same with "em".


1em 100% 12pt 16px
ECAE ECAE ECAE ECAE

Property "pt" 8pt 9pt 10pt 11pt 12pt 13pt 14pt 16pt
Test Test Test Test Test Test Test Test

Property "px" 8px 9px 10px 11px 12px 13px 14px 16px
Test Test Test Test Test Test Test Test

Property "em" 0.6em 0.8em 1em 1.2em 1.5em 1.6em 2em > 0.5 3em > 0.3
Test Test Test Test Test Test Test Test

Property percentage 40% 60% 80% 100% 150% 180% 200% > 50% 300% > 0.3
Test Test Test Test Test Test Test Test

回應 (Leave a comment)