3.4 Use relative rather than absolute units

You can specify sizes in either absolute or relative units. Absolute units are fixed values, such as a 12 point font size or an 800 pixel column width. Relative units define size in measurements like ems (a unit of width relative to a font size) or percentages of the total width of the browser window.

There is a wide variety of viewing devices, from very large monitors to tiny screens on handheld devices, and the content should flow into the appropriate size. This doesn't happen when you use absolute position and length units. Users need to be able to change the size of text to compensate for the resolution or size of their device or because of a visual impairment.

You should:

• Use the em unit to set font sizes rather than points. For example:
  
  h1 { font-size: 2em }
• Use relative length units and percentages. For example:
  
  body { margin-left: 20%; margin-right: 15%}
• Only use absolute length units when you know the physical characteristics of the output medium, such as bitmap images
• Use percentages when you set the sizes of tables and frames. When a user resizes the window, the frames adjust accordingly and remain readable.