CSS3 글꼴 조합이란?
CSS3는 글꼴 조합(Font Combination) 기술을 지원합니다. 이 기술의 핵심은 여러 개의 글꼴을 순서대로 나열해 두고, 브라우저가 첫 번째 글꼴을 지원하지 않을 경우 자동으로 다음 글꼴을 시도하는 방식입니다. 이를 흔히 폴백(Fallback) 메커니즘이라고 부릅니다.
웹은 다양한 운영체제와 브라우저 환경에서 열리기 때문에, 특정 글꼴이 사용자의 기기에 설치되어 있지 않을 수 있습니다. 이때 글꼴 조합을 활용하면 화면이 깨지거나 기본 글꼴로 단순 대체되는 문제를 효과적으로 예방할 수 있습니다.
글꼴 조합의 작동 원리
글꼴 조합은 font-family 속성에 쉼표(,)로 구분된 여러 글꼴 이름을 나열하는 방식으로 구현합니다.
p {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}위 코드에서 브라우저는 다음과 같은 순서로 글꼴을 적용합니다.
- 먼저 "Helvetica Neue" 글꼴이 시스템에 있는지 확인합니다.
- 없다면 Helvetica를 시도합니다.
- Helvetica도 없다면 Arial을 시도합니다.
- 모든 지정 글꼴이 없으면 마지막으로 범용 계열인 sans-serif를 적용합니다.
Sans-Serif 글꼴 조합 예시
대표적인 Sans-Serif(세리프 없는 고딕 계열) 글꼴 조합은 아래 이미지와 같습니다.
자주 사용되는 글꼴 조합 추천
1. 시스템 UI 스타일
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;macOS, Windows 등 각 운영체제에 최적화된 기본 UI 글꼴을 우선적으로 사용하는 방식으로, 최신 웹사이트에서 널리 활용됩니다.
2. Serif(명조 계열) 조합
font-family: Georgia, "Times New Roman", Times, serif;뉴스나 에세이 형태의 콘텐츠에 어울리는 전통적인 인쇄 느낌의 조합입니다.
3. 모노스페이스(코드용) 조합
font-family: "SF Mono", Consolas, "Courier New", monospace;코드 블록이나 터미널 스타일 텍스트에 적합한 등폭 글꼴 조합입니다.
글꼴 조합 작성 시 주의 사항
- 마지막에는 반드시 범용 계열(generic family)을 포함하세요. serif, sans-serif, monospace, cursive, fantasy 중 하나를 지정하면 어떤 환경에서도 최소한의 일관성이 유지됩니다.
- 공백이 포함된 글꼴 이름은 큰따옴표(" ")로 감싸는 것이 안전합니다.
- 웹 폰트(Web Font)를 함께 사용하면 방문자의 기기에 글꼴이 없어도 원하는 디자인을 유지할 수 있습니다.
마무리
CSS3의 글꼴 조합은 단순해 보이지만, 다양한 사용자 환경에서 일관된 타이포그래피를 유지하기 위한 필수 기술입니다. 폴백 순서를 전략적으로 설계하고 마지막에 범용 계열을 반드시 지정하는 습관을 들이면, 어떤 브라우저에서도 안정적인 화면을 제공할 수 있습니다.