폰트사이즈 em, rem 단위의 유래는 뭘까?

오늘도 채용 공고에 올라온 여러 서비스를 개발자 도구로 보다가 오랜만에 px가 아닌 rem으로 작성된 서비스가 보였다. TailwindCSS로 작성되었다면 기본적으로 rem 단위를 사용하지만 해당 서비스는 SCSS로 작성되어 있어서 눈에 들어왔던 거 같다. 어쨌든 rem이 root em인건 알고 있는데 막상 em의 유래가 무엇인지는 몰랐다

 

바로 claude에게 물어봤는데 em이 emphasize의 약자라는 것이다. 그럴듯하지만 강조하다라는 의미와 폰트사이즈가 무슨 상관일까?라는 생각이 들어 계속 캐물으니 계속 답변이 달라졌는데 할루시네이션이 확실했다. 그래서 꾸역꾸역 구글에서 em, rem 관련 검색을 이어갔는데 대부분 em, rem의 작동 원리에 대해서만 알려주는 글이 많았다. 혹시나 해서 위키피디아를 봤는데 여기서 해답을 찾을 수 있었다

 

원래 1em이라는 단위는 타이포그라피 역사에서 오랫동안 사용된 단위였다. 금속 활자 시대에는 각 글자가 금속 블록 위에 만들어졌는데 이 블록의 높이가 해당 글꼴의 포인트 크기였고 이것이 1em이 되었다. 즉 16포인트 글꼴에서 1em은 16포인트와 같으며 1em은 기본적으로 "현재 글꼴의 전체 크기"를 의미한다

 

출처 - 위키피디아

 

위와 같은 개념이 디지털로 확장되면서 em, rem 단위는 반응형 디자인에서 매우 유용하게 사용되고 있다. 개인적으로 데스크톱 기준에서는 루트 폰트 사이즈를 16px로 설정하고, 태블릿 혹은 모바일의 경우 루트 폰트 사이즈를 14px로 수정하여 전체적인 UI 사이즈를 일괄적으로 조절하고 있다

 

유튜브의 경우 특이하게 루트 폰트 사이즈를 10px로 설정하고 사이즈 관련 단위를 10진수 형태로 관리하고 있다. 예를 들어 데스크톱에서 루트 폰트 사이즈를 10px로 하고 모바일에서 9px로 줄이면 일괄적으로 10%가 줄어들게 된다. 조금 더 직관적이기는 하지만 실무에서는 디자이너, 개발자 혹은 퍼블리셔 모두와 공유가 되어야 하고 꽤 어색하게 생각하는 사람이 많을 거라 생각한다