Pretendard Variable과 Inter, 단 두 종.
한국어 줄나눔까지 통제해 어떤 화면에서도 또렷하게 읽혀요.
한국어는 Pretendard Variable, 영문 라벨·숫자는 Inter.
이 둘만으로 본문부터 디스플레이까지 일관되게 처리합니다.
gh/ 경로(github raw)는 MIME 타입 에러를 일으키므로 반드시 npm/ 경로(jsdelivr)를 사용해야 합니다.
한국어는 영문보다 글자 한 칸의 정보 밀도가 높아요.
같은 크기여도 더 또렷하게 보이도록 영문 표준보다 한 단계 작게 잡았습니다.
clamp(40px, 8vw, 72px)로 큰 화면에서만 최대 72px까지 자라요. 영문 시네마틱 헤딩에서는 예외적으로 최대 96px까지 허용하지만, 한국어 헤딩은 60~72px이 가독성·균형의 상한선입니다.
Pretendard Variable은 100~900 가변이지만
일관성을 위해 4단계만 사용합니다.
영어는 단어 사이 공백이 줄나눔의 자연 경계가 되지만,
한국어는 어절·조사 단위로 의미가 끊겨야 해요. text-wrap: balance만으로는 부족합니다.
/* 헤딩: 균형 잡힌 줄나눔 */ .h1, .h2, .h3, .hero-title, .lp-h3 { word-break: keep-all; text-wrap: balance; } /* 본문: 끝줄 widow 방지 */ .sub, .hero-sub, p, .lp-desc { word-break: keep-all; text-wrap: pretty; }
word-break: keep-all로 어절 중간이 잘리는 걸 막고, 헤딩은 balance, 본문은 pretty를 씁니다. 단, 브라우저 자동 처리만으로 완벽하지 않으므로 의도한 위치에 명시적으로 <br>을 넣는 것이 우선입니다.
한 번 번역한 스타일은 잊지 않아요. 다음 번역부터 자동으로 이어집니다.
한 번 번역한 스타일은 잊지 않아요.
다음 번역부터 자동으로 이어집니다.
text-wrap: balance는 보조 도구일 뿐이에요. 한국어에서는 두 문장이면 마침표 뒤, 한 문장이면 콤마·조사 자리에 직접 <br>을 넣어 의미 단위를 통제합니다. 자동 줄나눔에만 의존하면 화면 너비가 바뀔 때마다 widow가 생겨요.
대시보드 잔여 크레딧, 가격표, 진행률처럼
숫자가 변하는 자리에는 반드시 .tnum을 붙여요.
/* _shared-v5.css 에 정의돼 있음 */ .tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
본문 안 링크와 강조 컬러는 모두 .accent를 사용해
한 가지 시각 언어로 통일합니다.
/* 기본 링크는 색상 상속 (네비·푸터) */ a { color: inherit; text-decoration: none; } /* 본문 인라인 링크 / 강조 */ .accent { color: var(--action-blue); } .accent:hover { text-decoration: underline; }
아래 4줄만 head에 넣고 _shared-v5.css를 링크하면
이 가이드의 모든 토큰을 그대로 사용할 수 있어요.
<!-- 1. Preconnect (성능) --> <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <!-- 2. Pretendard Variable (npm 경로 필수) --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/web/variable/pretendardvariable.min.css"> <!-- 3. Inter (영문 라벨·숫자) --> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <!-- 4. v5 디자인 시스템 --> <link rel="stylesheet" href="/_shared-v5.css">
/* _shared-v5.css 가 제공하는 타이포 클래스 */ .h-display /* clamp(40px, 8vw, 72px) · display · tracking -0.04em */ .h1 /* clamp(36px, 6vw, 56px) · 700 · tracking -0.025em */ .h2 /* clamp(28px, 4.4vw, 38px) */ .h3 /* clamp(22px, 3vw, 28px) */ .sub /* 18px · text-tertiary · lh 1.7 */ .eyebrow /* Inter · uppercase · letter-spacing 0.08em */ .tnum /* tabular-nums (가격·잔액·진행률) */ .accent /* Action Blue 강조 */