본문 바로가기
Front-end/HTML

폰트 사이즈 단위 (em, ex, pt, rem, px)와 굵기

by mooyou 2021. 8. 8.
728x90
300x250

- 폰트사이즈

em 부모요소에서 지정한 폰트의 대문자 M의 너비를 1em으로 놓고 상대적으로 계산하여 만약 지정크기가 없으면 16px이 기본 1em으로 지정이된다.
ex x-height, 해당 글꼴의 소문자 x 높이를 기준으로
px 모니터에 따라 상대적 크기가 된다.
pt pt는 포인트의 약자로 1포인트는 0.72인치로 일반 문서에서 많이 사용하는 사이즈이다.
%  기본글꼴 크기에 대해 상대적인 값을 가진다.
rem root + em의 뜻으로 최상위 root 요소의 폰트 사이즈를 1rem으로 놓고 사용한다. 

 

px = pt/0.75

pt = px*0.75

em = pt/12

% = pt*100 / 12

 

공식에 의해서

9pt는 12px

10pt는 13.33333 px

12pt는 16px

이런식으로 된다.

 

폰트 사이즈 em, rem 구하는 방법 아래 포스팅에서 확인

https://moo-you.tistory.com/235

 

폰트 사이즈 em, rem 구하는 방법

em 폰트 크기를 설정하는 값 중 em은 동적으로 변경되는 사이즈를 가집니다. em은 부모 엘리먼트 크기와 같고 만약 폰트 사이즈를 따로 설정하지 않았다면 기본 폰트로 지정되는데 기본 폰트는 보

moo-you.tistory.com

 

 

가변글꼴과 폰트사이즈 계산방법

https://moo-you.tistory.com/19

 

가변글꼴과 폰트 사이즈 em 간편하게 변경하기

폰트 사이즈 - em : 부모 요소에서 지정한 폰트의 대문자M 너비를 기준으로 크기를 조절한다. 대문자 M의 너비를 1em으로 놓고 상대적으로 계산하는데 만약에 지정크기가 없다면 16px이 1em이 된다.

moo-you.tistory.com

 

 

 

-폰트 굵기

100~900사이의 tncldlau

400은 normal, 700은 bold가 된다.

728x90
반응형

'Front-end > HTML' 카테고리의 다른 글

font-face 웹폰트 적용 eot, woff, otf/ttf  (0) 2021.08.11
폴리필(pollyfill) 이란?  (0) 2021.08.09
테이블 스크롤 만들기  (0) 2021.07.30
회원가입 기본 입력폼  (0) 2021.07.27
Tooltip 툴팁 css 디자인 바꾸기  (0) 2021.07.20

댓글