em
em sets the font-size relative to the font-size of the parent element.
So, if the parent element’s font-size is 40px and if we set child element’s font-size 0.5em then the child element’s font-size will be 20px. Just like this example:
ex
We don’t use ex much but it sets the font-size to the x-height of parent font-size.
ch
ch sets the font-size relative to the width of the character “0”.
rem
rem sets the font-size relative to the font-size of the root element.
As we can see in the example below, the HTML doc’s font-size is 20px. The p tag has 10px size and it takes that font-size. The span inside p tag has font-size 1rem which takes HTML doc’s font-size (20px).
The div outside of the p tag has font-size of 2rem which looks for HTML doc’s font-size (20px) and sets itself to 40px.
vw
vw sets the font-size relative to the viewport. The full form of vw is viewport width and 1vw is equal to 1% of viewport width.
vh
vh sets the font-size relative to the viewport. The full form of vh is viewport height and 1vh is equal to 1% of viewport height.
vmin
vmin considers viewport height and viewport width both and whoever has smaller dimension, it applies that dimension to calculate the element’s font-size.
vmax
vmax considers viewport height and viewport width both and whoever has larger dimension, it applies that dimension to calculate the element’s font-size.
percentage (%)
% sets the font-size relative to the parent element. So, if we set the font-size 50% for child element and if parent element’s font-size is 40px then child element’s font-size will be 50% of 40px = 20px.
font-size length relative unit vh vmax vmin vw
