em

emは親要素のfont-sizeを基準にする

<p class="p-em">
 これは2em(64px)です
 <span class="span-em">これは0.5em(32px)です</span>
</p>

html {
 font-size: 32px;
}
/** em 指定 **/
.p-em {
 font-size: 2em; /* -> 64px; */
}
.span-em {
 font-size: 0.5em; /* -> 32px; */
}

rem

rem(root em)はルート(一番上の親(html))要素のfont-sizeを基準にする

<p class="p-rem">
 これは2rem(64px)です
 <span class="span-rem">これは0.5rem(16px)です</span>
</p>

html {
 font-size: 32px;
}

/** rem 指定 **/
.p-rem {
 font-size: 2rem; /* -> 64px */
}
.span-rem {
 font-size: 0.5rem; /* -> 16px */
}