القاعدة بسيطة:
rem= القيمة × حجم خط العنصر الجذريhtml.em= القيمة × حجم خط العنصر الأب.
مثال محلول
إذا كان حجم خط html يساوي 20px، والعنصر h1 داخله مباشرة:
html { font-size: 20px; }
h1 { font-size: 2rem; } /* 2 × 20 = 40px */
h1 { font-size: 1.5em; } /* 1.5 × 20 = 30px */هنا الأب هو html نفسه، لذلك تُحسب em من 20px أيضًا. لكن لو كان h1 داخل عنصر حجم خطه 24px، لأصبحت 1.5em تساوي 36px، بينما تبقى 2rem على 40px.