The font size is 20 pixels (font family specified as Arial). The default font size for a laptop is 16pixels (px).
The font size is 2.9% of the viewport width. Compare its size with the 20px font above when you shrink the viewport to the width of the blue area above. Line height is also 2.9% of the viewport width. Shrinking or expanding the viewport will change the font size and the line height although not the relative line height.
The font size in this paragraph is 1.25em with 1em being the default value of 16px. Line height is 1.5 em, meaning one and one-half times the default value. Shrinking or expanding the viewport will not change the font size.
The font size in this paragraph is 120% with 100% being the default value of 16px. Line height is 100%, which is not adequate for the font size as can be seen. A value for the line height equal to the font size will make the text look normal. If the font size for an element is specified as percentage and if the element is contained in another element, i.e., a parent element, the font size in percentage for the contained element will be relative to the font size of the parent element.
The font size in this paragraph is 2rem, meaning twice the device's default font size, 16 px for a laptop. The rem is a convenient specification for the font size; however, as with em, it can play tricks if one isn't careful.
This font size for this paragraph is set to 1em, but the font is as large as in the previous paragraph. This is what one would expect because this paragraph is a child element of the element for which the base font 2rem was defined.
Note that the font size in this paragraph is specified as 1rem but does not reset to the default value for the device. The font is still as large as that set to 2rem because it is a child element and uses the specification for the parent element for the font's base value.
The font size can also be specified as small, medium, large, extra small, extra large, etc. Medium is the default size, 16px.