Measurement on a web site

Question

Should you mix em with px?

As em is based on font size and px is based on the screen.

So the question boils does to - how to generate an image when most of the web site is using em ?

Answer 1

Fonts are designed to be used in an array of sizes; thus font engines have no problem scaling them up/down with precision; however, images have always used a rigid measurement (regardless of unit). Consequently, resizing them tends to F them up -- sometimes a litte, sometimes a lot. This is especially true when the browser is doing the resizing. Browsers weren't designed as photo-editing tools.

If you're building image-based menus, and you're also allowing the menu to scale upward in size, maybe a redesign is in order. If not a redesign, than perhaps an elimination of one factor (no scaling, or no images).

Answer 2

Normally, images have intrinsic dimensions in pixels. But you can scale them according to font size, if they are e.g. buttons that should match text in size. Just create a large enough image (scaling down works much better than scaling up) and set e.g. the height of the image to 1.5em. When you set height only and not width (or vice versa), browsers scale the image so that the width : height ratio is preserved.

However, buttons are better created using CSS, not images. Background images can be scaled using advanced CSS features (background-size), which however have limited browser support.

Answer 3

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

The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement

pixels (a dot on the computer screen),px can be resized in IE as well. em is a relativ size to the inherited size by it's parent element and actually has the same meaning as %.

Answer 4

you can mix, but it's not recommended. I would create a container element and use px on that element if the parent is using em.

Answer 5

I personally mix both. You can do it either way without errors.
It depends on preference, and practices. There are others too: http://www.w3schools.com/cssref/css_units.asp

Answer 6

I find it always best to use px in the html,body and em for all the rest in regards to font. However, take a look at relative units(vw vh v-min v-max): http://css-tricks.com/viewport-sized-typography/

Answer 7

Use css3

background-size: auto 100%;

on the container of the content. The background will resize relative to container height and the container height will increase relative to font-size, no matter how it is set.