CSS units demo

This page aims to showcase different uses of CSS units in typography and layouts. The base font-size is 16px. Change it:

Typography

Text 24px | Text 1.5rem | Text 150%
Text 1.5em Text 1.5em inside of 1.5em = 16*1.5*1.5 = 36px

Layouts

Static layout

600px
200px
400px

Fluid layout

100%
30%
70%

Elastic layout (50em breakpoint)

Beware: em units within media-queries are computed based on your browser's font-size (which is changed in the user preferences), not the root font-size set on the html element.

Header (100%)
20rem, 100% on small screens
100% - 20rem, 100% on small screens