When Marshall McLuhan coined the phrase “the medium is the message”, he referred to a concept which lends itself well to modern day web design. He contended that the medium in which a message is delivered affects how that message is perceived. In the same way, today’s web developers must select the appropriate font units for the medium where their work is presented. The choice of font units has a literal impact on how the message is perceived. Therefore, it is important for designers and developers alike to be aware of what units are available and when to use them.
According to the W3 Consortium, lengths refer to horizontal or vertical measurements, and there are two types of length units: relative and absolute.
Relative units are:
- em
- the
font-sizeof the relevant font - ex
- the
x-heightof the relevant font - ch
- width of the “0” (ZERO, U+0030) glyph in the element’s font
- rem
- font size of the root element
- vw
- 1% of viewport’s width
- vh
- 1% of viewport’s height
- vmin
- 1% of viewport’s smaller dimension
- vmax
- 1% of viewport’s larger dimension
Absolute units are fixed in relation to each other:
- in
- inches —
1inis equal to96px - cm
- centimeters – 1in/2.54 =
37.795px - mm
- millimeters – 1/10th of
1cm=3.779px - q
- quarter-millimeters – 1/40th of
1in=0.944px - pt
- points — 1/72nd of
1in=1.333px - pc
- picas — 1/6th of
1in=16px - px
- pixels — one reference pixel
The CSS specification states, “absolute units are mainly useful when the output environment is known.” This is an updated paraphrasing of the old spec that stated, “absolute length units are only useful when the physical properties of the output medium are known.” With the advent of mobile devices the variety of screen sizes, resolutions, and orientations is more diverse than ever. A developer can seldom be certain of the physical properties of the output medium. To accommodate these discrepancies, the W3 Consortium recommends that developers rely on relative units to create flexible designs that render well on an assortment of displays.
The Incredible Em
By using ems, developers can improve accessibility, maintain flexible layouts and create code that is more readable. Ems are particularly well suited for font sizing on the web because an em is a measurement of typography and a relative unit. 1em is equal to the current font size; font size is an inherited property—i.e. it is passed from a parent element to its children.
The web is all about choice and accessibility. If an end user chooses to set their default font size to a value larger than 16px (which is most all browsers default), they should receive content that has been appropriately sized to fit their needs. This is particularly important for users with poor eyesight and small monitors. The following example demonstrates what occurs when absolute units are used:
div {font-size: 16px;}
h1 {font-size: 24px;}
p {font-size: 12px;}
In the example above, if an end user decides to increase the default font size to 20px, the font-size will not change because pixels are absolute. However, if the units are changed to ems something very different happens:
div {font-size: 1em;}
h1 {font-size: 2em;}
p {font-size: .75em;}
By default, the above example will look identical to the one before it, but when an end user opts for a larger default font size of 20px, the <h1> will receive a calculated font size of 40px, and the <p> will receive a font size of 15px. Admittedly, the example above is somewhat archaic. Most modern browsers can effectively scale pixels in the same way they scale ems, but he also points out their practical use in flexible designs.
Fluid, elastic and responsive designs rely heavily on ems to create scalable sites in addition to @media queries which can be used to target different devices. Developers who make use of ems can easily improve text readability on smaller screens by increasing the font size on the body and allowing it to cascade.
This makes code cleaner, because stylesheets can be smaller and more readable. A developer need not know what the actual display size is, so long as the ratio between elements is appropriate.
Note: There is a bug in older versions of Internet Explorer that “unacceptably exaggerate the smallness and largeness of the resized text,” according to A List Apart. The solution is simple, elegant, and is included in many CSS resets by default. Simply set body {font-size:100%;}.
Bonus Points
Because absolute units are particularly well suited to applications where the size of the medium is fairly consistent, points are best used in print design. Print design should not be neglected when designing for the web. It’s a good idea to target the printed page by making use of @media print queries to hide interactive elements such as site navigation, reset text and background colors, and redeclare font sizes in points to allow for more control over the printed page in an effort to conserve paper and ink while creating a better overall presentation.
Note: Because ems are relative to the current font size, they can also be effectively used in print style sheets. It is recommended that developers declare <body> size in points and allow the document to cascade.
Unitless Bliss
The CSS line-height property can accept unitless values, and should always be declared as such because it makes for cleaner, more readable style sheets. Unitless line height is relative and is calculated as a ratio of the current font size for each element.
ul {font-size: 15px; line-height: 1em;}
li {font-size: 10px;}
In the above example, the line height for each element is inherited from the <ul>, because ems are relative to the element on which they are defined the calculated line-height for the <ul> is 15px. This value is inherited by the children, so both the <li> and the <small> have a line-height of 15px.
Unitless values, on the other hand, are inherited as a “raw number”. By modifying the above CSS to use unitless values, the line-height of each child element is set relative to itself and it’s font-size, even if its font-size has changed.
ul {font-size: 15px; line-height: 1;}
li {font-size: 10px;}
In this example the <ul> still receives a line height of 15px, but now the <li> receives a line height of 10px, and the <small> gets a calculated line height 8px.
Live Demonstration
See the Pen Unitless line-height demo by Joey Hoer (joeyhoer).
This makes code cleaner, as it takes less CSS to achieve consistent styling. Additionally, readability is improved in the same way that ems improves readability of the font-size property; a developer doesn’t need to know anything about the child elements to modify their relative line-heights by making effective use of the cascade.