Font Size: em vs px

HTML & CSS
1

Should I be using em or px for my font-size in CSS? The reason I ask is because I am wondering if em would be better for print outs? Or does it have nothing to do with that?

(Amazed that I haven’t researched this more… I have always used px)

Thanks,

2

Well basically it doesn’t have difference at all,they are just css units.

em: 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then ‘2em’ is 24 pt. The ‘em’ is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses

px: pixels (a dot on the computer screen)

Hope this helps.

3

Ohh, so em is basically a multiplier with the parent div?

<div class=“box”>14px
<span class=“quote”>7px</span>
</div>

.box {font-size:14px;}
.quote {font-size:0.5em;}

Does em work with px too? Or just pt?

Thanks!

4

Yes, just like what you did.Em is very useful in CSS field.Just like what I posted from w3schools.com It adapts on the current font size.

5

For media=“print” you are best off to use pt (points) as that would provide a fixed layout on the page when it comes out of the printer.

The best option when you just want to style it once for all media is to use em.

px (pixels) is best reserved for when you want the thinnest possible border around something where you would define it as 1px.

6

ems and px have been discussed many times on the forums so these threads may help you decide :slight_smile:

http://www.sitepoint.com/forums/css-53/default-font-sizes-what-they-746728.html
What’s the value for an “em” unit? - SitePoint Forums

7