이 페이지는 글꼴이 보이는가가 아니라 언어에 맞는 톤으로 읽히는가를 본다.
테마의 theme-vars 모듈은 언어별 폰트 스택을 분리해 두고, 페이지 언어에 따라 본문/제목/코드가 같은 계열로 묶이도록 설계되어 있다.
언어별 샘플
- 본문은
var(--font-body)계열을 따른다. - 제목은
var(--font-heading)계열을 따른다. - 코드 블록은
var(--font-mono)계열을 따른다. - 한국어 페이지에서는 CJK 친화적 모노스페이스가 깨지지 않는지 확인한다.
Korean: 가나다라마바사
English: The quick brown fox jumps over the lazy dog.
Japanese: ひらがな・カタカナ・漢字
Chinese: 中文排版的字重和间距
Arabic: العربية من اليمين إلى اليسار
원문 코드
.article {
font-family: var(--font-body);
line-height: var(--line-height-relaxed);
}
.article h2 {
font-family: var(--font-heading);
}
비교 기준
| 항목 | 확인 포인트 |
|---|---|
| 제목 | 언어가 바뀌어도 무게감이 유지되는가 |
| 본문 | 줄 간격이 너무 촘촘하거나 뜨지 않는가 |
| 코드 | monospace가 다른 글자폭과 충돌하지 않는가 |
| RTL | 방향 전환 후 정렬과 문단 흐름이 유지되는가 |
| 숫자 | 숫자와 기호가 본문 리듬을 깨지 않는가 |