[CSS] font size 속성 비교(px, em, rem, pt, %, vw, vh, 속성 값)

 * 아래 내용에서 테스트하여 작성한 px 값들은 크롬에서 테스트하여 작성했다.

 * 크롬에는 폰트 크기에 최소 크기가 정해져있다. 참고 : font size 최소 크기

 

폰트 크기의 단위 별 차이를 알아보기 전에 폰트 크기의 기본 값을 알아둘 필요가 있는데, 보통 브라우저의 기본 값은 16px이며, 크롬의 기본 값 또한 16px이다.

 

기본 값을 확인하는 방법으로는 medium, 1rem, 1em이 있는데 아래 내용을 참고하여 구해야 한다.

 * 1em의 경우 부모 요소의 폰트 크기에 영향을 받는다.

 * 1rem의 경우에는 HTML 태그의 폰트 크기에 영향을 받는다.

 

px

폰트의 크기를 나타낼 때 가장 기본적인 단위이며, font-size 속성에 어떤 단위를 사용하던 이렇게 저렇게 계산된 후 마지막에 브라우저가 사용하게 되는 것은 px이다.

 

속성 값

font-size 속성에 입력할 수 있는 키워드다.

 

* 절댓값 : 폰트의 크기가 정해져서 변하지 않는 속성

xx-small : 10px

x-small : 10px

small : 13px

medium : 16px (기본 값)

large : 18px

x-large : 24px

xx-large : 32px

 

* 상대 값 : 부모 요소의 폰트의 크기에 따라서 변하는 속성

larger : 부모 + 부모 * 1/5

ex) 부모 요소의 폰트 크기가 20px 일 때 20px + 4px 하여 24px이 된다.

 

smaller : 부모 - 부모 * 1/6

ex) 부모 요소의 폰트 크기가 30px 일 때 30px - 5px 하여 25px이 된다.

 

em

상위 요소의 폰트 크기를 비율로 계산한다. 즉 1em은 부모 요소 폰트 크기의 100%이며 1.5em은 150%이다.

<div style="font-size:1.5em">
	24px이 된다.
</div>
<div style="font-size:1em">
	16px이 된다.
</div>
<div style="font-size:0.5em">
	10px이 된다.
</div>

<div style="font-size:20px">
	<div style="font-size:1.5em">
		30px이 된다.
	</div>
	<div style="font-size:1em">
		20px이 된다.
	</div>
	<div style="font-size:0.5em">
		10px이 된다.
	</div>
</div>

 

rem

상위 요소에 영향을 받지 않고 HTML 태그의 폰트 크기를 비율로 계산한다. 즉 HTML 태그의 폰트 크기를 20px로 변경하면 1rem은 20px이 된다. 아래 예시는 HTML 태그의 폰트 크기는 건들지 않은 상태를 가정하여 작성했다.

<div style="font-size:1.5rem">
	24px이 된다.
</div>
<div style="font-size:1rem">
	16px이 된다.
</div>
<div style="font-size:0.5rem">
	10px이 된다.
</div>

<div style="font-size:20px">
	<div style="font-size:1.5rem">
		24px이 된다.
	</div>
	<div style="font-size:1rem">
		16px이 된다.
	</div>
	<div style="font-size:0.5rem">
		10px이 된다.
	</div>
</div>

 

pt

기본적으로 pt는 인쇄할 때 사용되는 단위라고 한다. 이 값을 px과 비교하면 3pt가 4px과 같다.

변환될 때는 rem과 같이 상위 요소에 영향을 받지 않는다.

<div style="font-size:10pt">
	13.3333px이 된다.
</div>
<div style="font-size:20pt">
	26.6667px이 된다.
</div>
<div style="font-size:30pt">
	40px이 된다.
</div>

<div style="font-size:20px">
	<div style="font-size:10pt">
		13.3333px이 된다.
	</div>
	<div style="font-size:20pt">
		26.6667px이 된다.
	</div>
	<div style="font-size:30pt">
		40px이 된다.
	</div>
</div>

 

%

상위 요소의 폰트 크기를 비율로 계산한다. 즉 em과 같다는 뜻으로 1em 이 100% 와 같다.

<div style="font-size:150%">
	24px이 된다.
</div>
<div style="font-size:100%">
	16px이 된다.
</div>
<div style="font-size:50%">
	10px이 된다.
</div>

<div style="font-size:20px">
	<div style="font-size:150%">
		30px이 된다.
	</div>
	<div style="font-size:100%">
		20px이 된다.
	</div>
	<div style="font-size:50%">
		10px이 된다.
	</div>
</div>

 

vw, vh

브라우저에서 현재 보이고 있는 창의 크기에 따라 값이 변한다. 즉 브라우저의 창 크기를 변경하면 vw, vh는 영향을 받게 된다. vw는 너비에 영향을 받고 vh는 높이에 영향을 받는다. 

만약 브라우저의 너비가 1000px이라면 1vw는 10px, 100vw는 1000px이 되며 vh 또한 브라우저의 높이에 영향을 받는 것을 뺀다면 동일하다.

vw나 vh를 변경하고자 할 때 단순하게 width나 height을 변경한다고 vw와 vh에 영향을 줄 순 없고 translate로 영향을 줄 수는 있다.