CSS / Reference / font-size
font-size는 글자 크기를 정합니다. px는 고정 길이, em은 이 속성에서 부모 글자 크기, rem은 루트 요소의 글자 크기를 기준으로 계산합니다. 상대 단위를 선택하면 사용자 설정과 중첩 구조에 맞춰 크기를 조절하기 쉽습니다.
문법과 주요 값
html { font-size: 100%; }
body { font-size: 1rem; }
h2 { font-size: 1.5rem; }
| 값 또는 구분 | 동작과 선택 기준 |
|---|---|
px |
CSS 픽셀 단위의 길이; 브라우저 확대는 여전히 적용됨 |
em, % |
font-size에서는 부모의 계산된 글자 크기 기준 |
rem |
루트 html의 글자 크기 기준 |
larger, smaller |
부모 글자 크기에 대한 상대 키워드 |
값의 적용 범위와 문법은 MDN의 font-size 문서에서 확인할 수 있습니다.
실행 예제와 결과 비교
아래 전체 코드를 UTF-8 형식의 font-size-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>font-size 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.samples { font-size: 20px; }
.target { font-size: 1.5em; }
.reference { font-size: 1.5rem; }
</style>
</head>
<body>
<main id="demo">
<h1>font-size 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">부모 20px × 1.5em</p><div class="target">글자 크기 CSS</div></div><div class="b"><p class="label">루트 크기 × 1.5rem</p><div class="reference">글자 크기 CSS</div></div></section>
</main>
</body>
</html>
첫 번째 예문은 부모의 20px를 기준으로 30px가 됩니다. 두 번째 예문은 루트 글자 크기를 기준으로 계산하므로 브라우저 기본 설정에 따라 실제 길이가 달라질 수 있습니다.
중첩된 em의 누적
부모가 이미 커진 상태에서 자식마다 em을 적용하면 크기가 단계마다 다시 곱해집니다. 사이트 전반의 크기 체계를 일정하게 만들려면 rem을, 특정 구성 요소 안에서 비례를 맞추려면 em을 검토하세요. 실제 계산된 px 값은 개발자 도구의 Computed에서 확인할 수 있습니다.
반응형 크기와 확대 확인
글자 크기는 음수로 지정할 수 없습니다. 화면 폭에만 연동한 vw 값은 좁은 화면에서 너무 작아질 수 있으므로 최소·최대 범위를 함께 설계해야 합니다. 사용자 확대나 큰 글자 설정에서 문장이 잘리지 않도록 고정 높이, 줄 높이와 overflow도 함께 확인하세요.
적용되지 않거나 예상과 다를 때
- 부모와 루트의 font-size를 각각 확인해 em과 rem의 기준을 구분합니다.
- 크기를 키우면 잘리는 UI에서는 글자 크기를 줄이기 전에 고정 높이와 줄바꿈 제한을 확인합니다.
관련 설정을 함께 조정할 때는 글자 크기와 함께 조정할 line-height을 참고하세요.
content의 문법과 주요 값, 실제 적용 조건을 설명합니다. 첫 예문 앞뒤에 문자열이 생성되고 data-label 값이 뒤에 표시됩니다.
quotes의 문법과 주요 값, 실제 적용 조건을 설명합니다. 바깥 인용과 안쪽 인용은 서로 다른 부호 쌍을 사용합니다.
box-shadow의 문법과 주요 값, 실제 적용 조건을 설명합니다. 첫 박스는 오른쪽 아래로 흐린 그림자가 생기고 두 번째 박스는 안쪽에 색 띠가 생깁니다.
text-align의 문법과 주요 값, 실제 적용 조건을 설명합니다. 가운데 정렬은 각 줄의 내용을 중앙에 놓고 양쪽 정렬은 줄을 맞추기 위해 간격을 조절합니다.
text-shadow의 문법과 주요 값, 실제 적용 조건을 설명합니다. 첫 예문의 글자 오른쪽 아래에 흐린 그림자가 보이고 두 번째 예문에는 없습니다.
CSS / Reference / background-clip
background-clip의 문법과 주요 값, 실제 적용 조건을 설명합니다. 점선 테두리의 틈과 안쪽 여백을 보세요.
white-space의 문법과 주요 값, 실제 적용 조건을 설명합니다. pre-wrap에서는 연속 공백과 원문의 줄바꿈이 남고, normal에서는 같은 텍스트가 일반적인 문장처럼 합쳐집니다.
CSS / Reference / background-position
background-position의 문법과 주요 값, 실제 적용 조건을 설명합니다. 첫 도형은 기준 영역 중앙에 놓이고 두 번째 도형은 오른쪽과 아래 가장자리에서 지정한 거리만큼 떨어집니다.
opacity의 문법과 주요 값, 실제 적용 조건을 설명합니다. 첫 박스에서는 흰 글자도 함께 흐려지고 두 번째 박스에서는 배경만 뒤의 색과 섞입니다.
CSS / Reference / background-origin
background-origin의 문법과 주요 값, 실제 적용 조건을 설명합니다. 왼쪽 위에 놓인 도형의 시작 위치를 비교하세요.