반응형 폰트 사이즈를 위한 공식
(jameshfisher.com)- 뉴욕타임즈, Medium, Substack 등 많은 웹사이트는 브레이크포인트(768px 같은)를 두어서 그 기준으로 폰트 크기를 변경함 (1.125 rem 과 1.25rem)
- CSS의 calc를 이용하면 이와 비슷한 수치를 작성 가능
calc(1.0625rem + 0.2604vw) - 이걸 반올림 하면
1rem + 0.25vw로 표시 가능. 그래서 난 이제 대부분의 웹사이트에 아래 CSS를 사용함
:root {
font-size: calc(1rem + 0.25vw);
}
PC에서 디자인 시안과 동일하게 구현하려면, 스크롤바 너비를 제외하는 css variable도 식에 포함해야 되지 않을까 싶습니다. vw 단위는 스크롤바 너비까지 포함한 너비 기준으로 한다고 알고 있어요.
통 이미지처럼 주변 요소의 여백까지 동일한 비율로 증감해야 될 경우, 아래 사이트의 폰트 설정 방식도 참고하면 좋을듯 하네요. 갤럭시 폴드(320px)이나 고해상도 모니터의 경우 브레이크 포인트로 적절하게 제한 걸어도 괜찮을듯 합니다.
https://amerimnos.github.io/coding-playground/reponsive-css-trick-vw/
이게 유용한 근사치이긴 한데 실제 Fluid Typography 에 쓰이는 브레이크포인트를 온전히 대체하긴 어렵습니다.
보통 clamp(min_rem, calc_relative_vw, max_rem)가 브레이크포인트별로 컨텐츠의 시인성과 컨테이너 형태에 따라 달리 적용되는데, 단일 식을 써서 대응하면 일반적이지 않은 폼팩터를 대응하기가 어려워져요.
예를들면 안드로이드이 팝업 윈도우라던가, 21:9 모니터, HMD 같은 환경들