Units of length in HTML and CSS.
There are two distinct types of length units used in Web design - relative and absolute. Relative lengths are calculated in relation to another length property whereas absolute lengths have a predetermined fixed size.
Relative
There are three relative length units:
- em - the font-size of the current element originally derived from the width of the capital letter M in the current font.
- ex - the 'x-height' of the relevant font originally defined by the height of the letter x in the current font.
- percent - a percentage always defined in relation to another property which is written as a number followed by the percent sign i.e. 50%.
Absolute
The absolute units:
- in - inches - 1 inch = 2.54 centimeters.
- mm - millimeters.
- cm - centimeters.
- pt - points - points in CSS are equal to 1/72nd of an inch.
- pc - picas - 1pc = 12 points.
- px - pixels - 1px is equal to 0.75 pt.
Which to use - relative or absolute?
Using absolute lengths you are guaranteed a fixed size which means that layouts will never change whatever the screen resolution or window size. This is appealing to a designer but there are two good reasons why using relative units for on screen display is the best option:
- scalability - pages constructed with percentages and em units in the CSS can be scaled up or down to adjust to different screen widths and output devices.
- accessibility - fixed size units don't allow the user to adjust the display to suit their needs. For example a visually disabled user may need to increase the size of the font in order to make it legible - but if an author sets a fixed font size in the style sheet this may render the site unusable for this user.
Absolute units have a place in designs where the output size is known in advance such as layout for printing but when designing for the Web and the myriad of display devices and sizes employed to view sites it makes sense to use relative units.