Characteristics of using em width vs. % width on text containers Relativity.

Designing a page with no images using em widths with the desired look in a 1000px wide viewport with 16px defaults (e.g. for 1024×768 resolution), then the page should look proportionally identical with 32px defaults in a 2000px wide viewport (e.g. for 2048×1536 resolution).

The column widths change only when the viewport width is changed.

Both em and % are relative measures. The difference is what each is relative t0. Em is always relative to font size. % is relative to the containing block, usually the body, a div, or a table, unless applied to font-size, in which case it applies to the parent font-size.

Using em for column widths means line lengths in characters will not vary as text size is changed. If at 12pt default in div#leftcol ‘The quick brown fox jumps over’ fits exactly all on one line, then it will do the same if the default is instead 18pt or 9pt.

In contrast, when you set column widths as a % of the body, the column widths change only when the viewport width is changed, not when font size is changed. This means regardless of actual font size, a change in font size won’t cause a horizontal scroll.