EM & REM
EM
1em is equal to the font-size value of the parent element.
The default font size for the HTML document in most browsers is 16px.
body {
font-size: 1em; // Equals 16px
}
h1 {
font-size: 2em; // Equals 32px
}
Use em when you want to size text relative to parent element.
REM
It stands for “root em”. 1rem is equal to default font size of the root element <html>, which is 16px.
The font size of the following h1 is now about 5 times in size relative to the default font size of the root element <html>.
h1 {
font-size: 5.625rem;
}
Use rem when you want to size text relative to the root size.
Heading Size
Scale your heading elements relative to your body text using the following excellent online tool:
Body Text Size
A good reference for body text font-size is anywhere between 16 and 24 pixels.
body {
font-size: 1.25em; /* Equals to 20px; */
}
p {
font-size: 1em; /* Also equals to 20px; */
}