You are going to learn a few CSS units for customizing the font-size of text when building web pages.
Before proceeding, note that there are two types of unit lengths:absoluteandrelative.
Absolute length units are not recommended for use on screen, because screen sizes vary so much.
However, they can be used if the output medium is known, such as for a printed layout.
Relative length units scale better between different rendering medium.
One pixel (1px) is defined as 1/96th of an inch in print media.
What is considered visible is dependent on the unit.
That’s where machine pixel ratio comes in.
It helps web content (not just text) look the same size across devices.
It uses the current font-size of the parent element as its base.
Let’s say you have a parent div that has a font-size of 16px.
However, if you give another paragraph the font-size of 2em that will translate to 32px.
It’s not advisable to use em, especially within complex structured pages.
Px vs. Em vs. Rem: Which Unit Is the Best?
Em is not recommended due to the possibility of having a complex hierarchy of nested elements.
This explains why you should be using REM when working with text content on your web pages.
REM wins the race.
