font-size 속성

font-size 속성은 텍스트의 글꼴 크기를 설정합니다. 속성값으로는 크기 단위 (일반적으로 px, em 또는 rem) 또는 특별한 키워드 (매우 드물게 사용됨)를 사용할 수 있습니다.

구문

선택자 {
	font-size: 값;
}

값	설명
`xx-small`	가장 가장 작음. 예: Lorem ipsum dolor sit amet.
`x-small`	가장 작음. 예: Lorem ipsum dolor sit amet.
`small`	작음. 예: Lorem ipsum dolor sit amet.
`medium`	중간. 예: Lorem ipsum dolor sit amet.
`large`	큼. 예: Lorem ipsum dolor sit amet.
`x-large`	매우 큼. 예: Lorem ipsum dolor sit amet.
`xx-large`	가장 큼. 예: Lorem ipsum dolor sit amet.
`larger`	부모 요소의 글꼴보다 약간 더 큽니다.
`smaller`	부모 요소의 글꼴보다 약간 더 작습니다.

기본값: medium.

단락의 글꼴 크기를 20px로 설정해 봅시다:

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-size: 20px;
}

이 예제에서 단락의 크기는 16px로, 그 안의 span 요소의 크기는 150%로 설정됩니다. 이 경우 span 요소의 글꼴 크기는 자신의 부모(단락)의 150%가 되므로, 실제 크기는 16px * 150% = 24px가 됩니다:

<p>
	Lorem <span>ipsum dolor</span> sit amet.
</p>

p {
	font-size: 16px;
}
span {
	font-size: 150%;
}

이 예제에서 단락의 크기는 16px로, 그 안의 span 요소의 크기는 larger로 설정됩니다. 이 경우 span 요소의 글꼴 크기는 부모 요소(단락)의 크기보다 커집니다:

<p>
	Lorem <span>ipsum dolor</span> sit amet.
</p>

p {
	font-size: 16px;
}
span {
	font-size: larger;
}

서로 다른 font-family를 가진 글꼴들은 동일한 font-size라도 시각적으로 완전히 다른 크기로 보일 수 있습니다(이 문제를 해결하려면 font-size-adjust 속성을 참조하세요).

아래 예제에서 두 단락 모두 font-size가 16px로 설정되었지만, font-family는 서로 다릅니다:

<p id="elem1">
	Lorem ipsum dolor sit amet.
</p>
<p id="elem2">
	Lorem ipsum dolor sit amet.
</p>

#elem1 {
	font-size: 16px;
	font-family: Arial;
}
#elem2 {
	font-size: 16px;
	font-family: "Times New Roman";
}