가변 폰트 심화 — 부모 font-size 기준점 정하기 완전 정리

 

 

Web Development · Fluid Typography

가변 폰트 심화 — 부모 font-size 기준점 정하기

wrapper에 font-size:12px 박는 이유 · em 누적 함정 · rem과의 차이

시작 오늘 분석할 코드

fluid-font1과 거의 같은 구조지만, 한 가지 결정적인 차이가 있다 — wrapper에 font-size:12px를 박아둔 것. 이렇게 기준점(base font-size)을 명확히 정하면, 자식의 모든 em 단위가 12px의 배수로 계산된다. 기본값(보통 16px)에 의존하지 않고 디자이너가 의도한 크기로 통제할 수 있다.

#wrapper { width:96%; margin:0 auto; font-size:12px; /* ← 기준점! 자식의 1em = 12px */ } .header-text { font-size:2em; } /* = 24px */ .fluid-text { font-size:1.5em; } /* = 18px */

<header class="header-text"> <p> 가변 그리드 레이아웃 </p> <!-- 2em (24px) --> <p class="fluid-text"> 가변 폰트 </p> <!-- 1.5em × 2em = 3em? 잠깐 --> </header>

실제 출력 미리보기

가변 그리드 레이아웃

가변 폰트 (1.5em)

바깥 박스 font-size를 바꾸면 두 글자 모두 비례해서 같이 변함

용어 용어 정리

base font-size기준 글자 크기 — em의 출발점

상속font-size는 자식이 부모 값을 물려받음

em 누적중첩 시 곱해짐 (1.5em 안에 1.2em → 1.8em)

remroot(html)의 font-size 기준 — 누적 없음

html 기본 16px대부분 브라우저 기본값

12px 기준이번 코드의 wrapper 기준점

2em12px×2 = 24px

1.5em2em 안에서는 24×1.5=36px (누적)

---

1 font-size 상속 — 자식이 부모 값을 받는다

CSS의 많은 속성은 상속된다. font-size도 그 중 하나라, 자식이 자기 font-size를 명시 안 하면 부모 값을 그대로 받는다. wrapper에 12px가 박혀있으면, 자식 모두 12px이 출발점이 된다.

#wrapper { font-size: 12px; } ← 기준 12px ┌─ p { 명시 안 함 } → 12px (상속) │ ├─ .header-text { font-size: 2em; } → 12 × 2 = 24px │ └─ .fluid-text { font-size: 1.5em; } → 부모(.header-text 24px) × 1.5 = 36px (누적!)

---

2 em 누적의 함정

이번 코드의 .fluid-text가 .header-text 안에 들어있다는 점이 중요하다. .header-text의 font-size가 이미 24px(2em)인데, 그 자식 .fluid-text가 1.5em이면 24 × 1.5 = 36px이지, wrapper 기준 12 × 1.5 = 18px이 아니다.

예상 (잘못된 직관)

wrapper 12px
.fluid-text 1.5em → 18px이라고 생각
실제는 다름 ✗

실제 (em 누적)

wrapper 12px → .header-text 2em(24px) → .fluid-text 1.5em (24×1.5)
= 36px

※ em이 중첩 시 곱해진다는 사실을 모르면 결과가 예측과 어긋난다. 이게 em의 가장 흔한 함정이다.

---

3 rem이 더 안전한 이유

rem은 root(html)의 font-size 기준이다. 중간 부모가 뭐든 상관없이 항상 root만 보므로 누적이 일어나지 않는다.

html { font-size: 16px; } ← root 기준 .header-text { font-size: 2rem; } → 16 × 2 = 32px .fluid-text { font-size: 1.5rem; } → 16 × 1.5 = 24px (중첩 무시!)

※ 실무 권장 패턴

• 큰 글자 크기 결정 (h1·h2·본문 등) → rem 사용
• 요소 안 미세 조정 (간격, 자식 글자 비율) → em 사용
• 최상위 html에 font-size: 16px (또는 62.5%로 10px 환산)

---

 

반응형

 

4 왜 wrapper에 font-size:12px을 박는가?

몇 가지 의도가 있다.

의도	설명
기준점 통제	브라우저 기본 16px에 의존하지 않고, 디자이너가 12px이라고 못 박음
자식 일괄 조정	이 한 줄만 바꾸면 안의 모든 em이 비례 조정
다국어 대응	한글·영문이 다른 크기로 잘 보이게 미세 조정
옛 호환	일부 옛 환경에서 기본 폰트가 14px이라 기준 통일 필요

※ 다만 12px은 작다. 가독성·접근성 기준 (WCAG)에서 본문은 16px 이상을 권장한다. 학습 예제니까 12px이지만 실제 서비스에선 14~16px 이상이 안전하다.

---

5 em vs rem vs px — 언제 무엇?

단위	기준	장점	단점
px	고정 픽셀	예측 명확	접근성 ↓ (확대 무반응)
em	부모 font-size	자식 비례 조정 쉬움	중첩 시 누적 (헷갈림)
rem	root font-size	예측 명확 + 접근성 ✓	큰 단위 변경엔 root 수정 필요
%	부모 (font-size에선 부모 폰트)	레이아웃에 좋음	font-size에 쓰면 em과 사실상 동일

---

6 자주 하는 실수

실수	증상	해결
em 중첩 누적 무시	예상한 글자 크기와 다름	중첩 트리 그려서 곱셈 확인
모든 단위를 em	유지보수 시 추적 어려움	rem을 기본, em은 미세 조정
html에 px 안 박음	브라우저별 기본값 차이로 흔들림	html { font-size: 16px; }
본문 12px	가독성·접근성 점수 ↓	본문은 14~16px 이상
line-height: 12px 같은 고정	글자 키워질 때 줄 안 늘어나 잘림	line-height: 1.6 (배수)

---

핵심 한 줄 요약

font-size 상속자식이 부모 값을 물려받음

em 기준부모(또는 자기) font-size

em 누적중첩 시 곱셈 — 가장 흔한 함정

rem 기준root(html) font-size — 누적 없음

wrapper font-size기준점 통제 — 한 줄로 일괄 조정

12px 함정학습용 OK, 서비스는 14~16px+

실무 패턴rem 큰 단위 + em 미세 조정

Tags

#가변폰트 #em단위 #rem단위 #font-size #상속 #em누적 #폰트기준점 #wrapper #반응형 #가변레이아웃 #CSS #HTML #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

가변폰트, em단위, rem단위, font-size, 상속, em누적, 폰트기준점, wrapper, 반응형, 가변레이아웃, CSS, HTML, 웹개발, 티스토리