Вы задаете
:root значение размера шрифта (кстати познакомьтесь с
вот этой идеей - сам пользуюсь постоянно, замечательная вещь). По умолчанию обычно размер шрифта для :root в браузерах равен 16px. Задавать для :root размер шрифта в rem/em бессмысленно - это как масло масляное.
1rem (1 root em) будет равен тому размеру шрифта, который задан для :root и будет одинаковым для всех элементов на странице. Если вы вложите кучу элементов с font-size: 1.1rem друг в друга, то все они будут иметь один и тот же размер шрифта.
1em у каждого элемента будет свой, равный размеру шрифта родительского элемента. Если вы вложите кучу элементов с font-size: 1.1em друг в друга, то каждый следующий будет иметь размер шрифта больше, чем предыдущий.
---
Сам я стараюсь все, что можно, делать в rem (включая все размеры на странице, отступы, border-radius, брейкпоинты и.т.д.) в сочетании с адаптивной типографикой из вышеприведенной статьи, а единицу em использую очень редко. А размеры в пикселях - вообще редкость, только если 1-2px в местах, где округление может сломаться. Такой подход не является общепринятым, но может быть очень удобным, я его описывал в
статье на хабре. Демка там получилась так себе, но с тех пор идея обкаталась и успешно применяется.
