Submitted by: warRioR_toD on 2012-11-21 13:24:18
Confused by various units in the same page? Pixels, points, percentage and ems are all in common use. There is also the stupid stuff that does not belong on a web page (cm, mm, in, pc, ch). The 3Ps and ems are all appropriate to use, but when they get mixed together it can be a challenge to visualize how the page is going to look at various resolutions; so below we have a little conversion table to help.
Before you decide to use them all on a page, let's take a look at some best practices. These are my best practices. Some shops mandate where the unit types are to be used, and there are several approaches that are valid. The one thing that is backward is to have no consistent way to assign units of measure.
I intentionally left out the new units vw and vh. These relate to the viewport whereas the other units relate to the page dimensions and there is no conversion possible. A vh is equal to 1/100 of the height of the viewport and a vw is equal to 1/100 of the width of the viewport. These newer units are very relevant for responsive presentation and as the browser support increases they will probably be used widely by progressive developers.
If you want to consider the stupid options (some have little or no support), the complete specifications for unit values in CSS3 can be found here.
Don't screw up accessibility by forcing fixed font sizes. Avoid specifying specific fonts except for special effects
Keep it simple. If you are doing a whole page with all fixed values and absolute positioning, you are not doing layout; you are drawing an image of a page. REALLY BAD DESIGN. It will shatter and crumble like glass as soon as you try to bend it or re-shape it.