Elastic Layout by CSS

An elastic interface scales with browser text size, default 16px, which users can change if they wish. Some people make a permanent change for accessibility reasons, others use the UI controls to increase text size if they need to.

Elastic design uses em values for all elements. Ems are a relative size, written like this: 1em, 0.5em, 1.5em, etc. Ems can be specified to three decimal places like 1.063em.

They are calculated based on the font size of the parent element. e.g. If a <div> has a computed font size of 16px then any element inside that layer inherits the same font size unless it is changed. If the child font size is changed to 0.75em, then the computed size would be 0.75 × 16px = 12px. If the user increases (or decreases) text size in their browser, the whole interface stretches (or shrinks.)

The em is a unit of measurement in typography. An em was originally equal to the size of the metal block used to cut a single letter of type for a specific font. It was roughly equivalent to the width of a capital letter M. Computers use kerning to adjust the horizontal space each letter occupies on the screen, making them equidistant and balanced. Originally, the metal block was trimmed or kerned to make the horizontal padding around each letter the same.

So, in CSS, an em is actually a vertical measurement. One em equals the vertical space needed for any given letter in a font, regardless of the horizontal space it occupies.

Pixels to Ems Conversion Table for CSS