font 단위

em

em은 상대적인 크기를 지니는 단위로써 요소에 지정하는 글자 크기 단위를 설정할 수 있다.

일반적으로 웹 브라우저에서는 1em = 16px으로 환산되며, 1em은 웹 브라우저에서 글자 크기사이즈를 지정하지 않았을 때 표시되는 글꼴 크기의 기본값이다. 

em단위는 부모 요소에서 지정한 글자크기를 기준으로 배율을 조정하게 된다.

따라서 1.5em을 지정하면 부모요소 글자 크기의 1.5배가 된다.

html, body{font-size:16px;}
//14px이 기준일 때 1em은 16px이므로 12px을 em으로 변환시키면 12/16 = 0.75em
//%로 변화할 시, 12/16*100=75%가 된다.

rem

root em이라는 뜻으로, HTML문서의 root요소인 html요소를 가리키며, 이 요소에 지정된 크기를 기준으로 상대적인 값을 가지게 된다.

em단위는 부모로 부터 글꼴 크기를 상속받지만, rem 단위는 부모가 아닌 시조(root = html)로 부터 폰트 크기를 상속받는다.

따라서 html요소에 기본 글꼴 크기를 지정해 두면 항상 html요소로부터 글꼴 크기를 상속받아 html요소의 글꼴 크기를 변경하는 것 만으로 페이지의 모든 글꼴 크기를 변경할 수 있어 글꼴 크기 변화를 예측할 수 있고 계산하기도 수월하다.