The 62.5% Font Size Trick 을 번역 및 정리, 요약한 내용입니다. 본문을 보는 것을 더 권장합니다😆
rem을 사용하는데 익숙해지면, 2의 거듭제곱을 모든 브라우저의 루트 글꼴 크기인 16의 분수로 표현하는 것이 쉽다는 것을 알게 될 것입니다. 루크 글꼴 크기가 62.5%인 트릭을 사용하면 쉽게 적용할 수 있습니다.
루트 Font Size를 62.5%로 설정
많은 디자인과 코드 베이스는 간격과 글꼴 크기 scales(일반적으로 편의성과 even divisibility을 위해)에 2의 배수를 사용합니다. 16은 2의 배수이기 때문에 짝수 픽셀 값을 rems로 변환하는 것은 매우 간단합니다.
- 8px은 0.5rem, 4px는 0.25rem,1px(0.125rem) 등
조금 까다로워지는 부분은 더 큰 숫자나 홀수 값을 표현하기 위해 rem을 사용해야 하는 경우입니다.
- 예를 들어 rem의 5px는 0.3125rem입니다.
우리는 10진법 숫자 체계에 익숙하기 때문에 10 단위로 생각하는 데 더 능숙합니다. 따라서 1rem이 10px와 같으면 픽셀을 10으로 나누어서 쉽게 rem으로 변환할 수 있습니다.
- 12px는 1.2rem으로, 24px는 2.4rem으로 표현되는 식입니다. 따라서 더 이상 16으로 나눌 필요가 없습니다.
그러나 브라우저의 루트 글꼴 크기는 10px가 아니라 16px입니다. 그렇다면 어떻게 루트 글꼴 크기를 10px로 만들 수 있을까요?
이를 수행할 수 있는 한 가지 방법은 루트 글꼴 크기를 픽셀 단위로 설정하는 것입니다
방법은 백분율을 사용하는 것입니다.(em도 사용할 수 있음). 10px는 16px의 62.5%이므로 루트 글꼴 크기를 다음 백분율로 설정할 수 있습니다.
html {
/* 62.5% of 16px browser font size is 10px */
font-size: 62.5%;
}
.some-element {
/* 1.2 * 10px = 12px */
font-size: 1.2rem;
}여기까지만 하면 텍스트가 10px로 설정되어 읽을 수 없을 정도로 작을 것입니다. 본문의 글꼴 크기를 1.6rem으로 설정하면 페이지에서 보이는 모든 텍스트의 유효 글꼴 크기가 16px로 다시 조정됩니다.
html {
/* 10px */
font-size: 62.5%;
}
body {
/* 16px */
font-size: 1.6rem;
}웹 접근성에 대해?
62.5% 글꼴 크기 트릭에 반대하는 대부분의 주장은 접근성을 해치기 때문에 루트 글꼴 크기를 변경해서는 안된다고 말합니다. 하지만 본문 글꼴 크기를 다시 1.6rem으로 조정해 16px로 만들어줬기 때문에 문제가 되지 않습니다!
- 본문에 다양한 수학적 예시를 들며 설명되어있다. 결론은 문제없음.
Summary
rem은 반응형 글꼴 크기 조정에 적합하지만 홀수를 rem으로 변환하거나 매우 큰 숫자로 작업해야 하는 경우 계산이 불편할 수 있습니다. 이 경우 rem을 사용하는 동안 친숙한 10진수에서 생각할 수 있어 설명된 62.5% 글꼴 크기 트릭을 사용하는 것이 도움이 될 수 있습니다.
