Why this site looks better in Firefox
Thumbnail
Borrow my code

Feel free to borrow any code you like on this site for modification and use on your site. For support implementing just leave a comment for Cd&. You will also find Cd& providing answers and solutions on codingforums, Experts-Exchange, and other help sites where support is available. If there is a snippet you need for your web site, send a request to Cd&, and it might end up being made available on the site.

If you use code from coboldinosaur.com a link would be appreciated.

If you have code on your site that might help other developers, you could add a Borrow button and join the movement to make good open source code easily accessible to all developers.

Dzone icon Reddit icon Facebook icon RSS Icon

COBOLdinosaur


CSS Unit Conversion Table


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.

CSS Unit Conversion Table
(Based on a 12pt default font size)
PixelsPointsEmsPercent
860.550
970.5555
107.50.62562.5
1180.770
129.60.7575
13100.880
1410.50.87587.5
15110.9595
16121100
17131.05105
1813.51.125112.5
19141.2120
2014.51.25125
21151.3130
22161.4140
23171.45145
24181.5150
26201.6160
32242200
38292.35235
48293300

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.

Where is it appropriate to use each:
  • px: Elements that must have fixed dimension and/or position; anything that will be modified in scripting.
  • pt: Avoid except where specific typography is required. Never use for positioning.
  • em: Handy for control of input widths or pages with a mix of font families. Caution: a lot of different fonts on a page is a sign of poor design in most cases.
  • Percentage: BEST way to do font size; a must in responsive flex design. Difficult to manage for positioning or in scripting where px is almost always a better choice.

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.

Got a special script or snippet? Author Guidelines

To comment on this snippet LOGIN or REGISTER FOR FREE
Want to talk about this page? Send a comment to Cd&
Not a member of COBOLdinosaur yet? FREE REGISTRATION HERE