목표: 웹에서 글꼴을 올바르게 설정하고, 가독성을 확보하며, 로딩 지연을 최소화하는 실무 패턴을 익힙니다.
목차 1. 기본 개념과 용어 2. 안전한 시스템 글꼴 스택 3. 글자 크기 단위와 반응형 타입스케일 4. 행간(line-height)·자간(letter-spacing) 5. @font-face와 웹폰트 최적화(font-display, unicode-range) 6. 가변 폰트(Variable Fonts) 기초 7. OpenType 기능: 숫자·합자·커닝 8. 실무 패턴 5가지 9. 연습문제
1) 기본 개념과 용어
- font-family: 사용할 글꼴 패밀리 목록(스택). 앞에서부터 사용 가능한 글꼴을 선택합니다.
- fallback: 지정 폰트가 없을 때 대체되는 폰트(예:
sans-serif). - weight & style: 굵기(100–900), 기울임(italic/oblique).
- metrics: x-height, ascent/descent 등 폰트의 세로 비율. 폰트 바꿀 때 줄바꿈 흔들림의 원인.
- variable font: 굵기·너비 등을 연속값으로 지정 가능한 폰트(파일 수↓, 조절 범위↑).
2) 안전한 시스템 글꼴 스택
웹폰트를 쓰지 않아도 OS 기본 글꼴만으로도 충분히 깔끔한 UI를 만들 수 있습니다.
예제
/* 한글 UI를 고려한 일반 본문 스택 */
body {
font-family:
system-ui, -apple-system, Segoe UI, Roboto,
"Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic",
"Helvetica Neue", Arial, sans-serif;
}
/* 코드/숫자 가독성에 좋은 모노스페이스 스택 */
code, pre {
font-family:
ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono", monospace;
}미리보기
이 문장은 시스템 글꼴 스택으로 렌더링됩니다. Office · 123,456
const price = 123_456;3) 글자 크기 단위와 반응형 타입스케일
px: 절대값. 제어가 쉽지만 반응형 설계에서 유연성이 떨어질 수 있음.rem: 루트(html) 기준. 컴포넌트 재사용과 접근성에 유리.em: 부모/자기 자신 기준. 중첩 시 배수 효과.clamp(min, preferred, max): 뷰포트에 맞춰 유연하게 크기 조정.
예제: clamp로 제목 자동 스케일
h1 { font-size: clamp(1.8rem, 2.5vw + 1rem, 3rem); }
p { font-size: 1rem; }미리보기
반응형 타이틀
뷰포트에 따라 타이틀 크기가 부드럽게 변합니다.
4) 행간(line-height) · 자간(letter-spacing)
한글 본문은 line-height 1.6–1.8이 가독성이 좋고, 자간은 보통 0(기본) 권장입니다. 큰 헤딩은 약간의 음수 자간을 줄 때가 있으나 과하면 가독성이 떨어집니다.
예제
.body { font-size: 1rem; line-height: 1.7; letter-spacing: 0; }
.heading{ font-size: 2rem; line-height: 1.25; letter-spacing: -0.01em; }미리보기
큰 제목 헤딩
한글 본문은 행간이 넉넉할수록 읽기 수월합니다. 너무 좁으면 줄바꿈이 빽빽해져 피로도가 증가합니다.
5) @font-face와 웹폰트 최적화
- WOFF2 우선(용량↓). 필요 시 WOFF/TTF 백업.
- font-display: swap: 폰트 로딩 전 시스템 폰트로 먼저 그렸다가 교체 → FOUT 허용, 레이아웃 점프 최소화.
- unicode-range: 필요한 문자만 서브셋 제공(한글/라틴 분리 시 용량 대폭↓).
- local(): 사용자 시스템에 설치된 폰트가 있으면 그걸 먼저 사용.
예제
@font-face {
font-family: "MyUI VF";
src:
local("MyUI Variable"),
url("/fonts/myui-vf.woff2") format("woff2");
font-weight: 100 900; /* 가변 폰트 범위 */
font-style: normal;
font-display: swap;
unicode-range: U+000-5FF, U+AC00-D7A3; /* 라틴 + 한글 */
}
.body { font-family: "MyUI VF", system-ui, -apple-system, "Noto Sans KR", sans-serif; }미리보기
웹폰트가 로드되기 전엔 시스템 폰트로 보였다가, 로드 후 자동으로 교체됩니다(font-display: swap).
실제 배포 시엔 폰트 라이선스를 꼭 확인하고, 서브셋(필요 문자만) 생성으로 초기 로딩을 가볍게 하세요.
6) 가변 폰트(Variable Fonts) 기초
하나의 파일로 여러 굵기/너비를 표현합니다. font-weight로 일반 축을, font-variation-settings로 추가 축을 제어합니다.
예제
.vf { font-family: "MyUI VF", system-ui, "Noto Sans KR", sans-serif; }
.vf.w300 { font-weight: 300; }
.vf.w700 { font-weight: 700; }
.vf.custom { font-variation-settings: "wght" 650, "wdth" 95; }미리보기
가변 폰트 예시: 300
가변 폰트 예시: 700
가변 폰트 예시: wght 650, wdth 95
※ 설치/로딩된 폰트가 가변 축을 지원해야 효과가 보입니다.
7) OpenType 기능: 숫자·합자·커닝
- font-variant-numeric:
tabular-nums(등폭 숫자),lining-nums/oldstyle-nums - font-feature-settings: 세부 제어(
"liga"합자,"kern"커닝 등) - font-kerning:
auto/normal/none
예제
.nums { font-variant-numeric: tabular-nums; }
.liga { font-feature-settings: "liga" 1, "kern" 1; }미리보기
비등폭 숫자: 11 22 333 4444
등폭 숫자: 11 22 333 4444
office, affinity, efficient
※ 폰트가 해당 기능을 지원해야 표시됩니다.
8) 실무 패턴 5가지
패턴 A. 전역 베이스 설정(접근성 우선)
html { font-size: 16px; } /* 사용자 확대 배율을 존중 */
body {
font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", "Malgun Gothic", sans-serif;
font-size: 1rem; line-height: 1.7; -webkit-text-size-adjust: 100%;
}패턴 B. 헤딩 타입스케일(클램프)
h1 { font-size: clamp(1.8rem, 2.5vw + 1rem, 3rem); line-height:1.25; }
h2 { font-size: clamp(1.4rem, 1.6vw + .9rem, 2.2rem); line-height:1.3; }
p { font-size: 1rem; }패턴 C. 코드/표 숫자 정렬(등폭 숫자)
table td.num, .code-stats { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono", monospace; }패턴 D. 다국어 혼용(라틴 전용 서브셋 우선)
@font-face {
font-family: "Brand Latin";
src: url("/fonts/brand-latin.woff2") format("woff2");
unicode-range: U+000-5FF; /* 라틴만 */
font-display: swap;
}
.lang-en { font-family: "Brand Latin", inherit; }패턴 E. 폰트 로딩 FOUT 최소화
@font-face { font-family:"Brand"; src:url("/fonts/brand.woff2") format("woff2"); font-display: swap; }
body { font-family:"Brand", system-ui, "Noto Sans KR", sans-serif; }9) 연습문제
- 시스템 스택: 본문 기본 글꼴을 시스템 스택으로 바꾸고 코드 블록은 모노스페이스 스택을 적용하세요.
- 타입스케일:
clamp()를 이용해h1~h3의 반응형 스케일을 설계하세요. - @font-face:
font-display: swap과unicode-range가 들어간 웹폰트 선언을 작성하고 본문에 적용하세요. - 가변 폰트: 같은 문장에
font-weight: 300,700,font-variation-settings를 각각 적용해 차이를 확인하세요. - OpenType: 표의 숫자 열에
tabular-nums를 적용해 세로 정렬이 균일해지는지 확인하세요.
한글 본문은 line-height 1.6–1.8, 본문 최소 16px 이상을 권장합니다. 큰 제목에는 미세한 음수 자간을 쓸 수 있으나 과도한 축소는 피하세요.
