Back to the index.
This script does not work in IE8 and lower.
Root font size:
font-family:
Below you see how many pixels the units are for the base fonts of 12, 16, and 24 pixels. Select a font to generate this data.
This is the test page for the “font-dependent” CSS units. In fact, only ex and ch are truly font-dependent; em and rem aren’t.
1em is equal to the font-size in pixels. So with a 12px font 1em = 12px; with a 16px font 1em = 16px etc.ex is font-dependent; it’s supposed to be the x-height of the font. I did not check if that was truly the case; I only checked if the browser gives a non-default width to the test elements.
ch is also font-dependent; it’s supposed to be the “advance measure of the 0,” but it’s unclear what that means. Same caveat as the previous.rem is the same as em, except that it uses the root font-size; i.e. the font-size of the HTML element. This is usually 16px.The dotted line is the right border of the test wrapper. If an element is exactly as wide as the test wrapper, the unit is not supported.
Test area with font-size: 12px.
width: 20em
width: 20ex
width: 20ch
width: 20rem
Test area with font-size: 16px.
width: 20em
width: 20ex
width: 20ch
width: 20rem
Test area with font-size: 20px.
width: 20em
width: 20ex
width: 20ch
width: 20rem
Test area with font-size: 24px.
width: 20em
width: 20ex
width: 20ch
width: 20rem