퍼블리싱 폰트사이즈 rem 단위 깨달음

lize·2023년 3월 23일

html, body {
    font-family: 'Noto Sans KR', 'Noto_Sans_KR', 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #222;
}

지금까지 이런식으로 root에 폰트 사이즈를 16px로 고정해놓고 나머지 엘리먼트들의 폰트 사이즈를 rem 단위를 사용했었는데, 이러면 브라우저 시스템에서 폰트사이즈를 크게 하거나 작게 설정했을때 폰트가 고정된다는 사실을 이제 알았다.

물론 지금까지 rem단위를 사용하면서 클라이언트가 전체적으로 폰트 사이즈를 키워달라 또는 줄여달라고 했을 때 root의 폰트사이즈인 16px만 수정하면 되니까 편해서 이걸로 됐다고 생각했었다.

rem 단위를 쓰는 근본적인 이유를 잊고 있었다.

제플린에서 크기나 폰트사이즈를 px에서 rem으로 변환해서 볼 수 있는 방법도 알았으니 더 편하게 rem 단위를 쓸 수 있겠다.
제플린에서 rem으로 볼 수 있다는 걸 알기 전까지는 이 사이트에서 변환해 왔었다.

이 사이트도 편했지만 제플린에서 바로 rem으로 알 수 있다면 더 효율적이다! 오예!

웹퍼블리셔