매번 헷갈리는 폰트 단위 rem, em 제대로 이해하기
배수 디자인을 위한 rem, em 사용하기
들어가며
디자인 시스템을 만들면서 효율적으로 font, spacing 등을 관리하고 유저에게는 다양한 해상도에서 일관된 UI를 제공하기 위해 배수 디자인을 적용해보기로 했다.
원래 폰트 크기를 heading1은 40px, heading 2는 32px과 같이 지정하여 사용하고 있었는데, 만약 rem과 같은 상대 단위를 사용한다면 기준이 되는 base 폰트 사이즈 하나만을 바꾸어도 자동적으로 나머지 heading, subtitle 등과 같은 폰트 값이 배수에 따라 자동 변경되기 때문이다.
하나의 기준 사이즈를 설정해 두면 폰트 크기가 변경될 때 기준 사이즈 하나만 변경하여도 body, subtitle 등의 폰트 값이 자동으로 재설정되니 디자이너도, 개발자도 모두 효율적이라 생각되었다.
사실상 rem, em과 같은 상대 단위를 사용하면 디자인을 할 때 유연성이 떨어질 수 있으나 한정된 리소스 안에 여러 서비스를 제공해야 하고 외부 협력사도 컨트롤해야 하는 상황에서 상대 단위를 사용해 보는 것이 좋을 것이라 판단되었다.
이 과정에서 em과 rem에 대해 정확히 알고 가야겠다 판단되어 글을 쓰며 나 또한 정리해보고자 한다.
사실 rem과 em 단위의 차이는 이전 퍼블리싱을 배울 때 들었던 터라 알고는 있었으나 막상 다른 팀원이 질문했을 때 명확하게 답변을 하지 못했다.
배수로 계산하는 것은 동일한데 도대체 두 개의 차이가 뭐란 말인가?
이제부터 하나씩 제대로 알아보도록 하자.
1. 상대 단위란?
상대 단위란 고정되지 않고 어떤 기준에 따라 유동적으로 바꿀 수 있는 단위를 말한다.
em, rem, %등이 대표적인 상대 단위이다.
반면 이와 반대로 절대 단위는 어떤 상황에서도 고정된 값을 가지는 단위인데 px, cm 등이 그러하다.
em과 rem css 상에서 font-size의 속성 값에 비례해서 결정된다.
em은 e(element) 해당 요소의 글꼴 크기를 1em으로 사용한다.
rem은 r(root) 루트 요소 html의 글꼴 크기를 1 rem으로 사용한다.
예를 들어 font-size가 16px 인 경우
- 0.5em = 16px x 0.5 = 8px
- 1em = 16px x 1 = 16px
- 2em = 16px x 2 = 32px이다.
font-size를 18px로 늘 릴 경우
- 0.5em = 18px x 0.5 = 9px
- 1em = 18px x 1 = 18px
- 2em = 18px 2 = 36px로 증가한다.
rem도 동일한 방식으로 계산방식으로 산정된다.
font-size가 16px 인 경우
- 0.5 rem = 16px x 0.5 = 8px
- 1 rem = 16px x 1 = 16px
- 2 rem = 16px x 2 = 32px이다.
하지만 em과 rem에서 차이가 발생하는 것은 이 1 rem의 기준을 어느 것으로 정하느냐에 따라 달려있다.
2. em
em은 요소의 글꼴 크기를 1em으로 갖는다.
만약 해당 요소의 폰트 크기가 없으면 부모 요소의 글꼴 크기를 1em으로 갖는다
em 예시예를 들어 위와 같이 코드가 있다고 가정해보자.
title과 subtitle이 있는 요소에서 font-size를 규정하지 않았기 때문에 title과 subtitle은 윗 상단의 container의 font-size를 1em으로 갖게 된다.
그래서 title의 글꼴 크기는 14px*2= 28px, subtitle의 글꼴 크기는 14px*1.5=21px이 된다.
이제 여기서부터 rem과의 차이가 발생하게 된다.
코드를 적다 보면 중첩이라는 게 발생할 수밖에 없다. 중첩이란 여러 요소들이 서로를 포함하는 것을 말하는데 html을 작성할 때 당연히 일어날 수밖에 없다.
Q. 이 경우 leading의 글꼴 크기는 몇이 될까?
.
.
.
.
leading은 container 안에 subtitle 안에 속해있기 때문에
14 * 1.5 * 0.5 = 10.5px이 된다.
그럼 더 나아가서
Q. leading의 width와 height값은 어떻게 될까?
.
.
.
em은 요소의 font-size를 기준으로 하므로 leading의 글꼴 크기가 14 * 1.5 * 0.5 = 10.5px
10.5px이 width와 height의 1em이 된다.
따라서 width=10.5*0.2= 2.1px
height=10.5*0.3=3.15px 이 된다.
2. rem
em이 해당 단위가 사용되고 있는 요소의 font-size가 기준이 되었다면 rem은 r=root 최상위 요소를 font-size 1 rem으로 여기고 변화한다.
HTML에서 최상위 값은 <html>으로 rem의 경우는 html요소의 font-size를 기준으로 한다.
따라서 중첩이 일어나더라도 em과 달리 기준이 되는 font-size가 변하지 않는다.
html의 폰트 사이즈가 10px이라면 해당 html문서 안에 있는 모든 요소의 1 rem=10px이 된다.
위 em에서 예시를 들었던 케이스를 rem으로 바꾸어 생각해보면
rem에서 leading의 글꼴 크기는 14 * 0.5 = 7px이 되고(em의 경우 14 * 1.5 * 0.5 = 10.5px)
width=14*0.2 = 2.8px(em의 경우 width=10.5*0.2= 2.1px)
height=14*0.3 = 4.2px(em의 경우 height=10.5*0.3=3.15px) 이 된다.
마치며
그렇다면 언제 em을 쓰고 언제 rem을 사용하면 좋을까?
실제로 많은 CSS 가이드들이 em을 사용해야 하는 타당한 이유가 없다면 rem을 우선적으로 사용하기를 권고하고 있다. 왜냐면 em을 사용하게 될 때 영향을 받게 되는 변수 px들이 많아지기 때문에 추후 관리에 있어 어려움이 많기 때문이다.
만약 rem과 em을 혼용하여 사용하게 된다면 페이지 어디에 사용해도 사이즈가 고정되어야 하는 곳에 rem, 부모 요소에 따라 유동적으로 변화해야 하는 곳에 em을 사용하는 것이 좋다. 대부분 font-size는 rem을 padding이나 margin 등 화면에 따라 유연하게 변하는 크기는 em을 많이 사용한다.
마지막으로 자동으로 수치를 변환해주는 사이트를 소개하고 글을 마친다.
참고 글 :
https://brunch.co.kr/@jihoonleeh9l6/32
https://www.daleseo.com/css-em-rem/
