한진
가장 큰 글씨는 영문 한 단어가 맡고, 국문은 한 단 아래에서 자간을 조여 받는다.
한진 홈페이지는 흰 지면에 회색 본문(#555555, 팔레트 최다 2,720회)을 얹은 국내 대기업 코퍼레이트 사이트입니다. 지면에서 가장 큰 글씨 자리(56.7px)는 영문 Titillium Web이 가져가고 국문 히어로는 그 한 단 아래인 52px/700 자사 서체 Hanjin Group Sans로 들어가는 이원 구조라, 국문과 영문에 서로 다른 위계를 주는 코퍼레이트 조판 사례로 볼 만합니다. 자사 웹폰트는 300·400·700 세 페이스만 내려오는데 CSS는 500·600까지 부르고 있어, 전용 서체를 세 단으로 운용할 때의 한계도 함께 보입니다. 다만 흰 글자를 브랜드 블루(#019DD8)에 얹은 조합이 3.08:1로 AA에 못 미친 채 276쌍 쓰이고 있으니 색 대비는 참고하지 마세요.
https://www.hanjin.comColor Palette
Primary
Label
Line
Background
Accent
Typography
Hanjin Group Sans · 300 / 400 / 700국문 전 구간 + 라틴 주력
Titillium Web · 300 / 400 / 600 / 700display (영문 전용)
Noto Sans KR · 300 / 400 / 500 / 700폴백
Type Scale크기는 layout
display (영문)56.7px · 700 · 1
Handgloves 123
hero (국문)52px · 700 · 1
다람쥐 헌 쳇바퀴
display-light (국문)37.8px · 300 · 1.4
다람쥐 헌 쳇바퀴
h2 (국문)33px · 500 · 1
다람쥐 헌 쳇바퀴
h3 (국문)24.6px · 700 · 1
다람쥐 헌 쳇바퀴
h4 (국문)22.7px · 500 · 1
다람쥐 헌 쳇바퀴
body-lg18.9px · 400 · 1.5
다람쥐 헌 쳇바퀴
ui / link17px · 400 · 1
다람쥐 헌 쳇바퀴
caption11.3px · 400 · 1
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Hanjin Group Sans (자사 전용, self-hosted) — 한글 9,244글리프 중 8,952(96.8%) + Light 220(2.4%) = 99.2%. Noto Sans KR은 72글리프(0.8%)뿐이다 |
| hangulWeights | 실제 내려오는 페이스는 300·400·700 셋이다(document.fonts: HanjinGroupSans 300·400·700 loaded, 미로드 0). 렌더 글리프는 400 6,032 · 700 1,598 · 500 1,266 · 300 220 · 600 56로 다섯 단인데 500·600 페이스가 없어 CSS 폰트 매칭상 이웃 페이스(500→400 · 600→700)로 대체된다 — 500이 1,266글리프나 되므로 실제 화면에서는 400과 구분되지 않는다(해석) |
| body | 18.9px/400 lh1.50 ls−0.72px(−3.6%) · 16.1px/400 lh1.40 ls−0.72px(−4.2%) — 1440 기준 (1920: 19.998px · 16.992px) |
| sub | 37.8px/300 lh1.40 ls−0.72px(−1.8%) — 웨이트 300이 쓰이는 유일한 큰 단, 2회 (1920: 39.996px) |
| label | 17px/700 lh1.00 자간 없음 ×14 · 17px/400 링크 ×14 — 61스타일 중 최다인 두 스타일이 둘 다 자간을 안 준다 (1920: 18px) |
| mixing | 한 서체가 국문과 라틴을 겸한다 — Hanjin Group Sans가 라틴 2,910글리프 중 2,536(87.1%)도 그린다. 영문 전용 Titillium Web은 372글리프(12.8%)로 섹션 제목 자리만 맡아 층이 갈린다. 자간도 갈린다: Titillium Web 10스타일 중 9개가 normal, Hanjin Group Sans는 41스타일 중 27개가 자간을 갖는다 |
| hangulHeadings | 있음. 히어로 헤드라인이 52px/700 lh1.00 ls−0.72px(−1.3%) Hanjin Group Sans 국문이다 — "'한진 브리온'으로 e스포츠 시장 전격 진출"(1440 실측 / 1920에서는 55.008px). 다만 지면 최대 크기 56.7px(1920: 59.994px)은 영문 Titillium Web이 가져가고 국문은 그 한 단 아래다 |
| verdict | 국문 히어로 레퍼런스로 유효 — 52px/700 국문 헤드라인이 폴드 안(y=90, 892px 블록)에 있고 자사 전용 서체가 한글의 99.2%를 그린다. 다만 두 가지를 감안할 것: ① 자간이 고정 −0.72px 17스타일과 −5% 15스타일 두 계통으로 갈려 한 규칙으로 옮길 수 없다 ② 행간이 61스타일 중 37개에서 1.00이라 국문 다중행 제목에는 그대로 쓸 수 없다 |
| rendered | Hanjin Group Sans ×8952 · Hanjin Group Sans Light ×220 · Noto Sans KR Medium ×64 · Noto Sans KR Regular ×4 · Noto Sans KR Bold ×4 |
영문 · Latin영문 전용
| latinFont | Hanjin Group Sans 2,536글리프(87.1%) · Titillium 372글리프(12.8%) · Noto Sans KR 2글리프(0.1%) |
| latinWeights | 실측 페이스 Light · SemiBold · Medium |
| share | 라틴 2,910글리프 / 한글 9,244글리프 — 지면의 23.9%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Hanjin Group Sans를 쓰는 단: hero (국문) 52px/700 · display-light (국문) 37.8px/300 · h2 (국문) 33px/500 · h3 (국문) 24.6px/700 · h4 (국문) 22.7px/500 · body-lg 18.9px/400 · ui / link 17px/400 · caption 11.3px/400 |
| mixing | 국영문 혼용 노드 246개(전체 856개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | Titillium 영문 전용(12.8% · 선언됨 · 최상단 디스플레이 독점) |
| verdict | 영문 전용 서체가 있다 — Titillium 라틴 12.8% / 한글 0.0% · 최상단 디스플레이 독점. 영문 디스플레이 레퍼런스로 유효(타입 스케일 최대 56.7px) |
| sharedWithKorean | 국문과 같은 서체: Hanjin Group Sans · Noto Sans KR |
| rendered | Hanjin Group Sans ×2260 · Hanjin Group Sans Light ×276 · Titillium Web ×238 · Titillium Web SemiBold ×72 · Titillium Web Light ×62 · Noto Sans KR Medium ×2 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | compact | |
| Base unit | 5px | |
| Max width | 1180px | |
| Section gap | 0 — 7섹션이 y=90·982·1529·2508·3371·4011로 맞붙어 있고 사이 마진이 없다. 구분은 안쪽 패딩(80/80 두 곳 | |
| Header | 90px relative | |
| Grid Hero | 히어로 슬라이드 1300×664 ×4 — 콘텐츠 폭(1180)보다 120px 넓다 | |
| Grid Business | Business 섹션 3열, 거터 33px | |
| Grid News | 뉴스·바로가기 3열 295×167, 거터 0 (테두리 1px #D9D9D9로 분리) | |
| Grid Global | Global Network 전폭 행 1180×180 ×8, 거터 0 | |
| Card Padding | 섹션 안쪽 패딩 80/80(Business·Global Network) · 70/220(뉴스) | |
| Button Padding | 알약 0×18 (radius 30) · 탭 20/0/18 (하단 3px) · 검색 0 (radius 0) · 목록 버튼 20/0 (하단 1px) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| small | 5px | 4회 · p·button 소수 |
| — | 10px | 2회 · div 2회, 관측만 |
| large | 25px | 12회 · div·label 배지형 |
| pill | 30px | 4회 · 아웃라인 버튼 — 원클릭 택배(1px #009DD7) · 고객의 말씀(1px #898989), 패딩 0×18 |
| circle | 50% | 76회 · 원형 아이콘 버튼('상세보기') — 라운드 중 최다 |
Guidelines
Do
- 국문 대형 제목에 자간 −0.72px을 고정으로 준다 — 55.008px에서 −1.3%, 39.996px에서 −1.8%로 크기가 작아질수록 상대값이 커진다. 이 사이트가 실제로 쓰는 방식이다
- 영문 섹션 제목은 자간 없이 세운다 — Titillium Web 10스타일 중 9개가 normal이다
- 라운드는 원형(50%, 76회)과 알약(30px, 4회)에만 쓰고 카드·슬라이드·행은 0px로 둔다
- 섹션은 마진 없이 붙이고 안쪽 패딩 80/80으로 나눈다. 강조할 한 섹션만 지면을 #F7F7F7로 바꾼다(7섹션 중 1곳)
- 간격은 5px 격자(5·10·15·20·25·30·50, 합 768회)로 맞춘다
- 액션 색은 두 갈래로 나눈다 — 링크·탭은 #00AEEF/#009DD7, 검색 같은 단일 실행 버튼만 #F7C200 지면에 검정 글자(12.67:1)
- 본문은 19.998px/400 lh1.50 또는 16.992px/400 lh1.40 — 제목이 lh1.00으로 붙어 있는 만큼 본문에서만 행간을 푼다
Don't
- 흰 글자를 브랜드 블루 #019DD8에 얹지 않는다 — 3.08:1로 AA 미달인데 276쌍 쓰이고 있다(이 사이트의 최대 결함)
- #00AEEF를 텍스트 색으로 쓰지 않는다 — #F7F7F7 위 2.36:1, #FFFFFF 위 2.53:1
- 웨이트 500·600을 쓰지 않는다 — Hanjin Group Sans는 300·400·700 세 페이스만 내려온다(document.fonts 실측, 미로드 0). CSS에 500·600을 적으면 이웃 페이스로 대체된다
- 노란색을 세 값으로 흩지 않는다 — #F7C200(버튼) · rgb(244,191,0)(그라디언트) · rgb(255,200,0)(테두리)이 공존한다
- 자간 규칙을 하나로 알고 옮기지 않는다 — 고정 −0.72px 17스타일과 −5% 15스타일이 섞여 있고 두 계통이 15px 부근에서만 겹친다
- 제목 행간 1.00을 국문 두 줄 이상에 그대로 쓰지 않는다 — 61스타일 중 37개가 1.00이라 다중행 국문에서는 붙어 읽힌다
- 2px outset rgb(0,0,0) ×24는 재현하지 않는다 — 브라우저 기본 테두리가 남은 자국이지 디자인 값이 아니다
- 브레이크포인트를 1900·1899·1799·1719·1699·1680·1649·1640·1600·1599·1559·1500·1460·1459px처럼 잘게 쪼개지 않는다
