Font 사이즈 비율 계산 정리 (pt, px, em,% 변환)

Typographic 잡을 때나 Web 디자인, Front 개발시에 깔끔하게 정리된 정보가 필요해서 매번 찾던 자료를 이 참에 정리해 둡니다.

요즘엔 프로토타입 툴들이 제공을 해주긴 합니다만, 디자인 시스템 컴포넌트 정의할 때는 한방에 정리된 자료가 보기도 편하겠죠.

font-size 계산기와 비교 표를 함께 공유 드립니다.

---

•viewport : 96 dpi
•defulat font-size : 16px
•참고 : 편집기가 폰트사이즈가 고정이 되어있네요. 샘플 텍스트 사이즈는 참고만 하십시오~

Font-size 비율표

 

 

 

● 출처 : https://websemantics.uk/

---

Font-size 계산기 이용 방법

•출처 : https://websemantics.uk/tools/font-size-conversion-pixel-point-em-rem-percent/

•아래 표시한 Convert 항목에 폰트를 입력하면, Result 항목에 원하는 스타일로 변환된 폰트 사이즈가 나옵니다.