가변글꼴과 폰트 사이즈 em 간편하게 변경하기

폰트 사이즈

- em : 부모 요소에서 지정한 폰트의 대문자M 너비를 기준으로 크기를 조절한다. 대문자 M의 너비를 1em으로 놓고 상대적으로 계산하는데 만약에 지정크기가 없다면 16px이 1em이 된다. font: 100% = 16px

- rem : em 요소는 부모요소에 따라 사이즈계 계속 변경되기 때문에 계산이 복잡해 지는데 이런 단점을 극복하기 위해 만들어진 단위가 rem 이다 여기서 r은 루트를 뜻하며 맨 처음에 설정한 기본크기에 따라 적용되기 때문에 중간에 값이 변경되지 않고 계산하기도 편하디.

그러나 em으로 사용했을때는 확대시에 같은 비율로 늘어나고 줄어들지만 rem 단위는 결국 루트에 따라 고정된 값이라서 확대축소시에 비율이 깨진다는 얘기가 있다.

- ex : x-height, 소문자 x의 높이를 기준으로 크기를 조절한다.

- px: 모니터에 따른 상대적인 크기가 적용된다.

- pt: 일반 문소에 많이 사용하는 단위이다.

가변글꼴

텍스트 크기를 픽셀 단위로 지정하면 사이즈가 고정돼서 디바이스에 따라서 모바일 같이 작은 기기로 볼경우에는 글씨가 작게 표시된다.

그래서 유동적으로 바꿔줘야 하는데 이런 글꼴을 가변글꼴이라고 합니다.

가변 글꼴은 em과 rem을 주로 많이 씁니다.

반응형 작업을 할때는 비율을 고려해서 픽셀보다는 em을 써주는 것이 좋다

원하는 px 값 / 부모 픽셀 값 = em 값의 공식으로 계산하는데

간단한 계산이기는 하지만 이걸 일일이 엑셀로 계산했었는데

http://pxtoem.com/

위 사이트에가면 px을 em으로 em을 픽셀로 편리하게 변경가능하다.

제일 왼쪽에 body 폰트 사이즈를 설정해주면 가운데에 알아서 자동 계산해 준다.

픽셀 em 퍼센트 포인트 까지

제일 오른쪽에서는 기본 설정값에 원하는 px값을 넣으면 em으로 자동 계산해준다.

em도 마찬가지로 px로 계산해준다.