CSS Demo : px vs rem vs em

Root Font Size

Component A
Font Size

Usage

This demo simulates how px, rem, and em respond to the following changes:

Observe for changes in the heading and paragraphs of components A and B.

Also, this demo responds to changes in the user's font size. (Which can be modified via the browser's settings.)

Component B
Font Size

px values will neither respond to changes in font size of its component nor the root element.

rem values will only respond to changes in font size of the root element and not its component.

em values will respond to all changes in font size of its component and any other parent, up to the root element.