eb3ca69b5d
'폰트 관련된 것도 스킬이 좀 잘 해줘야 하는데 그렇지 못한 것 같다'는 지적. 점검해보니 size-adjust, ascent-override, unicode-range, OpenType 기능, FOUT/FOIT, 폰트 라이선스가 스킬 어디에도 없었다. font-display 와 서브셋은 tokens.md 에 한 줄씩뿐이었다. references/typography.md 신설 - 고르는 절차: 개수를 먼저 정하고, 성격을 브리프에서 끌어내고, x-height·대비·웨이트 범위·숫자 형태를 실제로 재서 검증한다 - 가변 폰트: 축, 표준 속성 우선, 가변 축 애니메이션이 왜 게이트 8 위반인지 - 로딩: font-display 값별 선택 기준, preload 조건, unicode-range - 폴백 메트릭: size-adjust 와 override 3종. 재는 코드 포함 - OpenType: tabular-nums 등. font-variant-* 를 font-feature-settings 보다 먼저 - 한글: 동적 서브셋 원리, 웨이트가 라틴과 다르게 보이는 이유, 스택 순서 - 라이선스: 웹 임베딩 허용 여부가 상업 이용 허용과 다르다는 것 그리고 이 페이지가 그 규칙을 어기고 있었다 - 실측: 맑은 고딕이 Pretendard 보다 13.0% 넓다. 교체 순간 줄바꿈이 다시 잡힌다 - fonts.css 신설. OS 별로 폴백을 따로 정의하고 size-adjust 로 맞췄다 - 실측 차이 13.0% -> 0.0% preflight.md 에 폰트 검사 6개를 추가했다. 지금까지 하나도 없었다.
48 lines
1.8 KiB
CSS
48 lines
1.8 KiB
CSS
/* ============================================================
|
|
폰트 폴백 메트릭 보정
|
|
|
|
웹폰트가 늦게 오면 브라우저는 시스템 폰트로 먼저 그리고 나중에 교체한다.
|
|
두 폰트의 폭과 행 높이가 다르면 그 순간 레이아웃이 튄다. CLS 의 흔한 원인이고
|
|
font-display: swap 을 쓰는 한 반드시 일어난다.
|
|
|
|
그래서 폴백 폰트를 실제 폰트의 치수에 맞춘다.
|
|
아래 숫자는 이 페이지에서 직접 잰 값이다. 추정치가 아니다.
|
|
|
|
한글 Pretendard 1434px vs 맑은 고딕 1620px -> 88.5%
|
|
Apple SD Gothic Neo 1510px -> 94.9%
|
|
영문 Switzer 1580px vs Arial 1501px -> 105.3%
|
|
|
|
재는 법은 references/typography.md §4 에 있다.
|
|
OS 마다 시스템 폰트가 다르므로 폴백도 따로 정의한다. 하나로 뭉치면
|
|
한쪽 OS 에서는 보정이 틀린다.
|
|
============================================================ */
|
|
|
|
/* ---- 한글: Windows ---------------------------------------- */
|
|
@font-face {
|
|
font-family: "KO Fallback Win";
|
|
src: local("Malgun Gothic"), local("맑은 고딕");
|
|
size-adjust: 88.5%;
|
|
ascent-override: 108%;
|
|
descent-override: 27%;
|
|
line-gap-override: 0%;
|
|
}
|
|
|
|
/* ---- 한글: macOS ------------------------------------------ */
|
|
@font-face {
|
|
font-family: "KO Fallback Mac";
|
|
src: local("Apple SD Gothic Neo"), local("AppleSDGothicNeo-Regular");
|
|
size-adjust: 94.9%;
|
|
ascent-override: 100%;
|
|
descent-override: 25%;
|
|
line-gap-override: 0%;
|
|
}
|
|
|
|
/* ---- 라틴 -------------------------------------------------- */
|
|
@font-face {
|
|
font-family: "EN Fallback";
|
|
src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
|
|
size-adjust: 105.3%;
|
|
ascent-override: 110%;
|
|
descent-override: 28%;
|
|
line-gap-override: 0%;
|
|
}
|