CSS / Reference / font-size

font-size는 글자 크기를 정합니다. px는 고정 길이, em은 이 속성에서 부모 글자 크기, rem은 루트 요소의 글자 크기를 기준으로 계산합니다. 상대 단위를 선택하면 사용자 설정과 중첩 구조에 맞춰 크기를 조절하기 쉽습니다.

문법과 주요 값

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

html { font-size: 100%; }
body { font-size: 1rem; }
h2 { font-size: 1.5rem; }

값과 적용 조건은 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도 함께 확인하세요.

중첩 em과 rem의 기준 비교

다음 전체 문서를 css-reference-10544-practice.html로 UTF-8 저장한 뒤 브라우저에서 엽니다. 다른 예제 파일에 중첩해서 붙이지 않고 별도 파일로 시험합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>중첩 em과 rem의 기준 비교</title>
  <style>
    body { margin: 16px; color: #20242b; font: 16px/1.7 sans-serif; }
    main { max-width: 52rem; margin: auto; }
    h1 { font-size: 1.35rem; }
    .samples { display: flex; flex-wrap: wrap; gap: 24px; }
    .samples > * { max-width: 100%; min-width: 0; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
html { font-size:16px; } .parent { font-size:20px; padding:8px; background:#e6f2ff; } .em { font-size:1.5em; } .rem { font-size:1.5rem; }
  </style>
</head>
<body>
<main>
  <h1>중첩 em과 rem의 기준 비교</h1>
<p>em</p><div class="parent"><div class="em">자식<div class="em">손자</div></div></div><p>rem</p><div class="parent"><div class="rem">자식<div class="rem">손자</div></div></div>
</main>
</body>
</html>

Computed에서 em 자식은 30px, 손자는 45px이고 rem은 둘 다 24px인지 확인합니다. html만 20px로 바꾸면 rem 둘은 30px이 됩니다. 부모 20px은 그대로여서 em의 30/45px은 유지됩니다. 루트를 16px로 복구하세요.

문자 크기·줄 높이·서체를 함께 조정하려면 글꼴, 글자 크기, 굵기, 줄 간격 설정하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 line-height입니다.

적용되지 않거나 예상과 다를 때

• 부모와 루트의 font-size를 각각 확인해 em과 rem의 기준을 구분합니다.
• 크기를 키우면 잘리는 UI에서는 글자 크기를 줄이기 전에 고정 높이와 줄바꿈 제한을 확인합니다.