같은 문장도 어떤 서체로 얹느냐에 따라 화면 인상이 통째로 달라집니다. CSS에서 서체는 font-family 한 줄로 정해지고, 그 안에 담기는 이름들이 곧 폰트의 분류입니다. 아래 예제는 그대로 복사해 확인할 수 있습니다.
53.1 제네릭 패밀리 다섯 가지
CSS에는 특정 폰트 이름 없이 계열만 가리키는 키워드가 있습니다. 이걸 제네릭 패밀리라 부르고, 브라우저가 그 계열 기본 서체로 대신 그립니다.
.a { font-family: serif; } /* 획 끝에 삐침이 있는 명조 계열 */
.b { font-family: sans-serif; } /* 삐침 없는 고딕 계열 */
.c { font-family: monospace; } /* 모든 글자 폭이 같은 고정폭 */
.d { font-family: cursive; } /* 손글씨를 본뜬 필기체 */
.e { font-family: system-ui; } /* 그 기기의 운영체제 기본 서체 */
이 다섯 키워드는 따옴표 없이 그대로 씁니다. 폰트 파일을 불러올 필요가 없어 로딩이 0이고, 어떤 기기에서도 반드시 무언가로 그려진다는 점이 장점입니다.
53.2 font-family 스택과 폴백 체인
font-family에는 값을 하나만 적지 않습니다. 쉼표로 여러 이름을 늘어놓으면 앞에서부터 찾다 없으면 다음으로 넘어가는 폴백 체인입니다.
body {
font-family: "Inter", system-ui, sans-serif;
}
브라우저는 Inter를 찾고, 없으면 운영체제 기본으로, 그마저 없으면 아무 고딕 계열로 그립니다. 여기서 중요한 규칙은 맨 끝에 반드시 제네릭 패밀리를 두는 것입니다.
/* 나쁜 예: 폴백에 제네릭이 없다 */
h1 { font-family: "Playfair Display"; }
/* 좋은 예: 못 찾아도 계열은 지킨다 */
h1 { font-family: "Playfair Display", serif; }
앞의 폰트가 없는 기기에서 위쪽은 임의의 서체로 떨어져 고딕이 나올 수 있고, 아래쪽은 최소한 serif 계열이 보장됩니다. 이름에 공백이 있으면 따옴표로 감싸고, 한 단어는 생략해도 됩니다.
.x { font-family: "Times New Roman", serif; }
.y { font-family: Georgia, serif; }
53.3 serif는 전통과 본문 가독성
serif는 획 끝에 작은 삐침이 붙은 계열입니다. 오랜 세월 인쇄물 본문에 쓰여 전통과 신뢰의 인상을 주고, 긴 글에서 눈이 흐름을 타기 좋습니다.
.article-title {
font-family: Georgia, "Times New Roman", serif;
font-size: 32px;
font-weight: 700;
color: #1a1a1a;
}
격식 있는 매체의 큰 제목에 serif를 얹으면 진중한 분위기가 살아납니다. 다만 글자가 작으면 획 끝 장식이 뭉개져 지저분해집니다.
/* 화면에서 위험: 작은 본문에 serif */
.small-note {
font-family: serif;
font-size: 12px;
}
그래서 화면에서 serif는 크고 굵은 제목에 배치하는 것이 안전합니다. 큰 글자에서는 장식이 또렷이 살아나 우아함이 드러납니다.
53.4 sans-serif는 화면의 기본
sans-serif는 삐침을 걷어 낸 계열입니다. 장식이 없어 낮은 해상도와 작은 크기에서도 형태가 잘 유지됩니다. 오늘날 화면 본문의 기본이 이 계열입니다.
body {
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #333;
}
버튼과 메뉴, 입력칸 같은 기능 요소는 명료함이 최우선인데, sans-serif의 깔끔함이 잘 맞습니다.
.btn, .input {
font-family: system-ui, sans-serif;
font-size: 15px;
}
특별한 이유가 없는 한 화면 본문에는 sans-serif가 가독성 면에서 무난합니다.
53.5 monospace는 코드와 표
monospace는 모든 글자가 똑같은 너비를 차지하는 고정폭 계열입니다. 좁은 i와 넓은 W가 같은 폭을 써서 글자들이 세로로 줄을 맞춥니다.
code, pre {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 14px;
}
코드에서는 정렬과 공백 개수가 의미를 가지므로 고정폭이 거의 필수입니다. 비슷한 글자를 구별하기 쉽게 설계돼 오타도 줄여 줍니다. 표에서 숫자를 세울 때도 좋습니다.
.price-cell {
font-family: ui-monospace, Menlo, monospace;
text-align: right;
}
고정폭 숫자를 오른쪽 정렬하면 자릿수가 맞아 비교가 쉽습니다.
53.6 디스플레이와 장식체는 큰 제목에만
디스플레이 서체는 제목이나 로고처럼 크게 쓰일 것을 전제로 만든 계열입니다. 개성이 강해 큰 크기에서 인상을 남기지만, 본문에 쓰면 눈이 금세 피로해집니다.
/* 좋은 예: 크고 짧은 문구에만 */
.hero-title {
font-family: "Bebas Neue", sans-serif;
font-size: 64px;
}
/* 나쁜 예: 장식체를 긴 본문에 */
.paragraph {
font-family: cursive;
font-size: 15px;
}
cursive 같은 필기체는 획이 이어져 가독성이 낮아, 감성적인 짧은 문구에만 씁니다. 이런 특수 계열은 특정 장면에서 반짝 빛나는 조연이지 본문을 이끄는 주역이 아닙니다.
53.7 시스템 폰트 스택은 로딩 0
웹폰트를 내려받지 않고 각 운영체제의 기본 서체를 그대로 쓰면 다운로드가 없어 첫 화면이 곧바로 그려집니다. 그래서 흔히 쓰는 것이 아래의 긴 시스템 폰트 스택입니다.
body {
font-family:
-apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue",
Arial, "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji";
}
이 한 줄이 애플에서는 San Francisco를, 윈도우에서는 Segoe UI를, 안드로이드에서는 Roboto를 골라 씁니다. 각 기기 사용자에게 익숙한 서체가 로딩 없이 나옵니다. 최근에는 이 스택을 system-ui 한 단어로 줄이기도 하는데, system-ui가 한글을 담지 않는 환경이 있어 한글 화면에서는 명시적 한글 폰트를 앞에 두고 그 뒤를 받치는 조합을 많이 씁니다.
body {
font-family: "Pretendard", system-ui, sans-serif;
}
Pretendard가 있으면 쓰고, 없어도 운영체제 기본으로 떨어집니다.
53.8 굵기와 스타일은 분류와 별개
serif냐 sans-serif냐 하는 분류는 서체의 계열이고, 굵기와 기울기는 별개의 축입니다. 같은 계열 안에서 font-weight와 font-style로 여러 표정을 만들 수 있습니다.
.thin { font-weight: 300; }
.normal { font-weight: 400; }
.bold { font-weight: 700; }
.italic { font-style: italic; }
서체를 섞지 않고 굵기 하나로 위계를 세울 수 있습니다. 제목과 본문과 보조 글자를 같은 계열의 다른 굵기로 처리하면 통일감을 지키면서 순서가 잡힙니다.
.card {
font-family: system-ui, sans-serif;
}
.card h3 {
font-weight: 700;
font-size: 18px;
}
.card p {
font-weight: 400;
font-size: 15px;
color: #444;
}
.card .meta {
font-weight: 400;
font-size: 13px;
color: #888;
}
모두 한 계열인데 굵기와 크기, 색만으로 제목과 본문과 보조가 또렷이 갈립니다. 서체 개수는 늘리지 않으면서 읽는 순서를 정해 준 셈이지요. 아주 얇은 굵기는 기기에 따라 획이 사라질 수 있어 본문에는 400 이상이 안전합니다.
53.9 정리
폰트는 serif와 sans-serif를 큰 축으로, monospace와 디스플레이, cursive를 특수 갈래로 나눕니다. font-family는 쉼표로 이름을 늘어놓은 폴백 체인이고, 맨 끝에는 반드시 제네릭 패밀리를 둬 계열이 지켜지게 합니다. 본문은 sans-serif를, 코드는 monospace를, 큰 제목에만 디스플레이 계열을 쓰고 굵기로 위계를 만드는 것이 기본입니다. 서체는 글의 목소리를 정하는 연출이었습니다.