Когда стоит применять em вместо rem?
Вот тут хорошо описано отличие em от rem:
https://learn.javascript.ru/css-units
В двух словах, em наследует от текущего размера родителя, а rem от базового размера шрифта, заданого html.

Недавно довелось дорабатывать верстку, сделанную полностью на rem. Так вот, я по привычке некоторыее размеры писал в пикселях, в частности размеры кнопки у слайдера итд. Идея была в том, чтобы на мониторах 4к хорошо выглядело, в итоге базовый шрифт для 4к мониторов был увеличен до 30. НО! Все размеры что я писал в пикселях пришлось тоже переписать на ремы, потому что кнопки стали пропорционально слишком мелкие

Собственно есть даже плагины для галпа, которые переводят ваши пиксели сразу в ремы
Верстка на rem-ах производится с вычислением от корня документа, т.е. body, html, а em от родителя. Притом если у родителя нет изменения в размере font-size, то поиск изменения будет подниматься вверх вплоть до корня.

Пример тут.

PS: такой подход позволяет на десктопа указать в html, body{ font-size: 20px, а для таблеток и мобильных html, body{ font-size: 16px и верстка будет пересчитана сама.