Sizing Units of Measure

Hi guys,

I am looking for a best practice answer.

We can use various units of measure - px, em, pt, %

They can be used to size a block, change the size of text, thicken a border and on and on …

However, I am wondering whether there is a best practice to using these units - taking into account general layouts, cross-browser comparability, and future browser developments.

Also, I wonder if there are any definite no no’s.

Many thanks in advance for any information.


I believe em is the standard for type, and px or % is the standard for just about all other elements. em is a little odd at first, but once you understand how it works, it’s really handy. However, if you use px across the board, the internet police are not going to come knocking at your door. The units you use don’t usually cause browser issues, but it’s always important to test, and try ctrl + or - scaling pages in the browser to see if your layout breaks as the page scales.

I thank you.


Text should generally be sized in % or em (they are equivalent once you multiply/divide by 100) for screen use, and pt for printing (it should go without saying that you need a print stylesheet, which will be quite different from the screen one). But don’t go getting carried away – the less text sizing you do, the better.

Dimensions may be in px, em or % for screen use (cm, pt, em or % for print), depending on what they’re doing. You can even combine them. For example:

[list][]You might want to set the page content to have width:60em; max-width:1200px; min-width:400px;
]Sizing an element to align with an object of known dimensions, like an image, you’re probably best off using px.
[]Widths in % can help maintain the site in proportion. Heights in % tend to cause trouble. In fact, heights in general need careful thought, to make sure you don’t get a box that’s too small for the text inside it (especially when the user enlarges the text).
]If the parent element has dimensions given in px, don’t give child elements dimensions in %, stick to px to avoid rounding errors.
[]Border weight is generally best done with px (pt for print).
]Margin and padding are generally best done with px (pt for print) or em. It can work with %, but needs careful handling. If you’re using em, make sure that the base font size is the same on any elements where you want the margins and padding to line up.
[]Avoid setting whole-page dimensions in any units for print.
]Never use pt or cm for screen, and never use px for printing.[/list]

That’s brilliant Stevie - many thanks to you.


Quote for truth… Good list of exceptions to the rule there too… though on your first one I usually set width in %, max-width in EM and min-width in PX… think about it :smiley: