This page is intended to give you a deeper insight into the types of values used to control size. The code examples provided in the library code snippets and code tutorials throughout this resource often include indications of size such as width, height, and thickness. In these examples, size is always expressed using a number and then a value. The values can either be absolute or relative.

Absolute Values

Absolute values are fixed so that the element they define will always appear as coded regardless of the browser or display screen size. The absolute values are:

in: Inches
mm: Millimeters
cm: Centimeters
px: Pixels
pt: Points
pc: Picas

As a point of reference, 1 inch = 25.4 mm = 2.54 cm = 96 pixels = 72 points = 6 picas.

Relative Values

Unlike absolute values, relative values will change size in response to specific elements. Because of their responsive nature, relative values are considered to be better practice than absolute values. Keep in mind, if your design requires a specific look/feel/size, you may need to use absolute values.

The three most widely used relative values in this resource are em, rem, and %.

em

An em is defined as a value determined by the font-size of the element. The default font size in Canvas is 12pt. This means that adding 2em to your code will result in a value of 24pt (2 × 12 = 24).

rem

A rem is defined as a value determined by the font-size of the root element. The root element, or <html> tag, defines the entire page. While browsers may vary on the font type, most browsers use 16px as their default font size in their root element. This means that adding 2rem to your code will result in a value of 32px (2 × 16 = 32).

%

A % is defined as a value relative to the parent element. A parent element contains other elements called child elements. When the % value is used with a child element the resulting value will be based on the size of the parent element. For example, percentages are frequently used with images and tables to control the amount of space attributed to those elements on the page and to make them more responsive to different display screens. Unless contained within a <div> or other parent element, the use of a % within an <img> or <table> tag will produce an image or table that is a set percentage of the <body> tag (the parent element). In simpler terms, the image or table size will increase or decrease in relation to the screen size (or body of the page).

Consider reading the Accessibility and font sizes blog post for more information on the differences between em and rem.