[UIUX] 폰트 사이즈 가이드

AOS Typo 가이드 (https://material.io/resources)

IOS Typo 가이드 (https://developer.apple.com/design/resources/)

AOS(왼) / IOS(오)


Apple design system

• 콜아웃은 Body보다 작은 위계로 토스트나 카드같은 데
• 풋노트는 첨언 텍스트 정도로 중요도가 낮을 때

타이틀 : 18~32px
본문 : 16~18px
캡션 : 10~12px
*10이하의 폰트는 사용하지 않는 것을 권장

사이즈 단위별 효율적으로 사용하기
px : 폰트 크기를 고정하고 싶을 때
em : 앞서 적용된 폰트의 배수 (조상 > 부모 > 자식)
rem : 최상위 폰트의 배수
vw, vh : 반응형에 적합 1000px(100vw) * 1/100 = 10px(1vw)**

font-size: calc(0.26vw + 11.08px);
// ---> 360px view : 12px / 1920px view : 16px
// https://font-size-generator.vercel.app/

vmin : vw,vh 중 더 작은 거
vmax : vw,vh 중 더 큰 거**

*vw, vh, vmin, vmax 지원 안되는 브라우저 참고(아래)