Why most sites use em than px in width, height, fonts, etc.

I usually use px for my font size or dimensions of elements in my page, but I have been told by other developers and seen on most websites that they use em.

The problem I have with em, is that I am more use to using px than em in general and that I do not make my sites, with liquid or flexibility in mind. If the user changes the browser view properties for text, my site looks out of whack if I did it in em.

I heard that 1em = 16px. So its a pain having to calculate the values.

I usually use px for my font size or dimensions of elements in my page, but I have been told by other developers and seen on most websites that they use em.

The problem I have with em, is that I am more use to using px than em in general and that I do not make my sites, with liquid or flexibility in mind. If the user changes the browser view properties for text, my site looks out of whack if I did it in em.

I heard that 1em = 16px. So its a pain having to calculate the values.

Good Question, looking forward to seeing how people answer this one. It always seems that the main people who use em are either "experts" or else idiots who want to sound like experts. It's generally the latter in my experience

I heard that 1em = 16px. So its a pain having to calculate the values.

1em is not equivalent to 16px nor it is equivalent to any other static value because em's are used to represent relative units bound to typographical parameters such as font size. I.e. if a div container is defined inside a document body with an CSS attribute containing a 2em value that very attribute is going to be twice as big as the one used for the body element.

ems are generally a good thing because they allow CSS designers to create very adaptive templates. However not everyone can master them and in lot of cases using them would consume much more time than using simple units such as px, % leading to situations in which people usually avoid using ems.

so for example if everything in your page was 12px, but you wanted all headings twice the size as regular text you could use 2em, and then when you changed the 12px to something else, the headings would still be twice as big and you wouldn't have to change them also? (if you still wanted them twice as big of coarse)

It's easy to make pixel-perfect designs using px units, but it relies heavily upon the browser and sometimes the operating system. Thus all these browser-detection libraries and CSS hacks.
They break if someone tries to resize the font in their browser, but the browser makers got smart and made their default resizing be a zoom instead. Which still has little quirks, especially with rounding, but it let the web designers get lazy.

Relative units like % and ex/em are harder to make into a "perfect" site because people still have this mentality of making stuff appear exactly the same on every single freaking browser. Spoiler: it's a pain in the arse to do it, even with px units.
Example: had a site that looked markedly different when viewed in Firefox and in IE. But you know what? It didn't matter because on each browser the site looked right. So what if the header was a few pixels lower in one place - everything else was adjusted in the same ways so it all appeared correct. Even did some overlay stuff and, except for actual bugs (farking box model) I didn't have to do anything special to get it to work everywhere.

I use ex/em units myself. Am I a CSS guru? No. Do I need a pixel-perfect layout? Generally not. But it makes some things quite a bit easier. For example, 2ex is the height of a normal line. Want something spaced down two lines? 4ex. Want text indented by a couple characters? 2em.

There are still times when I want pixels, though. Mostly when I'm dealing with purely visual stuff like borders and images.

so for example if everything in your page was 12px, but you wanted all headings twice the size as regular text you could use 2em, and then when you changed the 12px to something else, the headings would still be twice as big and you wouldn't have to change them also? (if you still wanted them twice as big of coarse)

In general yes however you might want to remember that with ems it all about the font size, particularly the font size of the body element since it the "oldest parent" of the web page.

I can see where em would be great if your design is based on a liquid layout, but if it's designed to look specifically at the dimensions you designed it for, what use would em be?

And what use is a design with some certain dimensions if your visitors have something else?

Originally Posted by rePete

I really do not get the purpose of ems in fonts, because if the fonts do not look in size how it is meant to look originally, it looks unproportional in your whole layout.

"originally", huh. And what exactly would that be? The browser, operating system, resolution, and font set you use yourself?

If you make a design with a certain font in mind, and I don't have that, what will happen? Your assumptions about line/character width and height will be wrong. Your pixel-perfect layout will not work.
What if I have Large Fonts? What if I have poor eyesight and I browse the Internet at 125% text zoom?

I heard that 1em = 16px. So its a pain having to calculate the values.

What I think you might have read was that the default size for medium text in all modern browsers is 16px.

The thing I learned about ems is that it is all about what you end up declaring in your body or whatever element because ems size according to their ancestry and that's where the math can get difficult but the formula is child pixel divided by it's parent pixel = em. If you put a font size measurement deceleration whatever in a parent then the child would be divided by that parent to get your em measurement and this applies to the grandchildren too.

If you wanted your math to be easy you could declare your body element like this :BODY {font-size:62.5%} That then makes your body medium text go from 16 px to 10 px and then your math would be a little more simple.

As em are relative measurement units, sounds logical (and professionals do care about that) to be used only in case of fonts. So that in a document it would be more likely (and recommended) to use rather px instead of em (except, as I said, the fonts)

As em are relative measurement units, sounds logical (and professionals do care about that) to be used only in case of fonts. So that in a document it would be more likely (and recommended) to use rather px instead of em (except, as I said, the fonts)

Glad somebody said it.

However I'd like to point out, though don't quote me on this, this is only based on what I've read over the years.

em is the relative measurement of the 'M' character of a font. Therefore KorRedDevil is right in using em/ex for just simply fonts.

px and % should be used for layout and dimensions.

I personaly use % instead of px. but utilise min/max height/width to build a template for a page. Example:

Code:

body {
width: 80%;
height: 100%;
min-width: 960px;
margin: 0 auto;
}

This would let you structure the body so that you got a centred document, at 80% of the browser viewport, no less than 960px width so that you can still maintain the right look.