Original by Simon Lockyer · . The worked examples and guidance above the original text are a new version from 20 October 2026.
Try the sizing example beside the sticky-footer layout. Change the text size and compare where the content ends before concluding that the footer is in the right place. The flip-card example offers a different check: whether transformed content still remains usable.
em and rem, without the guesswork
Use em when a component should scale with its own text. Use rem when spacing should follow the root text size. For font-size, em refers to the parent’s computed font size; on most other properties it refers to the element’s own computed font size. This distinction explains many unexpected nested sizes.
Convert a pixel measurement to em
Work through one component
- A card inherits a 20px font size.
- Give it
padding: 1em: that padding is 20px. - Inside the card, a heading uses
font-size: 1.5em: the heading is 30px. - If that heading also uses
margin-bottom: 1em, the margin is 30px, not 20px.
.card { font-size: 1.25rem; padding: 1em; }
.card h2 { font-size: 1.5em; margin-block-end: 1em; }With a 16px root, the card is 20px and the heading is 30px. A nested heading does not use the root for its em calculation. A rem-based margin would.
Check it before shipping
- Change your browser’s default font size and check that content still fits.
- Inspect computed styles for the actual font size instead of assuming 16px.
- Zoom to 200% and try the longest real heading.
- Prefer unitless line height for inherited text rhythm.
Reference: MDN: CSS length units. example checked 20 October 2026.
Read the original 2013 article
Most web designers and web developers have relied for years on pixel values. I for one didn’t really know allot about using em values. This article will hopefully try to explain what em units are and how you could use them in your projects.
What exactly is an em value?
Formal definition from of the unit
So if we have set the font size of an h1 element to 20px and then we used the following code:
H1{
font-size: 20px;
line-height: 1.2em;
}
this would set the line height to 20% bigger than the font size set. So it would be 24px high.
But what if you don’t set the size of your font? Generally in your CSS tree you will have set font size’s at some point, I don’t really see how you cant! But if no font size has been set the size on an em unit will result to 16px.
The only way you can learn is by doing! So lets try one more.
Say we have a div with a font size set to 20px how would you go about setting the width and the height of the div to be the same as 100px? Well 100 / 20 = 5 so you would set the height and the width of the div to be 5em like so:
.div {
font-size: 20px;
width: 5em;
height: 5em;
}
A little tip – comments
Recently I have completed some work in collaboration with some other web designers and developers. To be polite the codes comments were particularly light. Its not really that necessary to comment CSS code quite as much as if you were writing in PHP or C# however in the case of using em it is really helpful. For the example above I like to comment like the example below. This really helps after a while to get your head round em units and you will be grateful when you go back to look at your CSS file in a few months time!
.div {
font-size: 20px;
width: 5em; /* 100px / 20px = 5em */
height: 5em; /* 100px / 20px = 5em */
}
Round up
I found it quite hard to get into the habit of using em units after using pixels for such a long time. However the new releases of the popular css frameworks, Foundation.Zurb and Bootstrap include the use of em units.
While current trends in web design make use of responsive layouts I believe the use of pixels and percentages are necessary for setting container sizes etc. However the use of em units become useful when setting sizes in relation to fonts.
Original archived capture. Historical prices, donation requests, browser workarounds and external links are retained as context, not current offers.
Keep exploring
More field notes · Illustration and typography resources
Trace three nested font sizes instead of guessing
The earlier example compares one card with its heading. This second workbench follows three inherited font-size calculations and a separate rem reference. Change only the component’s base size; it does not alter the whole site or save a setting.
- Start with the component at 16 CSS pixels. Level one uses font-size:1.25em, level two 1.5em and level three 0.8em. For font-size, em follows the parent’s computed font size: 16 × 1.25 = 20; 20 × 1.5 = 30; 30 × 0.8 = 24.
- Set the component to 20 pixels. The expected sizes become 25, 37.5 and 30 pixels. Read the displayed computed values rather than estimating from a screenshot. Fractional CSS pixels are valid; physical device pixels are a separate scale.
- Compare the separate 1.5rem label. It follows the document root, so changing this component should not change that label. The workbench displays the actual root size; it does not assume that every site uses 16 pixels.
Worked record
| Base 16 | Expected nested sizes: 20 → 30 → 24 CSS px. |
|---|---|
| Base 20 | Expected nested sizes: 25 → 37.5 → 30 CSS px. |
| Relative reference | 1.5rem = 1.5 × the measured root font size, independent of this component base. |
| Error check | Use a base from 12 to 32 inclusive. Clear the input or enter an out-of-range value: the previous measurement is cleared and an error is shown. Restore 16 to calculate again. |
Root reference · 1.5rem
This is a new demonstration beside Simon’s original article, not a claim that he performed a 2026 test. em used for other properties has a different reference from em in font-size; do not apply this multiplication blindly to every CSS property.
Primary sources: MDN: CSS length units