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.
| Pixels | Points | Ems | Percent |
|---|---|---|---|
| 8 | 6 | 0.5 | 50 |
| 9 | 7 | 0.55 | 55 |
| 10 | 7.5 | 0.625 | 62.5 |
| 11 | 8 | 0.7 | 70 |
| 12 | 9.6 | 0.75 | 75 |
| 13 | 10 | 0.8 | 80 |
| 14 | 10.5 | 0.875 | 87.5 |
| 15 | 11 | 0.95 | 95 |
| 16 | 12 | 1 | 100 |
| 17 | 13 | 1.05 | 105 |
| 18 | 13.5 | 1.125 | 112.5 |
| 19 | 14 | 1.2 | 120 |
| 20 | 14.5 | 1.25 | 125 |
| 21 | 15 | 1.3 | 130 |
| 22 | 16 | 1.4 | 140 |
| 23 | 17 | 1.45 | 145 |
| 24 | 18 | 1.5 | 150 |
| 26 | 20 | 1.6 | 160 |
| 32 | 24 | 2 | 200 |
| 38 | 29 | 2.35 | 235 |
| 48 | 29 | 3 | 300 |
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.
- 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.
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.